I came across this page at walmart.com and on the left side of the page is a checkbox filtering system that is done on the client side. When you check the price checkbox selection it filters out the brands and disables enables/disables them etc.
When i had a look at the source code the checkboxes have no values and when i tried to find the REFINEMENT.clicked event I couldn't find it when I downloaded the page. It's a very big page with lots of code and would prob take a long time to go through it.
I was wondering how could I implement this filtering system in jquery for the client side. You could use a array that stores values but how would i know which properties the filters have as each page would show different filters (other than price range) based upon the product type.
If someone could point me in the right direction or give an example as to what to do that would help.
It is a simple ajax call.
Here is a very similar question Filter divs/table rows based on checkbox criteria -Javascript/JQuery
Here is the url when the top checkbox is checked and it results in a JSON reply.
{"dvals":[{"id":"500580", "count":"16"},...
So they contact the server each time
clicked:function(K){var J=F(K);if(!J.disabled||J.checked){J.checked=!J.checked;ASN.RefinementBox.check(J);}},
check:function(K){try{if(!K.checked){ASN.RefinementBox.uncheck(K.id);ASN.BubbleMsg.bubbleMsg(K.id);}else{if(!REFINEMENT.maximumCheck(K)){A.putDval(K.id);ASN.RefinementBox.sendSelection();ASN.BubbleMsg.bubbleMsg(K.id);}}}catch(J){}},uncheck:function(J){A.removeDval(J);ASN.RefinementBox.sendSelection();}
In the page itself it has stuff like
WALMART.quicklook.items.push({"itemId":16472509,"price":'<!--Start qlPrevNextPricing Tag--><span class="prevNextDefaultText"><span class="PriceL"></span><span class="bigPriceText2">$398.</span><span class="smallPriceText2">00</span><span></span></span><!--End qlPrevNextPricing Tag-->',"thumbnailURL":"http://i.walmartimages.com/i/p/00/88/61/11/62/0088611162102_60X60.gif"});
and similar to hold prices to calculate and to show
The PicNet Table Filter Plugin for jQuery lets you filter a table of data with check boxes or search fields. Just make sure your table contains the data to be filtered, even if they are in hidden columns that the user can't see.
Related
If you believe the title can be edited please feel free to do so.
I have small web app that's used to search for entries in a database. You are given a table of entries, and you can click on one of those entries to expand it down (accordion) to view more details.
I want to add a few buttons to manipulate the entries in different ways, however, I am not sure how to pass information from the button click to a javascript function that I can use to identify and change the data in the database. Pretty much there may be 50 rows in the table, but I want to identify which one the button was pushed in (specifically something that can be used to uniquely identify the row in the database, not in the HTML table).
How/what should I pass to a function when the button is clicked?
I apologize if this is too broad, I have absolutely no idea where to start, any guidance is welcome.
Everything depends on how you submit button click to the server. If you do this with ajax call then the simplest solution will be to add entry id to the request. You can add this id to the table row with data-entry-id="{id_from_table}" and then retrieve it in js. If your buttons are simple links then you can change it to button/input with type submit and wrap it with form which would have hidden field of entry_id.
I am currently working on a Spring healthcare application where the doctor can enter the diagnosis codes in the input tag of a page. What I want is that the doctor should be able to select the codes from a drop-down menu, the problem with ICD10 codes records is that there are a lot of them. Can anyone suggest a tool or a javascript library that can make my life easier?
You can use a search feature for this. You could have a text input with a search button. When the user types some of the initial text of the ICD-10 code and clicks the search, you perform a search request to the backend, and with the results, you can load a regular select.
Of course you would have to create a search endpoint in your backend, and possibly your select would need to be paginated. You could even display the results in a table instead of a select and add a select button to the rows.
If you just want to display the codes in your HTML, the resulting page will be heavy, no matter how many pagination features you add. If all your ICD-10 codes are sent to the client right away, we could be talking about MBs to render your page, that's why I'll move the retrieval of codes to the backend and limit it there with some "limit + offset" feature.
So, a search box. When the user clicks the search button, you perform a request telling the backend the term to search, a limit, like 10, and an initial offset, probably 0. You display those results in a table and, if there are more, a pagination. When the user clicks another page, you perform the same request specifying a different offset, and so on.
I'm using yadcf plugin on jquery dataTables. I'm looking at
yadcf-showcase.appspot.com/server_side_source.html
and say you click on the first column filter. It shows you a list of options. You click on Other Browsers Eng'. It transforms the table appropriately. You click on the filter again to see the same list of options.
For me, when I transform the table through AJAX, I also transform the filters, which is a good thing. I mean you now see what else is available to you... unless you click on your original filter, then you have to erase that filter to go back to see your original list of options.
How do I keep the original list of options in there?
If you are using the server side setup for your datatables then its up to you to maintain the list of available options in the yadcf filters. In adtion to your data of the table that you send from your server back to your client you need to set the filter values into the yadcf_data_0 / yadcf_data_1 / etc...
See more info about the server side setup on the showcase code snippet in the bottom of the page
If its not the server side setup but rather a DOM / AJAX and you want your filters to be populated by only the available values from the table, then you should use the cumulative_filtering option of the yadcf
p.s
I'm the author of yadcf
Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.
I am trying to implement a list of items that each have a checkbox to select the item. On top of the list, there is 2 radio button to check all or none items. However, when I update the selected list, the checkbox is not checked. I have got a fiddle here to illustrate the problem:
http://jsfiddle.net/hawaii/VcZBf/2/
Could you guys help me on this please.
Thanks
UPDATED
So you want to do a "checkAll(On this Page)" implementation.
To maintain changes to your checks from one paging event to the next, I would push the currently checked items in the grid to the server during the paging event, or have the act of checking / unchecking maintain back to the DB right after each event. Its a cheap call, and you aren't at a risk of losing checked items because the user hit the backspace key accidentally.
Without sending the checks to the server on every paging operation...
your checks to be stored locally separate from the list even when the template that those records represent is paged to another page.
(make sure to only update the people observablearray when you get your next page)
then, importantly, on every page event you need to apply the checks back onto the grid for the shown items.
Finally, to aleviate the fact that the checkmarks arent representing their checked state (you click check-all, and you don't see them get checked). This is because you had checked:$parent.checkedPeople. which will never work, since checkedPeople is an array, not a boolean. I changed this to a function that asks if this person ID is in the checked People array
anyhow.. here it is: http://jsfiddle.net/VcZBf/24/
Its a rough concept.
WITH sending the current checks to the server on every paging operation
Each object now would have an "isChecked" observable.
On every paging event, the current page's checkmarks are persisted to the DB server side.
Then if you page back to a page with checkmarks on it, they show back up for you.
Much smoother.
reference from previous answer:
http://en.wikipedia.org/wiki/Principle_of_least_astonishment
I simplified your structure a little bit. I don't think having both people and checkedPeople was really knockout-y. If you do want checkedPeople, it can probably just be a read-only computed observable.
I added an IsChecked field to the initial people (all false). I then changed the checkboxes to map to that. Finally, I had the radio buttons change all IsChecked fields using arrayForEach.
Right now, the radio button GUI isn't really intuitive. You can take two appraoches:
Make them regular buttons (recommended)
Make them check and uncheck automatically by data-binding the checked to a computed allChecked flag in the model. This would mean they check automatically even if you check the boxes one by one.
I also took out your logging. I'm assuming that was debugging, but you can re-add it if needed.