Forum Moderators: open
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?
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).
======================================
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} {dsnews::date}
<br />{dsnews::news}
<br />
</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
Does anyone with Spry experience have some additional insight?
