OnChange event of a select combobox never fires in jQuery

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>

Solution 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
                 });
              }

Solution 2

I don't know what .combobox() method does, but I suspect it takes an actual combobox and does some HTML trickery with it. So it's probably not actually a drop-down any more and won't have the onChange method available to it.

If you provide a link to which library has the .combobox() method, someone could check, but I'm pretty certain it's going to be some spans and text input elements (like the jQuery UI version). These don't have the change method.

Solution 3

below code is working for me. Tested.

if simple select combo box, then change event trigger with the code below;

$("#mySelectCombo").on('change',  function () {
                alert("test");              
            });

if Jquery based select combo then change event triggers with code below;

$("#mySelectCombo").combobox({                    
                select: function (event, ui) {
                   alert("hello");
                }
            });

Solution 4

This worked for me:

    $("#combobox_old").combobox({
        selected: function (event, ui) {
            alert('Handler for .selected() called.');
        }
    });

Murugesan Bakthavachal , wrote also the solution (for me) but I think the other code don't worked because $.widget( "ui.combobox" , {...}); code have already one definition of change event so follow code doesn't worked:

    $("#mySelectCombo").on('change',  function () {
       alert("test");              
    });

View more solutions

Comments

[elclanrs]

Mmmm.... Why dssd ? Also, $($('.ui-combobox-input')[3])???

[Sunil]

Because change method signature in intellisense says change( data, fn)

[Sunil]

I tried this before I posted my question, and it doesn't show the alert.

[coolguy]

Live is depreciated see blog.jquery.com/2011/11/08/building-a-slimmer-jquery

[coolguy]

Check your html that you have the valid Supplier_Sel ID, i mean check the spelling ,capitalisation

[ahren]

@Sunil - does #Supplier_Sel exist at the time the document ready event fires? You will need to use .on() or .delegate() if it's generated afterwards - unless of course you attach the handler in a callback.

[Sunil]

Yes, tried both. The id is correct. <td><SELECT NAME="Supplier_Sel" id="Supplier_Sel" > <option value=" " selected="selected">Make a Selection</option> <option value="mult">Multiple Suppliers</option> <option value="ABC ">ABC </option>

[Sunil]

I am attaching the event after the document.ready happens, if you look at my original code in question. It exists as I verified before the event code.

[coolguy]

The only other option is you have to wrap your code in document.ready() and you have done that..check for any other script error using firebug

[Greg Pettit]

I'm glad my hint got you here.

[Sunil]

Just google for jQuery Combobox Demo and click on View Code for the combobox sample at jQuery site. You can see the widget code then, where the select : function is defined.

[Greg Pettit]

Well, sure. That's what I was trying to get YOU to do. ;-) Teach a man to fish and all that...! Glad you found the solution.

[Sunil]

You were partially correct but still, what I was looking for is how to hook up the event for selection changed.

[Greg Pettit]

You were trying to figure out why .change() didn't work; I provided the reason why, which led you to discover for yourself that there's another method you need to use. So you are correct, I did not provide the full answer along with working code. Which suits me perfectly, and you still got it working! Couldn't ask for a better outcome than that. ;-)

[zelibobla]

You're right. change event never fires! But if so, the shortest solution is to replace change to select. It works!

[Himalaya Garg]

You saved my life champ :)

[Ozzyberto]

selected worked for me as opposed to plain select, thank you very much for your answer!