AJAX event hook not working

Anonymous

#5105

I’m trying to use a layout script (Isotope) to display my results. When I add the code to the bottom of the results.php, it displays fine on the first page load but upon filtering the results, returns to normal styling. However, when I place my script inside the function from the FAQ, the javascript layout does not show on the initial page load nor after filtering and nothing is logged to the console either.

$(".searchandfilter").on("sf:ajaxstart",function(){
console.log("ajax start");
});

$(".searchandfilter").on("sf:ajaxfinish",function(){
console.log("ajax complete");

var $container = $('#sf-results-294');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'cellsByRow',
    cellsByRow: {
  columnWidth: 190,
  rowHeight: 230
},
});

});

Any guidance?
Thanks

Anonymous

#5204

Also, I’m displaying the results via shortcode if that makes any difference.

Ross Moderator

#5242

Hey Ryan

Is that the complete code for your page – it looks there is a js error? An extra }); – what you’re doing looks completely right to me :/

Thanks
Ross

Ross Moderator

#5243

PS can you send a link to look at if there isn’t a JS error?

Anonymous

#5272

I’m fairly new to Javascript but I don’t believe the final }); is unnecessary as it corresponds with the ajaxfinish function and the code before that matches the isotope function.

I’m running it locally at the moment but I will reactivate my license on the live site and get back to you.

Do you have any recommendations on where to place the script? The only time the js layout worked with the plugin was when I placed it at the bottom of the results.php file, without the hook involved. This worked for the initial page load but not with subsequent filtering.

$(".searchandfilter") Can you explain this part of the code, is it a class selector?

Thanks again.

Ross Moderator

#5275

Hey Ryan

Yeah this is a class selector – so it targets the search form on the page, and listens for an event on it – the Ajax events 🙂

The best place to add your code is in a JS file, normally in your theme – different themes use different ones but you should be able to guess which is your main JS file and add it in there – if you send me a link I can probably find out which file exactly?

And you’re right I misread your code it looks ok – there is a trailing , which needs to be removed otherwise it will break in IE8 (after the closing curly bracket after rowHeight: 230) – edited and removed below – but not really essential to the problem we are trying to resolve.

var $container = $('#sf-results-294');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'cellsByRow',
    cellsByRow: {
  columnWidth: 190,
  rowHeight: 230
}
});

});

Thanks
Ross

Anonymous

#5359

Hi Ross,
Can you take a look at this when you get a minute? I’ve placed the code in an external js file now and link to it in the results.php file. I’ve created the theme from scratch so I don’t have a main js file. Till now I’ve included links to theany necessary libraries in the header, and kept more specific code inline in the documents.

Ross Moderator

#5439

Hey Ryan will look at this today.

Thanks

Ross Moderator

#6146

Hey Ryan, been going through old unresolved tickets and spotted this – apologies for not getting back – did you manage to get your problem sorted?

Thanks

Anonymous

#19698

interesting question
after looking to ryan’s code, i managed to do this with this function

        $(".searchandfilter").on("sf:ajaxfinish",function(){
          var area = jQuery('.isotope-area');
          setTimeout(function() {
            area.isotope({
              itemSelector: '.column',
              masonry: {
                columnWidth: 1
              }
            });
          }, 150);
        });

If this can help somebody else…

[Author]

Posts