jQWidgets Forums

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 Posts

March 15, 2013 at 8:43 pm 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

March 16, 2013 at 7:12 am 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

March 16, 2013 at 1:51 pm 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?

Author

Posts

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

You must be logged in to reply to this topic.