How to "destroy" a widget - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: destroy, remove, Widget

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

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

Author

How to "destroy" a widget Posts

August 17, 2012 at 12:20 pm How to "destroy" a widget #6831

August 20, 2012 at 6:34 am How to "destroy" a widget #6875

Dimitar

Participant

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">
<head>
    <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 () {
                $("#jqxcheckbox").remove();
                var found2 = $("body").find("#jqxradiobutton");
                if (found2.length == 0) {
                    $("#check").before('<div id="jqxradiobutton"></div>');
                };
                $("#jqxradiobutton").jqxRadioButton({ width: 120, height: 25 });
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxcheckbox"></div>
    <div id="jqxradiobutton"></div>
    <button id="check">Checkbox</button>
    <button id="radio">Radio button</button>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 22, 2012 at 2:16 pm How to "destroy" a widget #7019

sdalby

Member

Thank you so much

August 28, 2012 at 9:57 am How to "destroy" a widget #7192

sdalby

Member

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.empty();
            contentCell.txt = "<div id=\"" + divName + "\"/>";
        }

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

Thanks in advance

August 28, 2012 at 12:34 pm How to "destroy" a widget #7200

sdalby

Member

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

Author

Posts

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

You must be logged in to reply to this topic.