IE + Safari jQuery .load() problem

I am using the jQuery .load() command to place the output of an PHP script (to load the latest tweets from my account via a JSON call) in a particular <div> (.twitter).

The scripts work fine in FF, Opera and Chrome, but IE6,7,8 and Safari don’t show anything at all.

Here’s the main.js file in question:

var Tweets = {
		$('.twitter').load('/api/twitter/twitter.php', function(){

Here are the <script> commands (only ones) at the bottom of the page (before </body>):

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript">$(document).ready(function(){Tweets.init();});</script>
<script src='' type='text/javascript'></script>
<script type='text/javascript'>_uacct = 'XX-1234567-8';urchinTracker();</script>

The twitter.php file:

// Set API parameters + initalize array
$strUser = 'myAccount';
$strFormat = 'json';
$intLimit = 4;
$strCssClass = 'tweet';
$arrTweets = array();

// JSON API call
$strTweetsBody = (string) @file_get_contents("{$strUser}.{$strFormat}");
if(is_string($strTweetsBody) && $strTweetsBody){
	$arrTweets = @json_decode($strTweetsBody);

// If successful api call
if(is_array($arrTweets) || count($arrTweets) > 0){
	// Display title
	<p>UPDATES <span class="twitterLink">(from <a href="" title="Follow me on Twitter" target="_blank" class="link-white">Twitter</a>)</span></p>
	// Display $intLimit value most recent tweets
	for($i = 0; $i < $intLimit; $i++){
		// If tweet contains text and timestamp
		if ($arrTweets[$i] instanceof stdClass && $arrTweets[$i]->text && $arrTweets[$i]->created_at) {
			//Format text and timestamp
			$strTweet = htmlentities($arrTweets[$i]->text, ENT_QUOTES);
			$strTweetTime = htmlentities($arrTweets[$i]->created_at, ENT_QUOTES);
			$strTweetTime = strtoupper(date("F jS, g:iA",strtotime($strTweetTime)));
			// Wrap http:// text, @names and #hashmarks in HTML link tags
			$strTweet = preg_replace('/http:\\/\\/([a-z0-9_\\.\\-\\+\\&\\!\\#\\~\\/\\,]+)/i', '<a href="http://$1" title="http://$1" target="_blank">http://$1</a>', $strTweet);
			$strTweet = preg_replace('/(^|\\s)@(\\w+)/', '\\1@<a href="\\2" title="Go to \\2\\'s Twitter profile" target="_blank">\\2</a>', $strTweet);
			$strTweet = preg_replace('/(^|\\s)#(\\w+)/', '\\1#<a href="\\2" title="Search \\'#\\2\\' on Twitter" target="_blank">\\2</a>', $strTweet);
			<div class="<?php echo $strCssClass; ?>">
					<?php echo $strTweet; ?>
				<p class="tweetTime"><?php echo $strTweetTime; ?></p>

HTML/CSS (shown inline for the example):

<div class='twitter' style="display:none;">
<!-- .twitter --></div>

Sorry that I cannot just link to the site, but it’s password-protected as it’s a work-in-progress for a client. If there’s any other info you need just ask.

Thanks :smiley:

One thing that has popped up in front of me is Ajax caching, try the following before your .[B]load/B and see if it helps

    cache: false

Tried, but no go. Thanks for the suggestion, though :slight_smile:

IE’s error icon in the bottom-left-corner, when dbl-clicked, says that ‘Tweets’ is undefined.

It’s almost as if Safari and IE are skipping the line <script> line about the Tweets.init();

I’ll try tinkering a bit, but I’m guessing at this point…

In your main.js file if you add a new method such as

var Tweets = {
    test: 'hello'


does it alert anything?

Nah, not in IE or Safari.

I just put the whole thing inline…

<script type="text/javascript">$('.twitter').load('/api/twitter/twitter.php', function(){$('.twitter').show('slow');});</script>

…and it finally worked. Not sure why, though. I bet I am simply missing some basic principle that is fuggin’ up everything. Trick is now to find it…

Thanks for the help :slight_smile:

Its as almost as if Safari and IE are ignoring the src file due to the / in the file path