XF 2.1 JS or Cache Issue

[Ozzy47]

So I have a addon that adds some JS to the message_macros template. This creates a slider of images that are loaded as thumbnails. It works as expected.


Now the issue I am facing is if you edit that post, no matter what you change in it, or changing nothing, once you save, the slider images are missing.


Once you do a page refresh, the slider works again. Here is the code I add to the message_macro template:

<xf:css src="lightslider.less" />
<xf:js src="vendor/lightslider/lightslider.js" min="1" />
<xf:js src="OzzModz/AttachEnhancment/slider/slider.js" />
<ul class="attachmentList" data-xf-init="item-slider" data-xf-item-slider='{"auto":{$xf.options.ozzmodz_attachenhancment_slider_auto},"loop":{{$xf.options.ozzmodz_attachenhancment_slider_loop?"true":"false"}},"pager":{$xf.options.ozzmodz_attachenhancment_slider_page},"item":{$xf.options.ozzmodz_attachenhancment_slider_item}}'>

What can I do to make the slider work after editing the post?

 

[Ozzy47]

Anyone have any ideas/suggestions?

 

[Lukas W.]

My guess would be that the slider calculates its dimensions based on the parent container. During initialization of the slider, the post will be hidden (as it'll expand in an animation afterwards), so the calculation may come up with a height of 0. Without seeing the DOM, I can't make any definitive statement though.

 

[Ozzy47]

My guess would be that the slider calculates its dimensions based on the parent container. During initialization of the slider, the post will be hidden (as it'll expand in an animation afterwards), so the calculation may come up with a height of 0. Without seeing the DOM, I can't make any definitive statement though.

Could I send the addon to you in a PC so you can have a look in your spare time?

 

[Lukas W.]

Yup, shoot it over.

 

[Ozzy47]

Yup, shoot it over.

Okay, I’ll send it when I get home.

 

[Ozzy47]

Yup, shoot it over.

I sent this Saturday but forgot to mention that I did.

 

[tonmo]

Hmm, I am seeing a lot of the following error in my server error logs (nginx with pagespeed enabled):

... /img/controls.png" failed (2: No such file or directory) ...

I searched admincp templates for that file, and came up with lightslider.css.

Related? Are you getting any such entries in your server log?

 

[briansol]

Adding js back in to the dom dynamically doesn't re-initialize it. You need to force the re-init of that code, or store the js in a file elsewhere that doesn't' get dom-manipulated or bind it to a child of body instead of a dom-added div.

see: https://stackoverflow.com/questions/13184326/javascript-doesnt-work-when-loading-a-page-via-ajax

 

[Anomandaris]

Hmm, I am seeing a lot of the following error in my server error logs (nginx with pagespeed enabled):

... /img/controls.png" failed (2: No such file or directory) ...

I searched admincp templates for that file, and came up with lightslider.css.

Related? Are you getting any such entries in your server log?

same

lightslider.less:

background-image: url('../img/controls.png');

but this file and folder do not exist, I downloaded fresh copy of Xenforo and the file doesn't exist

any ideas?