JQuery function not running after updating results via AJAX

This thread is resolved. Here is a description of the problem and solution.

Problem:
A JavaScript library is used to add a masonry layout for posts output with a View. After custom search or pagination the masonry effect no longer happens.

Solution:
The masonry code is initially loaded with the DOM ready event. It needs to be reinitialised when the View output has been replaced using ajax (because of a search or pagination).

The precise requirements depend on what library is being used, but the code to initialise the JS library should be structured something like this, which uses custom JS events available with Views. These custom events can be found in the JS editor of the Search and Pagination section of the View using the Frontend events button.

// 1. Define a function that does "the thing"
function theThing() {
    //do the thing
}
 
(function ($) {
 
    // 2. Do the thing on initial pageload (DOM ready)
    $(document).ready(function () {
 
        theThing();
    });
 
    // 3. Do the thing after ajax custom search
    $(document).on('js_event_wpv_parametric_search_results_updated', function (event, data) {
 
        theThing();
    });
})(jQuery);

This support ticket is created 5 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Custom search, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by davidS-53 5 years, 4 months ago.

Assisted by: Nigel.

Author

Posts

August 21, 2019 at 5:30 am #1320755

davidS-53

screencapture-icpkp-223-165-76-42-sth-nz-wp-admin-admin-php-2019-08-21-17_19_02.jpg

I followed https://toolset.com/forums/topic/masonry-layout-broken-after-ajax-reload-parametric-search/ to get my masonry layout updating after

Problem is, when selecting a filter option, clicking the search or reset buttons, toolset doesn't seem to run reinitializeMasonry to get everything back in line.

Any ideas what's going on here - why the reinitializeMasonry function isn't running?

FYI I added that basic button:

<input id="btn" type="button" value="button" />

And clicking this after filtering/searching resorts everything fine.

August 21, 2019 at 7:58 am #1320899

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi David

These two tickets are about the same issue, yes? Let me answer here, and we can close the other if that's the case.

When you initialise a JavaScript library such as a masonry library it manipulates elements in the DOM, and when a View updates (e.g. because of a search filter or pagination) those DOM elements are replaced, so that the JavaScript library needs to do its thing again.

Normally you would run the JavaScript code on page load, which is why updating search results or paginating via a page reload works automatically on subsequent pages.

But with ajax you need a different trigger to re-run the code.

Views adds some custom JS events for just that purpose.

In the custom JS editor block of the Search and Pagination section you will see a "Frontend events" button where you can insert placeholder code for each such event.

In your case you will want the js_event_wpv_parametric_search_results_updated event.

In terms of structuring your code so that you initialise the library on page load and again after an ajax custom search I would do something like this:

// 1. Define a function that does "the thing"
function theThing() {
    //do the thing
}

(function ($) {

    // 2. Do the thing on initial pageload (DOM ready)
    $(document).ready(function () {

        theThing();
    });

    // 3. Do the thing after ajax custom search
    $(document).on('js_event_wpv_parametric_search_results_updated', function (event, data) {

        theThing();
    });
})(jQuery);

Is that clear enough?

August 22, 2019 at 1:26 am #1321729

davidS-53

Cheers- all working now.