jQuery UI Widgets Forums General Discussions How to "destroy" a widget

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  sdalby 11 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • How to "destroy" a widget #6831



    I have a jqxTree that represents various types of elements.

    When one is selected, I wish to display one widget, if another is selected I wish to show another widget at the same position etc.

    If we assume that the changing control is showed in the same div, how can I get rid of the old widget before creating the new one?



    How to "destroy" a widget #6875


    Hello Søren,

    Here is an example which changes the widget when buttons are clicked. However, it has two different div elemets to create the two widgets. You should not have different widgets created from the same div element.

    <!DOCTYPE html>
    <html lang="en">
    <title id='Description'>jQuery CheckBox Sample</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#check").click(function () {
    $("#jqxradiobutton").remove(); // removes the other widget
    var found1 = $("body").find("#jqxcheckbox");
    if (found1.length == 0) { // checks if the widget has been removed
    $("#check").before('<div id="jqxcheckbox"></div>'); // if the widget has been removed, its div is inserted in the body again
    $("#jqxcheckbox").jqxCheckBox({ width: 120, height: 25 }); // creates the widget
    $("#radio").click(function () {
    var found2 = $("body").find("#jqxradiobutton");
    if (found2.length == 0) {
    $("#check").before('<div id="jqxradiobutton"></div>');
    $("#jqxradiobutton").jqxRadioButton({ width: 120, height: 25 });
    <body class='default'>
    <div id="jqxcheckbox"></div>
    <div id="jqxradiobutton"></div>
    <button id="check">Checkbox</button>
    <button id="radio">Radio button</button>

    Best Regards,

    jqWidgets team

    How to "destroy" a widget #7019


    Thank you so much

    How to "destroy" a widget #7192


    Hi Dimitar

    Is this a valid approach given that I have many widgets I wish to view based on the selection on a treeview:

            function makeDivActive(divName) {
    contentCell.txt = "<div id=\"" + divName + "\"/>";

    And then assign the new active control to tag identified by ´divname´.

    Thanks in advance

    • This reply was modified 11 years ago by  sdalby.
    • This reply was modified 11 years ago by  sdalby.
    • This reply was modified 11 years ago by  sdalby.
    • This reply was modified 9 years, 10 months ago by  sdalby.
    How to "destroy" a widget #7200


    Please disregard this question, I have posted a new one regarding loading contents dynamically.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.