CODEWITHSUNDEEP
javascriptjqueryfirefox
Dirk
Dirk

Reputation: 6884

JQuery effect working in firefox; not chrome / ie

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

Upvotes: 0

Views: 4074

Answers (3)

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827366

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 recommend 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();});
  });
});

Upvotes: 4

ak3nat0n
ak3nat0n

Reputation: 6288

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!

Upvotes: 2

Frozenskys
Frozenskys

Reputation: 4410

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

Upvotes: 0

Related Questions