jQuery: IE returning empty for ID

Question

I have a heartbeat interval which calls a function every few seconds. This function then in turn makes a JSON request to the server via jQuery, the server returns the JSON response and a success jQuery function like usual. Within the success function it does another jQuery function, a foreach for each id. From each id another function is called, function(this). That function then makes another JSON request via jQuery and gets the data.

e.g.:

function function() {
 jQuery.noConflict()(function($){
  $.ajax({
   success: function(data){
    jQuery.each(data.ids, function() {
     function2(this);
    }
   });
  });
 });
}

function function2(id) {

 //In IE id is empty here

 jQuery.noConflict()(function($){
  $.ajax({
   // In IE id has data here in it, WTF
   success: function(data){
    //In IE id is empty here
   }
  });
 });
}

Also, keep in mind these aren't the real function names, just here as an example for what the actual problem is. The problem is that in IE 7 and IE 8, the id variable is EMPTY. In every other browser the ID is never empty. I don't understand why. Can someone please help me here?

Thanks

Answer 1

Yeesh, it looks like you found a hiccup in jQuery's cross-compatibility. I'd try binding the .each() to this, and using console.log() liberally until you find where the script stops working. Using IE's developer tools (hit f12), you should be able to at least track down the issue.

Answer 2

I'm not sure how IE handles your syntax, the multiple jQuery.noConlict() calls aren't needed, instead your call (if you need $ inside) should look like this:

function function2(id) {
 (function($){
  $.ajax({
   success: function(data){
   }
  });
 })(jQuery);
}

Or instead, wrap all your functions inside one (function($) { /* code */ })(jQuery);, calling .noConflict() as well if needed.