search

seiyria / bootstrap-slider

A slider control for Bootstrap 3 & 4.
http://seiyria.github.io/bootstrap-slider/
Other
3k stars 1.14k forks source link

Component is losing mouse events after replace content with AJAX #923

Open gilsondelrei opened 5 years ago

gilsondelrei commented 5 years ago

Hi all. I'm experiencing a problem with losing events when replacing content from ajax. Well, it isn't an ajax problem, but i have some dynamic contents and need replace the html slider tag when i update the container DIV with other informations.

It's my process: 1 - First i get the original content of container including the bootstrap-slider component generated tags. The content is like sample below. Its my _container_recoveredcontent

<div` class="slider slider-horizontal" style="width: 220px;">
    <div class="slider-track">
    <div class="slider-selection" style="left: 0%; width: 44.4444%;"></div>
    <div class="slider-handle round" style="left: 44.4444%;"></div>
    <div class="slider-handle round hide" style="left: 0%;"></div>
</div>
<div class="tooltip top" style="top: -40px; left: 50.7778px;">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">Current value: 5</div></div>
    <input type="text" id="sl1" class="col-md-12" value="1" data-slider-min="1" data-="" slider-max="20" data-slider-value="5" style="">
</div>

2 - After i call a ajax process and replace all components on my DIV container (not in example) with new content. 3 - User click on back button and the original content (item 1) is recovered and replaced in place.

$("#container').html(_container_recoveredcontent).

at now the slider component is rendered, but component slider is freezed. In other words, it doesn't response for any mouse events.

I have observed on Chrome that after replaced the content the mouse events initially binded was unbinded on component.

Tests: I have generated a Fiddle (http://jsfiddle.net/gildlrei/yxj9m4p8/84/) and some details to execute the fiddle. It's not ajax example, but enough to evidence the problem.

On my sample test there are three buttons that you can try in sequence as below.

1 - First click on [generate content] button. It will got the original slider html generated and display it on the bottom. Additionally it will replace the container DIV with the text "nothing here" erasing the slider component.

2 - Click on [replace content] button. It will return the original content and re-rendering the slider component. At this point you can see that slider is freezed.

3 - Click on [start new instance of Slider] button. It will call the Slider() function on my selector slider $('#sl1') trying to reinitialize it. At this point you can see two components, the last one is working.

One last note about this Trying to delegate the events to document DOM like below seems not work. It has work with other native events but not with slider.

> $(document).on('slide slideStop','#slide_distance', function (e) {
...
});

Try reinitialize the component Slider using the Slider() function has generated a new instance (duplicate) component on DIV.

$(#sl1).Slider({...})

Thanks any suggestions

seiyria commented 5 years ago

Have you tried to call destroy on the slider before re-initializing it?

Kyle Kemp / Web Developer

920-215-1371/ kyle@seiyria.com

http://seiyria.com

On Wed, May 29, 2019 at 5:14 PM Gilson DElrei notifications@github.com wrote:

Hi all. I'm experiencing a problem with losing events when replacing content from ajax. Well, it isn't an ajax problem, but i have some dynamic contents and need replace the html slider tag when i update the container DIV with other informations.

It's my process: 1 - First i get the original content of container including the bootstrap-slider component generated tags. The content is like sample below. Its my container_recovered_content

<div` class="slider slider-horizontal" style="width: 220px;">

Current value: 5

2 - After i call a ajax process and replace all components on my DIV container (not in example) with new content. 3 - User click on back button and the original content (item 1) is recovered and replaced in place.

$("#container').html(container_recovered_content).

at now the slider component is rendered, but component slider is freezed. In other words, it doesn't response for any mouse events.

I have observed on Chrome that after replaced the content the mouse events initially binded was unbinded on component.

Tests: I have generated a Fiddle (http://jsfiddle.net/gildlrei/yxj9m4p8/84/) and some details to execute the fiddle. It's not ajax example, but enough to evidence the problem.

On my sample test there are three buttons that you can try in sequence as below.

1 - First click on [generate content] button. It will got the original slider html generated and display it on the bottom. Additionally it will replace the container DIV with the text "nothing here" erasing the slider component.

2 - Click on [replace content] button. It will return the original content and re-rendering the slider component. At this point you can see that slider is freezed.

3 - Click on [start new instance of Slider] button. It will call the Slider() function on my selector slider $('#sl1') trying to reinitialize it. At this point you can see two components, the last one is working.

One last note about this Trying to delegate the events to document DOM like below seems not work. It has work with other native events but not with slider.

$(document).on('slide slideStop','#slide_distance', function (e) { ... });

Try reinitialize the component Slider using the Slider() function has generated a new instance (duplicate) component on DIV.

$(#sl1).Slider({...})

Thanks any suggestions

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/923?email_source=notifications&email_token=AAF2NWIYVLPT4WKYGO3A3GDPX356FA5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GWTEDDQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AAF2NWIYDW6J6RUK4CFA3I3PX356FANCNFSM4HQWT2BA .

gilsondelrei commented 5 years ago

Hi Kyle, yes, i have tested but it isn't working and follow duplicating the slider on div. The ideal behaviour will be recover the slider component that was recovered, but its freezed.

$('#newSlider').on('click',function(e){ $('#sl1').slider('destroy'); <-------- $('#sl1').slider({ formater: function(value) { return 'Current value: '+value; } }) }); look it [image: image.png]

Em qua, 29 de mai de 2019 às 19:17, Kyle J. Kemp notifications@github.com escreveu:

Have you tried to call destroy on the slider before re-initializing it?

Kyle Kemp / Web Developer

920-215-1371/ kyle@seiyria.com

http://seiyria.com

On Wed, May 29, 2019 at 5:14 PM Gilson DElrei notifications@github.com wrote:

Hi all. I'm experiencing a problem with losing events when replacing content from ajax. Well, it isn't an ajax problem, but i have some dynamic contents and need replace the html slider tag when i update the container DIV with other informations.

It's my process: 1 - First i get the original content of container including the bootstrap-slider component generated tags. The content is like sample below. Its my container_recovered_content

<div` class="slider slider-horizontal" style="width: 220px;">

Current value: 5

2 - After i call a ajax process and replace all components on my DIV container (not in example) with new content. 3 - User click on back button and the original content (item 1) is recovered and replaced in place.

$("#container').html(container_recovered_content).

at now the slider component is rendered, but component slider is freezed. In other words, it doesn't response for any mouse events.

I have observed on Chrome that after replaced the content the mouse events initially binded was unbinded on component.

Tests: I have generated a Fiddle (http://jsfiddle.net/gildlrei/yxj9m4p8/84/) and some details to execute the fiddle. It's not ajax example, but enough to evidence the problem.

On my sample test there are three buttons that you can try in sequence as below.

1 - First click on [generate content] button. It will got the original slider html generated and display it on the bottom. Additionally it will replace the container DIV with the text "nothing here" erasing the slider component.

2 - Click on [replace content] button. It will return the original content and re-rendering the slider component. At this point you can see that slider is freezed.

3 - Click on [start new instance of Slider] button. It will call the Slider() function on my selector slider $('#sl1') trying to reinitialize it. At this point you can see two components, the last one is working.

One last note about this Trying to delegate the events to document DOM like below seems not work. It has work with other native events but not with slider.

$(document).on('slide slideStop','#slide_distance', function (e) { ... });

Try reinitialize the component Slider using the Slider() function has generated a new instance (duplicate) component on DIV.

$(#sl1).Slider({...})

Thanks any suggestions

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub < https://github.com/seiyria/bootstrap-slider/issues/923?email_source=notifications&email_token=AAF2NWIYVLPT4WKYGO3A3GDPX356FA5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GWTEDDQ , or mute the thread < https://github.com/notifications/unsubscribe-auth/AAF2NWIYDW6J6RUK4CFA3I3PX356FANCNFSM4HQWT2BA

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/923?email_source=notifications&email_token=AB2FRKRLBV4ELKHCPRXKYMLPX36H7A5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWQZMYA#issuecomment-497129056, or mute the thread https://github.com/notifications/unsubscribe-auth/AB2FRKUK4QEF5UQ2OKJCMSTPX36H7ANCNFSM4HQWT2BA .