Question

I have following code, where I try to create the on change event handler for a select combobox in jQuery, but I never see the alert message. What is wrong here?

  $(document).ready(function () {
        var combo = $("#Supplier_Sel").combobox();
        $($('.ui-combobox-input')[3]).css('width', '300px');
        $("#toggle").click(function () {
            $("#Supplier_Sel").toggle();
        });
        //this change event never gets fired. WHY??
        $("#Supplier_Sel").change("dssd",function () {
            alert('Handler for .change() called.');
        });
    });

Also, I have the included the following scripts in my page. May be I need to add some other script for combobox onchange event?

    <script type="text/javascript" src="../jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../jquery/ui/jquery-ui-1.8.21.custom.js"></script>
    <script type="text/javascript" src="../jquery/jquery.scrollIntoView.min.js"></script>

Answer 1

This will surprise everybody. But to me it seems like rocket science. LOL.
To fire the change event of a jQuery combobox, you should always use the code like below. All of the various mentioned approaches in this post will not do it. We need to wireup the event while we are calling the combobox method in jQuery for the select element. Also, the change event never fires, but selected event it appears always fires if hooked up in above manner.

        $(document).ready(function () {
        $("#Supplier_Sel").combobox({
            selected: function (event, ui) {
                alert('Handler for .change() called.');
            }
        });
        $($('.ui-combobox-input')[3]).css('width', '300px');
        $("#toggle").click(function () {
            $("#Supplier_Sel").toggle();
        });
    });

The above approach makes sense, if you look at the combobox widget jQuery code. This is shown below.

select: function( event, ui ) {
                 ui.item.option.selected = true;
                 //select.val( ui.item.option.value );
                 self._trigger( "selected", event, {
                    item: ui.item.option
                 });
              }