Forums › Forums › Search & Filter Pro › AJAX event hook not working
Tagged: ajax, event, hook, javascript, layout
- This topic has 10 replies, 3 voices, and was last updated 10 years ago by
Ross.
-
Ross Moderator(Private) September 29, 2014 at 10:47 pm #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
RossRoss Moderator(Private) September 29, 2014 at 11:03 pm #5243PS can you send a link to look at if there isn’t a JS error?
Anonymous(Private) September 30, 2014 at 12:14 am #5272I’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(Private) September 30, 2014 at 12:37 am #5275Hey 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 afterrowHeight: 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
RossAnonymous(Private) October 1, 2014 at 12:17 am #5359Hi 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(Private) October 19, 2014 at 2:49 pm #6146Hey 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(Private) June 16, 2015 at 10:53 pm #19698interesting 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…
Ross Moderator(Private) June 17, 2015 at 2:22 pm #19733Hey Damien
Thanks for hte info, that looks correct.
I’m curious, do you need the timeout in there, or is that just for effect?
The event
sf:ajaxfinish
should be fired after the html is updated, so you should be able to call isotope without any delay.Thanks
-
AuthorPosts