SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    filter search results without reloading page

    I'm wondering how to do the following, here is a simplified example:


    Let's say I have a database of pictures of animals. A search for "pets" is performed and it loads a page of thumbnail images. Somewhere on the page is a list of other search criteria (text link or checkbox) that would narrow the initial returned results. An example would be "cats", "dogs", "hamster", etc.

    Is there a way after the initial search is performed that the results could be further filtered without having to hit a submit button and reload the page?

  2. #2
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, this can be achieved through javascript only or ajax, depending on the specifics.
    If you simply want to filter the results that are already on screen, you could use javascript to show or hide certain elements based on their attributes.

    If you want to do a new query to the database, you need ajax. With ajax you can essentially "refresh" a piece of PHP code, sending new parameters to the same script.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  3. #3
    SitePoint Zealot PixelPaul's Avatar
    Join Date
    Nov 2003
    Location
    Wisconsin, USA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    To do there ajax version described (new query to database), is there a term that would describe this functionality? I tried to Google for more info, but I'm not sure what I should be searching for.

  4. #4
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would first of all recommend using jQuery (if you aren't already), this makes the use of ajax a lot easier.

    You would be using the $.post function. It works basically like this:

    Code JavaScript:
    $.post('url to request',{parameter: value, parameter: value},function(data){
     
        /* handle 'data' */
     
    });

    The url to request here would be the script that does the database query and returns the results, the parameters here could be the new sorting method (these parameters are directly passed to $_POST).
    Within the $.post function you need a bit of jQuery to process the data variable that is given back and contains the output of the file that you requested.
    If you simply have the script that is requested through ajax output the new items, this output will be in the data variable and all you have to do is put it into a div like so:

    $('#content').html(data);

    So your final ajax script could look like this:

    Code JavaScript:
    $.post('results.php',{sort_method: 'az'},function(data){
     
        $('#content').html(data);
     
    });

    If you want more information, just google for ajax, jquery and php.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •