jQuery UI Widgets Forums Navigation Tree Events not working as expected

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 9 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Events not working as expected #63235

    mshaw
    Participant

    I am new’ish to jqxTree. In my example, I expect that when I click the checkbox I will see an alert (see the code), also when I uncheck the checkbox. But I don’t get the alerts. Am I doing something wrong? If I run firebug it says too much recursion (but it still won’t work if disabled), in IE, I get a stack overflow. I am running jQWidgets v3.5.0 (2014-Sep-15)

    <html>
    <head><title>Test events</title>
    <!– JS for Checkbox Tree –>
    <script type=”text/javascript” src=”Scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownbutton.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”/jscommoncode/jquery-ui-1.9.2.custom.min.js”></script>

    <!– CSS for Checkbox Tree –>
    <link href=”jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” rel=”stylesheet” media=”screen” />
    <script language=”javascript” type=”text/javascript”>
    $(document).ready(function () {

    $(“#dropDownLoanType”).jqxDropDownButton({ width: 180, height: 25 });
    $(“#dropDownLoanType”).jqxDropDownButton(‘setContent’, ‘<div id=”divContentLoanType” style=”position: realtive; padding-left:5px; margin-top: 2px;”>By Loan Type</div>’);
    $(‘#jqxLoanType’).jqxTree({ height: ‘200px’, width: ‘220px’, hasThreeStates: true, checkboxes: true });
    $(‘#jqxLoanType’).bind(‘checkChange’, function (event) {//have also tried .on
    var args = event.args;
    var item = $(‘#jqxLoanType’).jqxTree(‘getItem’, args.element);
    $(‘#jqxLoanType’).jqxTree(‘checkItem’, args.element, true);
    alert(“item ” + item.label + ” isChecked ” + args.checked);
    });
    $(‘#jqxLoanType’).bind(‘select’, function (event) {//have also tried .on
    var args = event.args;
    var item = $(‘#jqxLoanType’).jqxTree(‘getItem’, args.element);
    $(‘#jqxLoanType’).jqxTree(‘checkItem’, args.element, true);
    alert(“select item ” + item.label );
    });
    });

    </script>

    </head>
    <body>
    <fieldset>
    <legend>Group Data</legend>

    <div id=”dropDownLoanType”>
    <div id=’jqxLoanType’>

    • Consumer Loans

    </div>
    </div>
    </fieldset>

    </body>
    </html>

    Events not working as expected #63240

    Peter Stoev
    Keymaster

    Hi mshaw,

    I don’t suggest you to check an item whithin a “checkChange” event handler because that will lead to recursion – you will check an item with code and the event will be raised again.

    Here’s a link to a working sample which illustrates how to handle this event: http://jsfiddle.net/g2syu09x/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.