DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 6 of 6

Thread: Ajax NooB Scratches Head In Despair

  1. #1
    Join Date
    Oct 2006

    Ajax NooB Scratches Head In Despair


    One of my lecturers at Uni has just got into this whole AJAX thing which I thought would be fun to sign up for a course for(dum de dum dum dum dumb meee )

    So now Im four weeks into the course and I just realised I dont get any of the code on the board because i was not listening.

    So I don't suppose anybody would be able to point me in the direction of an ajax tutorial that would prime me for reading static xml files through javascript.

    I also have the format of data I would like to read
    <hotspot x="1377" y="1535" value="2.50" url=""><p align="center">some data about question one </p></hotspot>

    I dont even think this qualifies as xml and im sure each node needs a name unless i'm supposed to somehow cycle through xml nodes like an array ripping out values


  2. #2
    Join Date
    Oct 2006
    Hello Again,

    I think I've broken the back of the main part however I cannot return html as I would wish to. I think it has to do with xml beleiving that the data is xml so my current method of getting the data is using javascript to read the html as xml and return the node name which i turn back into html by adding the relevant < and >.

    Sureley there must be another way of doing this

  3. #3
    Join Date
    Oct 2006
    Enclose the HTML in a CDATA bracket, this will tell the parser not to try to parse XML inside the bracket. So in the example you posted it would look like this

    <hotspot x="1377" y="1535" value="2.50" url=""><![CDATA[<p align="center">some data about question one </p>]]></hotspot>
    Hope this helps!

  4. #4
    Join Date
    Oct 2006
    okay firstly, a thank you is very much in order
    now I have a new problem. Ajax iswiping out my HTML in the body element of my page aaargh. below is my code which I made before my knowledge of the CDATA thing

    <title>Ajax Example Page 2a</title>
    <script type="text/javascript">
    var url = 'beacon.xml';
    var imgurl = '846.jpg'; // url to the image
    var maximgw = 2453; // native width of the image
    var maximgh = 1451; // native height of the image
    var smlimgw = screen.width - 224;
    var scaleratio = maximgw / smlimgw;
    var smlimgh = maximgh / scaleratio;	// needed to find common ration between numbers so resize in browser is possible
    var xmlhttp
    // code for Mozilla, etc.
    if (window.XMLHttpRequest){
    	xmlhttp=new XMLHttpRequest()
    // code for IE
    else if (window.ActiveXObject){
    	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    if (xmlhttp!=null){
    	alert("Your browser does not support XMLHTTP.")
    function tooltip(i){
    	document.getElementById('tool_'+i).style.visibility = 'visible';
    function tooltip_hide(i){
    	document.getElementById('tool_'+i).style.visibility = 'hidden';
    function checkReadyState(obj){
    	if(obj.readyState == 4){
    		if(obj.status == 200){
    			return true;
    			alert("Problem retrieving XML data");
    function onResponse(){
    		var response = xmlhttp.responseXML.documentElement;
    		var txt = "\n";
    		for (i=0;i<x.length;i++){
    			var imz = 500+i;
    			var ttz = 5000+i
    			var topoff = parseInt(x[i].getAttribute("y"), 10) / scaleratio;
    			var leftoff = parseInt(x[i].getAttribute("x"), 10) / scaleratio;
    			txt=txt + '<img onmouseover="javascript:tooltip('+i+');" src="./images/dot.gif" width="5" height="5" style="z-index: '+imz+'; '+
    					'position: absolute; top: '+topoff+'; left: '+leftoff+';">\n';
    			txt=txt + '<div id="tool_'+i+'" style="z-index: '+ttz+'; position: absolute; top: '+topoff+'; left: '+leftoff+'; visibility: hidden;">';
    			txt=txt + x[i].getAttribute("price") + "<br />\n"
    			txt=txt + x[i].getAttribute("url") + "<br />\n"
    			var para1data = "<" + x[i].firstChild.firstChild.tagName + " color='" + x[i].firstChild.firstChild.getAttribute("color") + "'>" + x[i].firstChild.firstChild.text + "<" + x[i].firstChild.firstChild.tagName + ">"
    			txt=txt + "<" + x[i].firstChild.tagName + ">" + para1data + "<" + x[i].firstChild.tagName + ">\n"
    			var para2tag = x[i].childNodes[1].firstChild.tagName
    			var para2tagdata = x[i].childNodes[1].text
    			// para2tagdata = string.replace("Max:", "", paratag2data)
    			var para2data = "<" + para2tag + ">" + x[i].childNodes[1].firstChild.text + "</" + para2tag + ">" + para2tagdata
    			txt=txt + "<" + x[i].firstChild.tagName + ">" + para2data + "<" + x[i].firstChild.tagName + ">\n"
    			var para3tag = x[i].childNodes[2].firstChild.tagName
    			var para3tagdata = x[i].childNodes[2].text
    			//.replace("Price:", "")
    			var para3data = "<" + para3tag + ">" + x[i].childNodes[2].firstChild.text + "</" + para3tag + ">" + para3tagdata
    			txt=txt + "<" + x[i].firstChild.tagName + ">" + para3data + "<" + x[i].firstChild.tagName + ">\n"
    			txt=txt + '<a href="javascript:tooltip_hide('+i+');">Hide</a>\n';
    			txt=txt + "</div>\n"
    		txt=txt + '	<img src="./images/846.jpg" width="'+smlimgw+'" height="'+smlimgh+'" style="visibility: visible;" />\n';
    		document.getElementById('dynamicwrite').innerHTML = txt;
    <div id="dynamicwrite">
    This will easily be good enough for my teacher as he is one of those people in life that settle for second best however I would like to be better than that so, if anybody has the time, will or kindness to point out what i'm doing wrong i'll be ur best buddy forever

  5. #5
    Join Date
    Oct 2006
    oh and i just found put the code works just fine in firefox just not IE

  6. #6
    Join Date
    Oct 2006
    yeah it was not a problem with my code, more my refreshing windows IE rather than shut window and re-open

Similar Threads

  1. New forum + some AJAX links
    By Lori in forum AJAX
    Replies: 0
    Last Post: 02-09-2006, 02:26 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center
Latest Articles
Questions? Contact us.
Web Development
Latest Tips
Open Source

   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center