Question

My code works fine in other browsers, but in IE8 I get “error on page” – and when I click that it says:
“Exception thrown and not caught 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 (rather than jquery.min.js) and to 1.5.1/jquery.min.js,
but problem still remains.

Can someone correct/improve my code for me, or guide me as to 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's 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 do the job in IE8 or does it break? The reason I ask is because if it works as expected you could just wrap it in a try{ } catch{ \\do nothing } block and put it down to another thing IE is rubbish at.

You may be better off creating an object for the creation of the facebook div. Something like…

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

Then in your each loop you can do this…

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

Then append html to the facebookfeed object

Doing this may remove the scope for error when using single quotes and double quotes when joining strings together, which in turn may solve your issue in IE8

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

Hope this helps!

UPDATE

The append method is used to add stuff to a jquery object. For more info see here

So to surround the div’s as you mentioned in the comments you would 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 would need to append that to the html div like so…

html.append(nDiv);

So that would give you

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

So what you have done is created a new jquery object and appended to that, then appended that to the html object which you have then appended to the facebookfeed div. Confusing huh?!