I’m trying to create a ‘filter by’ for a site I’m working but am not sure how to do that. I’ve already built the ‘filter by’ list and each one is able to get the results of that particular query but need to know is how to get it to change the results every time an option is click (or even removed if the button unchecked).
I’m guessing I need to use AJAX to change the results without refreshing the page but haven’t really used it before so am not sure where start
Yes, AJaX would be my way of doing it. I don’t have time to type out an example, for you. However, there should be plenty of documentation found on Google. Basically, use AJaX (either build your own XMLHttpRequest, or use jQuery or MooTools for AJaX) to get the results based upon the form data (checkboxes and whatnot) present, and then use the DOM to change the innerHTML (JS) or .html() (jQuery) of the results element.
I’m really sorry to be a pain but I wondered if you could help me with this please. I’ve searched google but haven’t been able to get this sorted yet. All of the examples I’ve come across are for forms but I have a list of links instead. I’m more than happy to pay for help with this but I’m really desperate to get it sorted now.
If you’re using links or forms, you want to use preventDefault() so that the page won’t refresh. I’ll try to provide some pseudo-code. This hasn’t been tested.
Let’s say you have two links - Sort By Name (ASC) and Sort By Name (DESC) - and an area where the results appear. If you can get your sql recordset into JSON format or XML format, $.get() can work.
Create one function that can handle both ascending and descending. Place the following within your jQuery document ready function.
$('.sorter').click(function(event){
event.preventDefault();
var dir = ($(this).hasClass('asc')) ? 'asc' : 'desc' ; // ternary if statement
$.get('sqlPage.php',{dir:dir}).done(function(data){ // assuming JSON, display it - you can figure out the rest
$('#dsplyNames').html(data);
});
}
);
I’m interested in why you think that using multiple class attributes is a no-no?
Oops - in looking over the code I see that there are literally two class attributes there, and not multiple class selectors within the one class that I thought was being mentioned.
My take is that the problem isn’t multiple class values, but multiple class attributes eg. ...class="val1 val2 val3"
is OK ... class="val1" class="val2" class="val3"
is not
Thank you that’s working great although each time I click a flavour it changes the results, is it possible to add results instead? So if I click strawberry and then tropical it’ll show everything with both flavours?
Yup, we can define a status class on container div like “is-loaded” on success of ajax call. Then place a check if this class exists on not to differentiate between first call and subsequent calls.
Try something like this (havn’t tested this code snippet but you will get some idea out of it)
and it worked, but I’ve got another question. When I go to the search file (/products/filter/?search=Chocolate for example) directly it loads the correct results, but if I call it like this I don’t get any results. I’ve checked and both of them use GET
