Search jQuery

jQuery Forum

jQuery Mobile

MichaelO

Calling the destroy method does nothing for slider and control group

in jQuery Mobile • 5 years ago

I'm following the example with the dynamically injected slider control posted here and I have the HTML code below.

Now when I run

$("#dynamic-slider-input).slider("destroy")

I expect the control to be destroyed, but it's still there. The same happens for the control group control, but not for the flipswitch control. Am I doing something wrong?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script>
$( document ).on( "pagecreate", function() {
$( "<input type='number' id='dynamic-slider-input' data-type='range' min='0' max='100' step='1' value='17'>" )
.appendTo( "#dynamic-slider-form" )
.slider()
.textinput()
});
</script>
</head>
<body>
<form id="dynamic-slider-form">
</form>
</body>
</html>

Thanks!

Replies(5)

Omar

Re: Calling the destroy method does nothing for slider and control group

5 years ago

No, you aren't doing anything wrong. As far as I remember, slider widget destroy method isn't added to the widget. You can create your own method and add it to the widget using $.widget().

Try calling .destroy() instead of .widget("destroy"), it might work.

https://github.com/jquery/jquery-mobile/blob/master/js/widgets/forms/slider.js

watusiware

Re: Calling the destroy method does nothing for slider and control group

5 years ago

Make sure you have only one #dynamic_slider_input . Note that in jQuery Mobile, you need to insure you do not duplicate an ID anywhere in your entire site/project.

What do you expect from "destroy"? It does not remove your dynamically-added element. It only removes any enhancement made by the widget. If you want to remove the <input>, you need to do it yourself.

watusiware

Re: Calling the destroy method does nothing for slider and control group

5 years ago

Despite the demo, I wouldn't do it that way. If you inject it on pagebeforecreate instead of pagecreate , then it will get enhanced along with the rest of the widgets on the page, and you don't need to initialize the slider yourself.

It's a poor example to begin with. If you are going to do this when the page is created, why not just include in in the HTML to start with?

Omar

Re: Calling the destroy method does nothing for slider and control group

5 years ago

destroy works for controlgroup widget.

http://jsfiddle.net/Palestinian/y6a184wo/

As for the slider, you can add your custom methods

$.widget("mobile.slider", $.mobile.slider, $.extend({
destroy: function (value) {
this.element.unwrap();
this.element.removeClass(
[
"ui-slider-input",
"ui-shadow-inset", (this.options.corners ? "ui-corner-all" : null), (this.options.mini ? "ui-mini" : null), ("ui-body-" + this.options.theme || "inherit")].join(' '));
this.element.removeAttr("data-type");
this.element.next().remove();
}
}));

http://jsfiddle.net/Palestinian/t88eq7b8/

watusiware

Re: Calling the destroy method does nothing for slider and control group

5 years ago

Slider is a bit of an oddball, because it actually instantiates TWO widgets (slider and textinput ) on the same element. I don't think there is any other precedent for that in jQuery Mobile?

In fact, I've taken note in the past that the design of jQuery Mobile precludes (normally) instantiating two widgets on the same element. Well, at least auto-initializing them. An element can only have one data-role.

I thought about this when redesigning my own widget (for iScroll). I wondered if I should be able to instantiate a scroller widget on an element that is also, say, a listview. (In the old/current version, you can - but it is because I do not use data-role to initialize the widget - it uses data-iscroll). It could be possible, but can't be achieved using the standard jQuery Mobile data-role syntax.

Anyway, I think this might be considered a bug. It seems to me that tearing-down the slider was inadvertently omitted.

Top Reply

Response title

Attachments

jQuery Forum

Calling the destroy method does nothing for slider and control group

Replies(5)

Re: Calling the destroy method does nothing for slider and control group

Re: Calling the destroy method does nothing for slider and control group

Re: Calling the destroy method does nothing for slider and control group

Re: Calling the destroy method does nothing for slider and control group

Re: Calling the destroy method does nothing for slider and control group

Statistics

Tags

Actions