Welcome to WebmasterWorld Guest from 18.206.194.83

Forum Moderators: open

Message Too Old, No Replies

spry xml data

and loading into a <div>

     
10:47 am on Jun 17, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


hi everyone!

i have a page which loads html content into a containing div
i use this piece of code here, which whoever wrote it called JAH, just asynchronous html:

function jah(url,target) {
// native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {jahDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {jahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}

function jahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="jah error:\n" +
req.statusText;
}
}
}

It works quite nicely :-D
Now, the original page had a table showing the latest news:

<!--get news from xml and display-->
<script type="text/javascript">
<!--
var dsnews = new Spry.Data.XMLDataSet("news/news.xml", "newsitems/newsitem",{sortOnLoad:"date",sortOrderOnLoad:"ascending"});
dsnews.setColumnType("date", "date");
//-->
</script>
<div class="text" spry:region="dsnews">
<table spry:repeat="dsnews">
<tr>
<td>{date}</td>
<td>{heading}</td>
</tr>
<tr><td colspan="2">{news}</td></tr>
</table>
</div>

so! what i did was create a link on my page which used the jah function to load this html into the div.

the problem is, now the data doesn't display, only {news}

What is causing this to happen?

4:48 pm on June 19, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Of course it works nicely ;) AJAX is a well tested and proven technique.

Now, as to why things don't work ... you should, first of all, put the script after the HTML it needs to access. You should aso remove the HTML comments from your JavaScript, as they do not belong there (and will, in fact, prevent your JavaScript from running in certain cases).

10:03 pm on June 20, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
posts:161
votes: 0


Hi thanks for your support! Here is what i have so far, i've stripped it down to as little as possible:

======================================
the HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fade out div, load html with spry regions, fade div back</title>

<!--load thje fade effect from the spry js library-->
<script src="SpryEffects.js" type="text/javascript"></script>

<!--load the thing that loads html into a div-->
<script src="jah.js" language="javascript1.3" type="text/javascript"></script>

<!--load my script that combines the fade and div loader-->
<script src="jah_divfader.js" type="text/javascript"></script>

<!--load the stuff for spry data regions and xml-->
<script src="xpath.js" type="text/javascript"></script>
<script src="SpryData.js" type="text/javascript"></script>

</head>

<body>

<!--here is the first div, it only contains a link-->
<div id="link">
<a href="javascript:divfader('news3.html');">News</a>
</div>

<!--this is the div that fades, and the new content is put inhere-->
<div id="inhere">
this will fade soon...
</div>

</body>
</html>

================================================

My divfader script:

var divfader = function(url){
linkurl = url;
var fade = new Spry.Effect.Fade('inhere', {finish: animation_stop, duration: 2000, from: 100, to: 0, toggle:false});
fade.start();
}

var animation_stop = function(){
jah(linkurl,'inhere');
var fadein = new Spry.Effect.Fade('inhere',{duration: 2000, from: 0, to: 100, toggle:false});
fadein.start();
}

========================================================

The fresh HTML content:

<script type="text/javascript">
dsnews = new Spry.Data.XMLDataSet("news.xml", "newsitems/newsitem",{sortOnLoad:"date",sortOrderOnLoad:"descending"});
dsnews.setColumnType("date", "date");
</script>

<p class="header">News</p>
<p class="text">Here you can see read all the latest news.</p>

<div spry:region="dsNews" id="description">
<p>{dsnews::heading}&nbsp;&nbsp;&nbsp;&nbsp;{dsnews::date}
<br />{dsnews::news}
<br />&nbsp;&nbsp;
</p>
</div>

--------------------------------------

The XML file:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE newsitems [
<!ELEMENT newsitems (newsitem+)>
<!ELEMENT newsitem (date, heading, news)>
<!ELEMENT date (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT news (#PCDATA)>
]>

<newsitems>

<newsitem>
<date>2009-06-11</date>
<heading>It works!</heading>
<news>Got the divloader working</news>
</newsitem>

<newsitem>
<date>2009-06-12</date>
<heading>It works!</heading>
<news>Got the fader working</news>
</newsitem>

<newsitem>
<date>2009-06-13</date>
<heading>It doesnt work!</heading>
<news>Although it works, the spry data wont display</news>
</newsitem>

</newsitems>

===================================

The result:
user clicks link
text fades out
fresh html loads
html fades in
BUT.........
the spry variables have not been put in :-(

I am being driven mad with this and my time is running short now! argh! please help if you can!
thanks in advance all!
derek :-s

5:27 pm on July 3, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


*bump*

Does anyone with Spry experience have some additional insight?

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members