Spry data won't load in IE...

stevenradams
stevenradams used Ask the Experts™
on
I am using DW CS4 to develop my own website (as a graphic designer trying to grow into a web designer).

I've created an rss file which references my blog page... I've got my DW template within which I have my spry repeating region and I have dragged in my spry {title} reference from the bindings tab.

All is well and happy in FF, safari etc etc... but no joy in IE.

When I view my site in IE (www.adamsapplemedia.co.uk), the right hand div displays the code, as well as the small bit of twitter code in the same div after the spry stuff, for a split second and then vanishes. Presumably as the JS is trying to reference my rss file.

I have checked that the PC I am testing in has JS switched on, but this has made no difference. Having read other Q's on here I've also removed line breaks and white space from the code... to stop IE being quirky. But no joy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>adamsapplemedia.co.uk</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#container {
	width: 75%;
	min-width: 70%;
	border: 1px solid #333;
	position: relative;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#menudiv {
	float: left;
	width: 10%;
	position: relative;
	padding-top: 8px;
	padding-right: 12px;
	padding-bottom: 8px;
	border-right: dotted 1px #F90;
	text-align: right;
	margin-right: 15px;
}
#contentdiv  {
	float: left;
	width: 50%;
	margin-bottom: 15px;
	margin-left: 15px;
}
#containerstretchdiv {
	clear: both;
	text-align: right;
	font-size: 9px;
	padding-right: 3px;
	font-family: Arial, Helvetica, sans-serif;
	color: #F90;
}
#headdiv {
	clear: both;
	background-image: url(../images/aam_header.jpg);
	background-position: left center;
	height: 150px;
	background-repeat: no-repeat;
}
#feeddiv {
	float: right;
	width: 25%;
	position: relative;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	border-left: dotted 1px #333;
	padding-right: 10px;
	margin-bottom: 10px;
}
/* following style is for the twitter feed */
#container #feeddiv #twitter_div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 18px;
}
#container #feeddiv #twitter_div #twitter_update_list {
	list-style-type: none;
	text-indent: 0px;
	margin: 0px;
	padding: 0px;
}
-->
</style>
<link href="../css/p a.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var stevenadamsblog = new Spry.Data.XMLDataSet("../rss/stevenadamsblog.rss", "rss/channel/item", {distinctOnLoad: true});
//-->
</script>
</head>
<body>
<div id="container">
<div id="headdiv"></div>
<div id="menudiv">
<p><a href="../index.php" title="about adamsapplemedia" target="_self">about</a></p>
<p><a href="../blog.php" title="visit steven adams' blog" target="_self"><strong>blog</strong></a>    </p>
<p><a href="../print.php" title="our print media experience" target="_self">print</a></p>
<p><a href="../web.php" target="_self">web</a></p>
<p><a href="../word.php" target="_self">word</a>    </p>
<p><a href="../contact.php" title="Contact adamsapplemedia" target="_self">contact</a></p>
</div>
<!-- TemplateBeginEditable name="maincontent" -->
<div id="contentdiv">
<p>&nbsp;</p>
</div>
<!-- TemplateEndEditable -->
<div id="feeddiv" spry:detailregion="stevenadamsblog">
<h1>// latest blog posts</h1>
<p spry:repeatchildren="stevenadamsblog">
<a href="../blog.php#{title}" title="...read more..." target="_self">{title}</a>
</p>
<p>&nbsp;</p>     
<div id="twitter_div">
<h1 class="sidebar-title">// follow steven on twitter</h1>
<ul id="twitter_update_list"></ul>
<p>&nbsp;</p>
<p><a href="http://twitter.com/stevenradams" id="twitter-link" style="display:inline;text-align:left;">follow me on twitter</a></p>
</div>
</div>
<div id="containerstretchdiv">copyright steven adams 2009</div>    
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stevenradams.json?callback=twitterCallback2&amp;count=2"></script>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jason C. LevineDon't talk to me.

Commented:
I see the Spry region just fine in Firefox, which usually indicates a poorly structured feed is throwing off IE or the feed contains one or more chartacters that is screwing IE up.  I do notice that your feed is being served as text/plain as I cannot live bookmark it in either application.  That alone may be screwing it up.

Author

Commented:
Hi Jason,

thanks for the fast reply; any reading I've done alone does sit along these lines (i.e. feed type rather than JS on page)... but I'm afraid my knowledge of xml/feeds etc is poor... sorry :)

When you say it's being served as text/plain, what do you mean? Do you mean the .rss file is 'scripted' incorrectly, or do you mean the manner that it's being imported is incorrect?

Thanks for your help.

Don't talk to me.
Commented:
>> Do you mean the .rss file is 'scripted' incorrectly, or do you mean the manner that it's being imported is incorrect?

Either.  Both.  I'm not sure.  What I did was run the feed through this validator:

http://validator.w3.org/feed/check.cgi?url=http%3A%2F%2Fwww.adamsapplemedia.co.uk%2Frss%2Fstevenadamsblog.rss

and also browsed straight to it:

http://www.adamsapplemedia.co.uk/rss/stevenadamsblog.rss

When I browse straight to it, it loads as a text file would and that's not correct behavior.  I should see a different interface in the browser where the feed is rendered into items.  The validator mentions it is being served as text/plain and provides links to explain further.  It may be that the MIME type on the server is set up incorrectly or not at all.  Try renaming the file from .rss to .xml and editing the page to reflect that.
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Author

Commented:
you're my hero jason... i've been trying to sort that for blummin ages.

i recreated the feed (as an xml), changed the code in the dwt to reflect that, synced with dw and deleted any old files from the server... and robert's yer father's brother... it worked :)

thank you, brilliant stuff. i'd searched forums'n'everywhere looking for answers to this!

Author

Commented:
Excellent answer  the issue was (in essence) referencing a .rss file rather than .xml. Not sure why IE needed the change but it worked a treat.

Quick and accurate - thanks.
Jason C. LevineDon't talk to me.

Commented:
I've seen this happen a few times before and if the name change fixes it, it's probably because the MIME type is not setup correctly on the feed server.  When I browse to the XML version, I see what I expect to see from a feed (screenshot)

Apparently, Firefox is less twitchy than IE in this matter (unusual) and simply read the text version and decided it was a valid feed.  Usually it's IE that attempts to outthink the code and displays what it perceives is correct even if the code isn't.
snapper1248115868392.jpg

Author

Commented:
I did a little more than just rename it, though it probably equated to the same thing. Because I create the feed using dreamfeeder extn, which is a quick little processor for gathering my blogs etc, I deleted the old feed and recreated it. The only chance you have to specify the file type is when it asks you to save your settings... if you don't add anything than df tabs on the .rss extn. This time, I added the .xml. So, prob equates to renaming, but I wanted to be sure.

I wonder why the twitter code after the spry stuff didn't render either though, as it was totally unconnected to the issue, but for some reason IE just seemed to flounder on the spry stuff and ignore the rest of the div.

Thanks again.

Jason C. LevineDon't talk to me.

Commented:
How did you generate the Twitter code?

Author

Commented:
I didn't  twitter.com has a little help area where you can grab html/flash/js code to add to your blog/website. I just grabbed that, as the code references some twitter-side stuff that I didn't have details of. The only amendments I made were to style the twitter 'feed' with css.

Twitter code, for interest, is

<div id="twitter_div">
<h1 class="sidebar-title">// follow steven on twitter</h1>
<ul id="twitter_update_list"></ul>
<p>&nbsp;</p>
<p><a href="http://twitter.com/stevenradams" id="twitter-link" style="display:inline;text-align:left;">follow me on twitter</a></p>
</div>

with the following before /body

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/stevenradams.json?callback=twitterCallback2&count=2"></script>



Jason C. LevineDon't talk to me.

Commented:
Interesting.  There's more than one way to grab a twitter feed, which is why I even asked.  The Twitter stuff shouldn't care what is going on in the rest of the page...

Author

Commented:
that's what I thought ... but thankfully it's not an issue anymore :)
Jason C. LevineDon't talk to me.

Commented:
Hey Steven,

I'm seeing a bug on my end with email notifications from this thread.  Can I ask you to post another comment here as soon as you see this?

Author

Commented:
Like this... ?
Jason C. LevineDon't talk to me.

Commented:
Thanks.  Bug confirmed and I now have samples to forward.  Thanks again!

Author

Commented:
:) least I could do!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial