[jQuery] generic xml loading - xml doesnt get returned in FF
<html><div style='background-color:'><DIV class=RTE>Goal of the script:</DIV>
<DIV class=RTE>Click on link, load an XML and use the content. While al this is happening I want to display a loading image.</DIV>
<DIV class=RTE> </DIV>
<DIV class=RTE>My first code worked fine in IE and FF but was not generic:<BR></DIV>
<DIV class=RTE>//Code - Example here: <A href="http://www.jmslbam.nl/temp/jquery/xml/ajaxStatic.html">http://www.jmslbam.nl/temp/jquery/xml/ajaxStatic.html</A></DIV>
<DIV class=RTE>$(document).ready(<FONT color=#0000ff>function</FONT>(){</DIV>
<DIV class=RTE>
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<P>$(<FONT color=#800000>"#loadingImg"</FONT>).hide();</P>
<P>$(<FONT color=#800000>"#text"</FONT>).hide(); </P>
<P>$(<FONT color=#800000>"#clickMe"</FONT>).click(<FONT color=#0000ff>function</FONT>(){ </P>
<P>$(<FONT color=#800000>"#text"</FONT>).hide();</P>
<P>$(<FONT color=#800000>"#loadingImg"</FONT>).show();</P>
<P></P>
<P><FONT color=#0000ff>var</FONT> strImg, strText;</P>
<P></P>
<P>$(<FONT color=#800000>"#loadingimg"</FONT>).show(); </P>
<P></P>
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<P dir=ltr style="MARGIN-RIGHT: 0px"><FONT color=#0000ff>var</FONT> objXml = $.<FONT color=#0000ff>get</FONT>(<FONT color=#800000>"loadme.xml"</FONT>, <FONT color=#0000ff>function</FONT>(xml){ </P>
<P dir=ltr style="MARGIN-RIGHT: 0px"></P>
<P dir=ltr style="MARGIN-RIGHT: 0px">strText = $(<FONT color=#800000>"text"</FONT>,xml).text();</P>
<P dir=ltr style="MARGIN-RIGHT: 0px">$(<FONT color=#800000>"#text"</FONT>).html(strText); </P>
<P dir=ltr style="MARGIN-RIGHT: 0px"><FONT color=#008000>//alert(strText);</P></FONT>
<P dir=ltr style="MARGIN-RIGHT: 0px">strImg = $(<FONT color=#800000>"img"</FONT>,xml).text();</P>
<P dir=ltr style="MARGIN-RIGHT: 0px">$(<FONT color=#800000>"#text"</FONT>).append(<FONT color=#800000>"<img src=\" "</FONT>+strImg+<FONT color=#800000>"\" />"</FONT>);</P>
<P dir=ltr style="MARGIN-RIGHT: 0px"></P>
<P dir=ltr style="MARGIN-RIGHT: 0px">$(<FONT color=#800000>"#text"</FONT>).fadeIn();</P>
<P dir=ltr style="MARGIN-RIGHT: 0px">$(<FONT color=#800000>"#loadingImg"</FONT>).hide();</P>
<P dir=ltr style="MARGIN-RIGHT: 0px"></P>
<P dir=ltr style="MARGIN-RIGHT: 0px">}); <FONT color=#008000>//end load xml </P></BLOCKQUOTE></FONT>
<P dir=ltr style="MARGIN-RIGHT: 0px">}); <FONT color=#008000>//end click</P></BLOCKQUOTE></FONT>
<P>});<FONT color=#008000>//end onload</P></FONT></DIV>
<DIV class=RTE> </DIV>
<DIV class=RTE>So it has been adjusted that you send the xml path as a parameter and the custom loadXml() handle the loading of the XML and show the loading.gif.</DIV>
<DIV class=RTE>Well IE handles the next code well, but FF fails:<BR></DIV>
<DIV class=RTE>//Code - Example here: <A href="http://www.jmslbam.nl/temp/jquery/xml/ajaxGeneric.html">http://www.jmslbam.nl/temp/jquery/xml/ajaxGeneric.html</A><BR>$(document).ready(<FONT color=#0000ff>function</FONT>(){<BR>$(<FONT color=#800000>"#loadingimg"</FONT>).hide();</DIV>
<DIV class=RTE>
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<P>$(<FONT color=#800000>"#text"</FONT>).hide(); </P><FONT color=#0000ff>
<P>function</FONT> loadXml(strPathToXml) {</P>
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<P><FONT color=#0000ff>var</FONT> _objXml;</P>
<P></P>
<P>$(<FONT color=#800000>"#loadingimg"</FONT>).show(); </P>
<P></P>
<P><FONT color=#0000ff>var</FONT> objXml = $.<FONT color=#0000ff>get</FONT>(strPathToXml, <FONT color=#0000ff>function</FONT>(xml){ </P>
<P>_objXml = xml;</P>
<P><FONT color=#008000>//alert("xmlLoad: " + $("text",xml).text());</P></FONT>
<P></P>
<P>});</P>
<P></P>
<P>$(<FONT color=#800000>"#loadingimg"</FONT>).hide();</P>
<P><FONT color=#0000ff>return</FONT> _objXml;</P></BLOCKQUOTE>
<P dir=ltr>} <FONT color=#008000>//end loadXML</FONT></P>
<P>$(<FONT color=#800000>"#clickMe"</FONT>).click(<FONT color=#0000ff>function</FONT>(){ </P>
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<P><FONT color=#008000>//hide if the link is going to be clicked more than once.</P></FONT>
<P>$(<FONT color=#800000>"#text"</FONT>).hide();</P>
<P></P>
<P><FONT color=#008000>//load xml</P></FONT>
<P><FONT color=#0000ff>var</FONT> objXml2, strText, strImg;</P>
<P>objXml2 = loadXml(<FONT color=#800000>"loadme.xml"</FONT>);</P>
<P></P>
<P><FONT color=#008000>//get text from xml and put it in the html</P></FONT>
<P>strText = $(<FONT color=#800000>"text"</FONT>,objXml2).text();</P>
<P>$(<FONT color=#800000>"#text"</FONT>).html(strText);</P>
<P></P>
<P><FONT color=#008000>//get the image and put it behind the text</P></FONT>
<P>strImg = $(<FONT color=#800000>"img"</FONT>,objXml2).text();</P>
<P><FONT color=#008000>//alert("click: "+ strText);</P></FONT>
<P>$(<FONT color=#800000>"#text"</FONT>).append(<FONT color=#800000>"<img src=\" "</FONT>+strImg+<FONT color=#800000>"\" />"</FONT>);</P>
<P></P>
<P><FONT color=#008000>//at last show the div#text</P></FONT>
<P>$(<FONT color=#800000>"#text"</FONT>).show();</P></BLOCKQUOTE>
<P></P>
<P></P>
<P>}); <FONT color=#008000>//end click</FONT></P></BLOCKQUOTE>
<P>});<FONT color=#008000>//onready</P></FONT> </DIV>
<DIV class=RTE>The alert in the onclick wont display any text, so it looks like the XML object isnt returned to the click function.</DIV>
<DIV class=RTE> </DIV>
<DIV class=RTE>Me and my collega's looked at it but can't find out what the problem is.</DIV>
<DIV class=RTE> </DIV>
<DIV class=RTE><EM>Yours sincerly,<BR><BR>Jaime Martinez</EM><BR></DIV>
<DIV class=RTE><STRONG>P.S. </STRONG>The image that will be shown has to load, so probably this first time you click it will not display the image. Just click again ;)<BR><STRONG>P.S. 2</STRONG> The is a zip if you want to test it local, but remember to start the webserver ;)<BR><BR></DIV></div></html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/