# Jquery plugin crashing stache updates

**URL:** <https://forums.bitovi.com/t/jquery-plugin-crashing-stache-updates/185>\
**Category:** CanJS\
**Created:** [March 14, 2016, 10:09pm UTC](https://forums.bitovi.com/t/jquery-plugin-crashing-stache-updates/185 "2016-03-14T22:09:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbleier](https://avatars.discourse-cdn.com/v4/letter/d/c89c15/32.png) [@dbleier](https://forums.bitovi.com/u/dbleier)\
**Post date:** [March 14, 2016, 10:09pm UTC](https://forums.bitovi.com/t/jquery-plugin-crashing-stache-updates/185/1 "2016-03-14T22:09:18Z")

</div>

I am using cycle2, a jquery plugin that turns a bunch of divs containing images or video into a rotating slideshow with transitions. The initial load of the stache template loads fine, from a list of slides (can.List). But after the plugin loads it alters the dom and I guess confuses the stache updater so it can’t find the list anymore and does not update. When I remove the plugin, it updates as expected.

sign.stache

```auto
<div id="slideshows">
{{#each ./slideshows}}
	<div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" >
	{{#each slides}}
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition">
		{{#eq type 'video'}}
			<video id="video-{{id}}" {$src}="localUrl(id, url, 'media/s')" type="video/mp4" />
		{{else}}
			<img id="img-{{id}}" {$src}="localUrl(id, url, 'media/s')" />
		{{/eq}}
		</div>
	{{/each}}
	</div>
{{/each}}
</div>

```

rendered HTML without the plugin:

```auto
<div id="slideshows">
	<div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" id="Slide" class="" style="position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px;">
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d8ced86784e8638b4567" data-cycle-timeout="5000" data-cycle-fx="fade">
			<img {$src}="localUrl(id, url, 'media/s')" id="img-56e5d8ced86784e8638b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Sky_1280.jpg">
		</div>
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d801d867844f628b4567" data-cycle-timeout="10026.667" data-cycle-fx="fade">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d801d867844f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test1.mp4"></video>		
		</div>
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d818d867845f628b4567" data-cycle-timeout="10048" data-cycle-fx="fade">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d818d867845f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test2.mp4"></video>		
		</div>
	</div>
</div>

```

with plugin:

```auto
<div id="slideshows">
   <div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" id="Slide" class="cycle-slideshow" style="position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px;">
        <div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" data-cycle-timeout="5000" data-cycle-fx="fade" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel">
		<img {$src}="localUrl(id, url, 'media/s')" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Sky_1280.jpg" style="visibility: hidden;">
	</div>
	<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d8ced86784e8638b4567" data-cycle-timeout="5000" data-cycle-fx="fade" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 0; display: block; visibility: hidden;" class="cycle-slide">
			<img {$src}="localUrl(id, url, 'media/s')" id="img-56e5d8ced86784e8638b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Sky_1280.jpg">
	</div>
        <div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d801d867844f628b4567" data-cycle-timeout="10026.667" data-cycle-fx="fade" style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;" class="cycle-slide cycle-slide-active">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d801d867844f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test1.mp4"></video>		
		</div>
        <div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d818d867845f628b4567" data-cycle-timeout="10048" data-cycle-fx="fade" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;" class="cycle-slide">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d818d867845f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test2.mp4"></video>		
	</div>
   </div>
</div>

```

notice the addition of the additional hidden div with the cycle-sentinel class.

Is there anyway around this? Or will I need to scrap the plugin? If so, how can I create the slideshow effect using stache directives and functions? I could do something like `<img {$id}="currentSlide.id" {$src}="currentSlide.url" />` with timeouts in the viewmodel to update currentSlide, but then I would lose the transition effects.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [March 14, 2016, 10:24pm UTC](https://forums.bitovi.com/t/jquery-plugin-crashing-stache-updates/185/2 "2016-03-14T22:24:50Z")

</div>

I would scrap can.stache / can.Component and use a `can.Control`` that wraps the plugin. That plugin can listen to changes in your`can.List` and update the DOM manually and the tell your plugin to re-evaluate the DOM.

can.stache doens’t like it when the HTML is changed. There’s a way to change it safely, but you’d have to change the plugin code.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [March 14, 2016, 10:25pm UTC](https://forums.bitovi.com/t/jquery-plugin-crashing-stache-updates/185/3 "2016-03-14T22:25:28Z")

</div>

> [@dbleier](#):
>
> th timeouts in the viewmodel to update currentSlide, but then I would lose the transition effects.

There’s the can-animate plugin that is supposed to help stache trigger animations.

---

<div class="post-metadata">

**Author:** ![dbleier](https://avatars.discourse-cdn.com/v4/letter/d/c89c15/32.png) [@dbleier](https://forums.bitovi.com/u/dbleier)\
**Post date:** [March 15, 2016, 12:25pm UTC](https://forums.bitovi.com/t/jquery-plugin-crashing-stache-updates/185/4 "2016-03-15T12:25:05Z")

</div>

> [@justinbmeyer](#):
>
> I would scrap can.stache / can.Component and use a can.Controlthat wraps the plugin. That plugin can listen to changes in yourcan.List` and update the DOM manually and the tell your plugin to re-evaluate the DOM.

thanks @justinbmeyer, could you explain this a bit more? Scrap stache for the whole Sign component or just the slideshow part? How would I embed that in the larger stache template (either sign.stache or index.stache) or are you saying make the updates directly in the index.html?

I guess related to that, I have a logging module, that currently uses stache and a List. But I was thinking that maybe that is unnecessary since I don’t really need binding. I just need to log the messages to a div and forget about them. So perhaps I also should just directly append to a div with jQuery instead of using the vdom with stache updates?