AJAX loading killing Slick JS slider

Anonymous

#169695

Hi guys

I have got the plugin all set up and working on my dev site. As well documented in the FAQ, the AJAX elements can kill JS that needs to be reloaded, in this case Slick.js slider.

I understand the concept of re-initialising the scripts in order to get them to work, but I have a few questions.

1. The slider I use has two js files, the slick.js which contains the all the code, and slick_init.js which initialises that particular instance of the slider. Am I right in thinking that I only need to reload the _init file and not the main .js file?

Here is my code that I would deem to be correct, however the slider doesn’t seem to be intialising

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
    console.log("ajax start");
  });
  
  //detects when the ajax request has finished and the content has been updated
  // - add scripts that apply to your results here
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      console.log("ajax complete");

      jQuery(function($){
        $('.slick-slider').slick({
            autoplay: false,
            fade: false,
            speed: 1000,
            autoplaySpeed: 6000,
            prevArrow: '<p class="one-half first left-arrow">←</p>',
            nextArrow: '<p class="one-half right-arrow">→</p>'
        });
    });
  });
  
  //an event fired when S&F is initialised and S&F scripts have been loaded
  $(document).on("sf:init", ".searchandfilter", function(){
      console.log("S&F JS initialised");
  });
  
  //depending on where you add your JS, sometimes its necessary to wrap the above events in a function (as is standard practice):
  (function ( $ ) {
      "use strict";
      
      $(document).on("sf:init", ".searchandfilter", function(){
          console.log("S&F JS initialised");
      });
  }(jQuery));

Does this look right? I can’t work out what else would be wrong.

Trevor

#169698

Your code might need to look like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");

    $('.slick-slider').slick({
        autoplay: false,
        fade: false,
        speed: 1000,
        autoplaySpeed: 6000,
        prevArrow: '<p class="one-half first left-arrow">←</p>',
        nextArrow: '<p class="one-half right-arrow">→</p>'
    });

  });
}(jQuery));</script>

I think.

Anonymous

#169700

Hi Trevor

This doesn’t work unfortunately. I know this is an external script so it’s not your job to fix it!

Just to check there’s not anything else I’m missing, where is this script supposed to go? In my scripts.js or in my custom search ‘results.php’?

Trevor

#169702

It has to be loaded somewhere on the page OR in an external file, so either would do. Are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#169704

This reply has been marked as private.

Trevor

#169858

It is a question of figuring out how to re-initialise the slick script. Stackexchange may be the best source of help/snippets. For example, see this:

https://stackoverflow.com/questions/27795730/reinitialize-slick-js-after-successful-ajax-call

Anonymous

#169903

Hi Trevor

I looked at this yesterday and thought this would be my fix. I understand the process with re-initialising Slick, my problem with this code is how the ajax call code fits in to your code that you supply on the FAQ page e.g.

this:

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function() {
        slickCarousel();
      }
   });

and this:

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
});

Trevor

#169909

I showed in my earlier post (#169698) how it can be integrated. I myself have used this structure of code many times, so I know it works in theory (but I have not done it with slick). Whatever code you need to be run after ajax is triggered, needs to be in the place where I used it.

Anonymous

#169924

Hi Trevor.

I more meant in the context of the ajax function which wasn’t explained. However I can’t even seem to get any evidence of the ajax refresh triggering. I have put a breakpoint in the code and it doesn’t get triggered when the dropdown is used and ajax is used to refresh the results.

I have done a test with the below alert and I can’t get this to work either. This is all on my local server, let me know if you want me to put this live for you to have a look at.

(function ( $ ) {
    "use strict";
    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
      console.log("ajax complete");
  
      window.alert("sometext");
  
    });
  }(jQuery));

Trevor

#169931

This reply has been marked as private.

[Author]

Posts