How to efficiently load filtered AJAX content?

Question

I'm working on an AJAX loaded shopping app, with a Masonry layout.

I using a loop to load and display the products:

function get_next_entry() {
    $data = next_entries(); //get the ids of the next 6 products
    $.ajax({
          type: 'POST',
          url: $url,
          data: $data,
          cache: true,
          success: function(data) {
                var xml = $(data);
                xml.find('entry').each(function(){
                    var el = $($(this).text());
                    el.imagesLoaded(function() {
                        $collection.append( el ).masonry( 'appended', el, true );
                        el = set_visibility( el );
                    });
                });
                if ($resync) {
                    $collection.masonry();
                }
                get_next_entry();
            },
          dataType: 'xml',
          async:true
    });
}

$data contains an array of product ids. The HTML of each product is cached by its id so they can be retrieved without MySQL queries to reduce the load on my database server, and can be served faster.

I have a jQuery filtering system on the products that toggles visibility.

When a filter is selected I need to only load the products from that filter. When the filter is then deselected I need to resume loading of the whole catalog.

I don't want to do this with multiple MySQL queries as there will be a lot of these queries per user (my loop loads 6 products at a time so a query each loop cycle would be too many).

My current solution is to AJAX get the entire catalog list as an XML list of ids with the filters as attributes (so I can filter with jQuery easily rather than JSON) then remove products from this list as I load them:

<data>
    <product category="category">id</product>
    <product category="category">id</product>
    <product category="category">id</product>
    ...
</data>

Is there a better way to do this?

hi, Not really, the XML list is cached too, so is quite responsive, a little pause in loading as the list is retrieved but not too bad, I'm just interested in people thoughts who might have a better solution. — Rowan Gray, Jul 09 '14 at 11:35

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

If you just want to hear alternatives, you could use multidimensional Arrays using JSON, like in these two questions: 1) Get data from php array - AJAX - jQuery 2) json and multidimensional array

This might reduce some time, since the encoding is shorter than the XML text.

However, I still would prefer your approach, since it's way easier to manipulate and manage the data.

edited May 23 '17 at 12:11

Community

1
1

answered Jul 12 '14 at 01:51

Poehli

307
4
16

How to efficiently load filtered AJAX content?

1 Answers1