Component is losing mouse events after replace content with AJAX #923
Comments
|
Have you tried to call destroy on the slider before re-initializing it?
Kyle Kemp / Web Developer
920-215-1371/ [email protected]
http://seiyria.com
…On Wed, May 29, 2019 at 5:14 PM Gilson DElrei ***@***.***> 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;">
<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_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
<#923?email_source=notifications&email_token=AAF2NWIYVLPT4WKYGO3A3GDPX356FA5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4GWTEDDQ>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAF2NWIYDW6J6RUK4CFA3I3PX356FANCNFSM4HQWT2BA>
.
|
|
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 <[email protected]>
escreveu:
… Have you tried to call destroy on the slider before re-initializing it?
Kyle Kemp / Web Developer
920-215-1371/ ***@***.***
http://seiyria.com
On Wed, May 29, 2019 at 5:14 PM Gilson DElrei ***@***.***>
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;">
> <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_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
> <
#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
<#923?email_source=notifications&email_token=AB2FRKRLBV4ELKHCPRXKYMLPX36H7A5CNFSM4HQWT2BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWQZMYA#issuecomment-497129056>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AB2FRKUK4QEF5UQ2OKJCMSTPX36H7ANCNFSM4HQWT2BA>
.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
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.
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.
Try reinitialize the component Slider using the Slider() function has generated a new instance (duplicate) component on DIV.
Thanks any suggestions
The text was updated successfully, but these errors were encountered: