IE + Safari jQuery .load() problem

JavaScript
1

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 = {
	init:function(){
		$('.twitter').load('/api/twitter/twitter.php', function(){
			$('.twitter').show('slow');
		});
	}
};

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript">$(document).ready(function(){Tweets.init();});</script>
<script src='http://www.google-analytics.com/urchin.js' type='text/javascript'></script>
<script type='text/javascript'>_uacct = 'XX-1234567-8';urchinTracker();</script>

The twitter.php file:

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

// JSON API call
$strTweetsBody = (string) @file_get_contents("http://api.twitter.com/1/statuses/user_timeline/{$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="http://www.twitter.com/myAccount" title="Follow me on Twitter" target="_blank" class="link-white">Twitter</a>)</span></p>
<?php
	// 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="http://www.twitter.com/\\2" title="Go to \\2\\'s Twitter profile" target="_blank">\\2</a>', $strTweet);
			$strTweet = preg_replace('/(^|\\s)#(\\w+)/', '\\1#<a href="http://search.twitter.com/search?q=%23\\2" title="Search \\'#\\2\\' on Twitter" target="_blank">\\2</a>', $strTweet);
?>
			<div class="<?php echo $strCssClass; ?>">
				<div>
					<?php echo $strTweet; ?>
				</div>
				<p class="tweetTime"><?php echo $strTweetTime; ?></p>
			</div>
<?php    
		}
	}
}
?>

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:

2

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

$.ajaxSetup({
    cache: false
});
3

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…

4

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

var Tweets = {
    test: 'hello'
};

alert(Tweets.test);

does it alert anything?

5

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:

6

http://www.jslint.com

7

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