Jquery: "Exception thrown and not caught" in IE8, but works in other browsers

Question

My code works fine in other browsers, but in IE8 I get a "page error" - and when I click on it, it says: "An exception is thrown and not thrown Line: 16 Char: 15120 Code: 0 URI: http: // ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js "

I tried linking to jquery.js (not jquery.min.js) and 1.5.1 / jquery.min.js, but the problem still remains.

Can someone fix / improve my code for me or guide me on where to look. Thanks

<script type="text/javascript"> function fbFetch() { var token = "<<tag_removed>>&expires_in=0"; //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON var url = "https://graph.facebook.com/<<ID_REMOVED>>?&callback=?&access_token=" + token; //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data. $.getJSON(url, function(json) { json.data = json.data.reverse(); // need to reverse it as FB outputs it as earliest last! var html = "<div class='facebook'>"; //loop through and within data array retrieve the message variable. $.each(json.data, function(i, fb) { html += "<div class='n' >" + fb.name; html += "<div class='t'>" + (dateFormat(fb.start_time, "ddd, mmm dS, yyyy")) + " at " + (dateFormat(fb.start_time, "h:MMtt")) + "</div >"; html += "<div class='l'>" + fb.location + "</div >"; html += '<div class="i"><a target="_blank" title="opens in NEW window" href="https://www.facebook.com/pages/<<id_removed>>#!/event.php?eid=' + fb.id + '" >more info...</a></div>'; html += "</div >"; } ); html += "</div>"; //A little animation once fetched $('.facebookfeed').animate({opacity: 0}, 500, function(){ $('.facebookfeed').html(html); }); $('.facebookfeed').animate({opacity: 1}, 500); }); 

};

Answer 1

Does the code work in IE8 or is it interrupted? The reason I'm asking is that if it works as expected, you can just wrap it in a try{ } catch{ \\do nothing } and put it in another thing that IE has garbage in.

You might be better off creating an object to create a facebook div. Sort of...

 var html = $('<div />'); html.attr('class', 'facebook'); 

Then in each cycle you can do it ...

 $('<div />').attr('class', 'n').append(fb.name).appendTo(html); $('<div />').attr('class', 't').append etc... 

Then add html to your facebookfeed object

Doing this can remove the error area when using single quotes and double quotes when concatenating strings together, which in turn can solve your problem in IE8

 $('.facebookfeed').fadeOut(500, function(){ $(this).append(html).fadeIn(500); }); 

Hope this helps!

UPDATE

The append method is used to add material to a jquery object. For more information see here .

So, to surround the div, as you mentioned in the comments, you will do something like this ...

 var nDiv = $('<div />').attr('class', 'n').append(fb.name); $('<div />').attr('class', 't').append(fb.somethingElse).appendTo(nDiv); // etc 

And then you need to add this to the html div so that ...

 html.append(nDiv); 

So this will give you

 <div class="facebook"> <div class="n"> value of fb.name <div class="t"> value of fb.somethingElse </div> </div> </div> 

So what have you done, a new jquery object is created and added to it, and then added to the html object that you added to the facebookfeed div. Confused?