Having trouble with a slider script that's possibly related to caching? I'm not sure.

Dustin Falgout

I'm using a slider script to display child categories. It doesn't work when the page initially loads but works fine after refreshing the page. There are no errors in the browser console or nodebb logs. Any ideas what's causing this behavior?

To see the issue:

http://antergos.org/forum
Click the "Applications & Desktop Environments" Category.
The child categories should be shown in a carousel slider but they won't be.
Refresh the page and it works fine.

PitaJ

@Dustin-Falgout so it works on page load but not with ajaxify? Hmmmm...

psychobunny

How are you displaying the carousel, is the data within a template or is it built via client-side JS? I unfortunately can't help much unless I see the code, is this a publicly available plugin?

Dustin Falgout

Thanks for the response First, you should know that I've never worked with nodejs coding before I decided to switch our forum to NodeBB about a month ago (my experience is in PHP and Python mostly). The problem is very likely something I did incorrectly.

So the plugin I am using is called Slick. You can find it here: http://kenwheeler.github.io/slick/

I tried a few methods to add it to my fork of lavender. I got it to the state it is in now using a tip @psychobunny gave on a topic I found in this forum. I can't recall which topic. It was made clear that the method was not the "proper" way to do it, but I had couldn't get it to work using the proper method so I tried the shortcut. Anyway, here's what I did.

I edited the slick script as follows:

Changed this....

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {
...

To this:

(function(factory) {
    
    /*if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }*/
    window['Slick'] = factory(window['jQuery']);

}(function($) {
...

Next, I added the script filepath to plugin.json. Then I added this to lavendar.js:

(function () {
		$(document).ready(function () {
				if ($('.category-page').length) {

					$('.subcategories').slick({
...

Thanks in advance for your help. I do appreciate it

Cheers!

psychobunny

The code above should work on both cold load or ajaxify. Is there something else you're doing? I would just add a console.log somewhere before you call slick() just to make sure that the code is actually being run, and then go from there

Dustin Falgout

No, well not that I know of. All the other changes I made are CSS. I'll try adding the console.log message to determine if its something in the script that is failing or if its not being fired when ajaxify loading is used.

Aza Noriega

@Dustin-Falgout
It's because

$(document).on('ready', ... );

is executed once. ONCE only. When a page is fully loaded first time. (actually not "entire page" but DOM, but doesn't matter)

In your case you'll have to listen two events

$(window).on('action:ajaxify.end', ... );

as well as

$(document).on('ready', ... );

and execute the same code on both of them.

BTW

Dustin Falgout

I was able to find a resolve the issue. I changed the slider related code in lavender.js to this:

	(function () {
		function doSlick() {
				if ($('.subcategories').length && !$('.slick-initialized').length) {

					$('.subcategories').slick({
						dots: true,
						infinite: true,
						speed: 300,
						slidesToShow: 4,
						slidesToScroll: 4
					});
				}
		}
		$(document).ready(function () {
			doSlick();
		});
		$(window).on('action:ajaxify.end', function (ev, data) {
			doSlick();
		});

	}());

Thanks @psychobunny for your suggestion about the console log. That steered me in the right direction

Dustin Falgout

@Mega Thanks for taking the time to look at it and offer advice. You were spot on with your answer!

PitaJ

@psychobunny ajaxify.load fires on document load, too. So he only needs to bind to that I think.