AJAX Pagination Blocking Other JS?

Anonymous

#20196

Hi there,

I’m using JS to set a cookie to switch between grid and list views on http://development-client-server.com/elk/cabins/ (see text links on top of the listings – not styled yet). They work great and will force reload the page to the new view. However, after I select a filter item, or use the pagination (using the AJAX option), my view switcher no longer works, and seems to jump to the top. Any suggestions on how to prevent this?

Here’s the JS for the view switcher (using JS Cookies plugin)

// View Switcher Cookies

$('#list-view').click(function(e) {
   e.preventDefault();
   Cookies.set('listingType', 'list', { expires: 7 });
   window.location.reload(); 
});

$('#grid-view').click(function(e) {
   e.preventDefault();
   Cookies.set('listingType', 'grid', { expires: 7 }); 
   window.location.reload();
});

and then using a simple if/else to switch the style of posts inside the loop:

<?php if(isset($_COOKIE['listingType']) && $_COOKIE['listingType'] == 'list') { ?>

Ross Moderator

#20198

Hi Amber

What is happening is your JS is being applied to your view switcher, but then a search or pagination interaction will load in new results, and a new copy of your view switcher.

This newly loaded view switcher doesn’t have any JS assosciated with it so you must reinitialise your view switcher once the results have been loaded in via Ajax.

To do this there is a jQuery event to hook into – check the first question on the FAQs – http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

Thanks

Anonymous

#20199

Thanks, I ended up fixing it by binding it differently with:

$(‘.cabin-listings-container’).on(‘click’, ‘#grid-view’, function(e)

Ross Moderator

#20226

Ah yes that is another good approach 🙂

[Author]

Posts