jQWidgets Forums

jQuery UI Widgets Forums Lists ComboBox checkChange Hit twice

This topic contains 2 replies, has 2 voices, and was last updated by  nosn 12 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • checkChange Hit twice #17197

    nosn
    Participant

    I have a KO custom bind that wraps the jqxComboBox. I am trying to handle the checkChange even and I am getting the event twice which is causing problems.
    Any advice given the snippet below?

      ko.bindingHandlers.optionsComboBox = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    // Do some control setup here
    var $element = $(element);
    ko.bindingHandlers.jqxComboBox.init.apply(this, arguments);
    ...
    // HANDLE EVENTS
    $element.unbind('checkChange').on('checkChange', function (event) {
    if (event.args) {
    // PROBLEM HERE!
    // Do something Gets hit twice
    }
    });
    ...
    },
    update: function (element,
    valueAccessor,
    allBindingsAccessor,
    viewModel) {
    ko.utils.unwrapObservable(valueAccessor()); //just for subscription
    }

    thanks,
    nosn

    checkChange Hit twice #17209

    Peter Stoev
    Keymaster

    Hi nosn,

    If you bind to the event twice it will be hit twice. In addition, if you use “on”, use “off” for removing an event handler.

    Below is a sample with jqxComboBox. The “checkChange” is catched and when the check state is changed, the event hits just once.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title id='Description'>In this demo is illustrated how to display checkboxes next to the ComboBox items. The combobox's input field in this mode is readonly.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var url = "../sampledata/customers.txt";
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'CompanyName' },
    { name: 'ContactName' }
    ],
    id: 'id',
    url: url,
    async: false
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxComboBox
    $("#jqxWidget").jqxComboBox({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme });
    $("#jqxWidget").jqxComboBox('checkIndex', 0);
    // subscribe to the checkChange event.
    $("#jqxWidget").on('checkChange', function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var valueelement = $("<div></div>");
    valueelement.text("Value: " + item.value);
    var labelelement = $("<div></div>");
    labelelement.text("Label: " + item.label);
    var checkedelement = $("<div></div>");
    checkedelement.text("Checked: " + item.checked);
    $("#selectionlog").children().remove();
    $("#selectionlog").append(labelelement);
    $("#selectionlog").append(valueelement);
    $("#selectionlog").append(checkedelement);
    var items = $("#jqxWidget").jqxComboBox('getCheckedItems');
    var checkedItems = "";
    $.each(items, function (index) {
    checkedItems += this.label + ", ";
    });
    $("#checkedItemsLog").text(checkedItems);
    }
    }
    });
    });
    </script>
    <div>
    <div style='float: left;' id='jqxWidget'>
    </div>
    <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana;">
    <div id="selectionlog"></div>
    <div style='max-width: 300px; margin-top: 20px;' id="checkedItemsLog"></div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    checkChange Hit twice #17212

    nosn
    Participant

    Hello Peter, Thanks for the response.

    I have coded it as outlined in your example and it does work outside of the custom binding. When I put that logic in the custom binding it was getting hit twice. I tried the unbind/on method as displayed in my example and it didn’t work either. I came across that method while searching for Jquery events that were getting hit multiple times. It didn’t work for me nor did just using on(‘checkChange’.
    Any other suggestions?

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

You must be logged in to reply to this topic.