AJAX loading killing Slick JS slider

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.

Anonymous

#169935

I just pushed this live so you can see on the same link that I sent before. You might need to do a hard refresh to see the changes.

The ajax complete should fire as Aldgate is selected in the dropdown as reloads as far as I know, but I can’t see anything to that end

[Author]

Posts