This problem surprises me because it does not work in Chrome as well. Chrome!!
Anyways, I have 3 select boxes, A, B, C. On a page load, B and C are hidden. (This is fine in all browsers). Currently, I have an event handler attached to specific values in box A, so that if a value is clicked, B shows itself populated with results according to A. Same thing for C: if a value in B is clicked, C will show itself.
However, this "show" effect only occurs in firefox -- Chrome and IE are confused.

Any suggestions? hints? Here is some code:

$(document).ready(function() {
    $("#B").hide();
    $("#C").hide();
    $('select#A option').each(function() {
        $(this).click(function() {
               $.getJSON(stuff, callback(data));
           });

    });

});
function callback(data) {
    // alert("hi");  // This isn't working for Chrome / IE! so the callback isn't called
    $("#B").show();  // This isn't working for Chrome / IE!
};

EDIT: It Turns out, the 'select#A option' -- the 'option' tag was the buggy one. After changing my handler to "change", I was able to debug and debug till I just removed the option tag -- everything seems to work now.

Thanks,
Michael

This problem surprises me because it does not work in Chrome as well. Chrome!!
Anyways, I have 3 select boxes, A, B, C. On a page load, B and C are hidden. (This is fine in all browsers). Currently, I have an event handler attached to specific values in box A, so that if a value is clicked, B shows itself populated with results according to A. Same thing for C: if a value in B is clicked, C will show itself.
However, this "show" effect only occurs in firefox -- Chrome and IE are confused.

Any suggestions? hints? Here is some code:

$(document).ready(function() {
    $("#B").hide();
    $("#C").hide();
    $('select#A option').each(function() {
        $(this).click(function() {
               $.getJSON(stuff, callback(data));
           });

    });

});
function callback(data) {
    // alert("hi");  // This isn't working for Chrome / IE! so the callback isn't called
    $("#B").show();  // This isn't working for Chrome / IE!
};

EDIT: It Turns out, the 'select#A option' -- the 'option' tag was the buggy one. After changing my handler to "change", I was able to debug and debug till I just removed the option tag -- everything seems to work now.

Thanks,
Michael

• javascript
• jquery
• firefox

• 1 does the ajax query arrives to the server? would an alert() at the start of callback() work? and after the $("#B").show()? – Javier Commented Jul 25, 2009 at 16:18
• Sounds like the stray ma issue somewhere in your code. To verify look for the following regexp pattern: /,\s*[]\}]/ – Eugene Lazutkin Commented Jul 26, 2009 at 5:15

3 Answers 3

The actual problem is in the following line:

//...
$.getJSON(stuff, callback(data));
//...

You are not passing the callback function, you are actually executing the function and passing undefined since it doesn't return anything.

You should pass only the reference of the function:

//...
$.getJSON(stuff, callback);
//...

Or use an anonymous function in place:

//...
$.getJSON(stuff, function(data){
  $("#B").show(); 
});
//...

Edit: I haven't noticed about the click handler that you're trying to assign, I remend you to use the change event on the select element, to ensure that an option has been selected:

$(document).ready(function() {
  $("#B,#C").hide();

  $('select#A').change(function() {
    $.getJSON(stuff, function(data) { $("#B").show();});
  });
});

I think that you might have extra closing brackets at the end of the callback function.

UPDATE:

It seems like firefox can pick the click event for the option but not IE. i don't know for chrome but it might be the same problem. Instead of listening to the click event on the option you could just use the change event to track a change in the select.

you could do the following if the change event does correspond to what you are trying to do.

$(document).ready(function() {
$("#B").hide();
$("#C").hide();
$('select#A').each(function() {
    $(this).change(function() {
           $.getJSON(stuff, callback(data));
       });

});

}); function callback(data) {

$("#B").show();  

};

Notice how i am listening to the change event on the Select itself. I hope this helps!

If you put an alert in your callback function does it get shown?