Ajax and Masonry

The best way is using the default result template, so that the js will be binded on page load.

However if you insisted on using Ajax result, then easiest way is to edit the js file. Though it is not a best way, but it is the easiest way to do this.

The file is ultimate-wp-query-search-filter/trunk/classes/scripts/uwpqsfscript.js, look for the window.process_data and window.upagi_ajax ajax function. On the success method, you can initialized the necessary js in it.

The hardest way is removed the binding selector in the search form and the result.
The selector for search button is ‘.usearchbtn’, you can override it with your own class by uwpsqf_form_btn filter. And create your own ajax js, and binding the class to it, refer the ultimate-wp-query-search-filter/trunk/classes/scripts/uwpqsfscript.js window.process_data to handler the js.

Hi, thank you for the answer, so clear. I thought working with thew button only will cover half the work because the option to ajax when any of the filters is changed(without button) is not covered, so this is what i have done in case anyone needs it is the following.

In document ready:

// Wp Ultimate Search Filter Plugin
            if($('.uwpqsf_submit').length > 0){

                $('#uwpqsf_id').on('click','.uwpqsf_submit',mimo_after_search_ajax );
            
            } else {
                $('#uwpqsf_id  form').find('input, textarea, button, select').change(mimo_after_search_ajax);

            }
            $('.uwpqsfpagi').on('click','a',mimo_after_search_ajax );

So here i observ if any of the filters is changed(as in your code) and if the button is clicked. then i fire the function mimo_after_search_ajax where i hide my masonry layout and bind another function to the ajax success:

function mimo_after_search_ajax(){
            $('.mimo-masonry').css({'visibility': 'hidden'}).before('<i class="mimo-loader fa fa-circle-o-notch fa-spin fa-fw" aria-hidden="true"></i>');
            $('body').on('ajaxSuccess', mimo_update_ajax);
        }

And finally the last function mimo_update_ajax, i need to wait a bit to the ajax success and the fire the re-layout with the setTimeout function:

// Wp Ultimate Search Filter Plugin
        function mimo_update_ajax(){
            setTimeout(function(){ 

                         $('.mimo-loader').remove();
                         $('.mimo-masonry').imagesLoaded(function() {
                           $('.mimo-masonry').masonry({
                            itemSelector: '.card'
                           }).masonry('destroy').masonry({
                            itemSelector: '.card'
                           }).masonry('layout').css({'visibility': 'visible'});

                        });;
                         $('.mimo-page-nav .container').empty();
                    $('.uwpqsfpagi').appendTo('.mimo-page-nav .container');
                     }, 2000);
        }

What is included in the functions is not important, this mode can be used to do whatever you need to do after the ajax success.

what do you think?

In my opinion, it would be better to include in the plugin a jquery callback after ajax success and layout, so in case user needs to do something or fire any function, don’t you think?

Best Regards and thank you for the support.