Documentation / AJAX related problems

AJAX related problems

Refreshing page’s content with AJAX is a great and convenient feature, but the correctness of its work depends very much on the HTML features of your theme and often requires extra efforts to be compatible with those functions of your site, the work of which depends from JavaScript. So be ready that you may need to take some extra steps to use the AJAX feature.

After loading filtering results by AJAX, some features on the page stopped working

Some of the JavaScript features that make page elements work “search” for those elements at the moment when the page loads. If you downloaded these elements via AJAX, then you need to force your JavaScript functions to “search” through the downloaded elements again. You can do this by adding your JavaScript functions to the “ready” trigger, which is triggered after AJAX loading filtering results.

Here’s what this trigger looks like:

jQuery(document).trigger("ready");

For example, you have content that collapses and expands when you click on an arrow and it stops working after loading AJAX filtering results. The function that triggers a collapse or expansion looks something like this:

jQuery('button.collapsible').on('click', function(e){
  // your useful code
}); 

You need to add a “ready” event to the “click” event to look like this:

jQuery('button.collapsible').on('click ready', function(e){
  // useful code
});

If you do not have the ability to overwrite the original function, then you can copy it and overwrite with the event “ready”:

jQuery('button.collapsible').on('ready', function(e){
  // useful code
});

And finally, if you need to re-init some jQuery plugins after AJAX loaded, use please next code construction:

jQuery(document).on('ready', function(e){
    /* useful code, e.g. jQuery("[data-fancybox]").fancybox(); */
});

Make your filtering best with