SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face AJAX simpleton getting confused

    Hi,

    Need some advice please on what direction I need to go in with this script. I'm trying to create a dynamic nav using AJAX but I'm reading so many tutorials and examples that I've got myself too confused. I don't quite know what I should be doing here so could do with a little help. I do apologise in advance if I come across as a real novice.

    I'm keeping my files local at the moment. But I only intend to use HTML and XML - I can do that right? I don't HAVE to also use ASP/PHP?

    This is what I have in the body of my HTML file:

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    var xmlHttp;

    function getCat(addUrl,whichDiv) {
    changeDiv=whichDiv;
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
    alert ("Browser does not support HTTP Request");
    return;
    }
    var url=addUrl;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    }

    function stateChanged() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    document.getElementById(changeDiv).innerHTML = "<ul><li>"+xmlHttp.responseXML.getElementsByTagName("name")[0].childNodes[0].nodeValue+"</li></ul>";
    }
    }

    function GetXmlHttpObject() {
    var objXMLHttp=null;
    if (window.XMLHttpRequest) {
    objXMLHttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    return objXMLHttp;
    }
    //-->
    </SCRIPT>


    <ul>
    <li class="navmusic"><a href="#" onclick="getCat('myexample.xml','musicDiv');">Music</a></li>
    <div id="musicDiv"></div>
    </ul>

    My XML file looks like this:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <subcategories level="2">
    <icat>
    <reference>dance</reference>
    <name>Dance</name>
    </icat>
    <icat>
    <reference>rockpop</reference>
    <name>Rock &amp; Pop</name>
    </icat>
    <icat>
    <reference>metal</reference>
    <name>Metal</name>
    </icat>
    </subcategories>

    This works fine as is on Firefox, but I am getting an 'Object Required' error on IE. I have read this is something to do with the mime type yet I am not sure how I should fix this in my code.

    What I'm trying to eventually do is, when you click Music, you get a second level of options populated in a div with ID musicDiv. I need the script to run through all the 'icat' records it finds and return each one it finds in an <li> tag. I know all I've got at the minute is one node returning, but I'm not sure how I can return each one - do I create an Array?

    I eventually want to do something like:
    <li><a href="mysiteurl/reference">name</a></li>

    Also I'm not sure whether I HAVE to use responseXML here - am I right? I have tried responseText but I just get a string of all the data. Could anyone advise whether I'm right to think I should be using responseXML when reading this XML data?

    Sorry to come across like I want the earth here, I've felt like I've been going round in circles all day, so any advice would be greatly appreciated.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume that the error is happening on the line where you're trying to get:
    Code:
    xmlHttp.responseXML.getElementsByTagName("name")[0].childNodes[0].nodeValue
    Try to figure out at what point this is failing
    Code:
    alert(xmlHttp.responseXML);
    alert(xmlHttp.responseXML.getElementsByTagName("name")[0]);
    alert(xmlHttp.responseXML.getElementsByTagName("name")[0].childNodes[0]);
    alert(xmlHttp.responseXML.getElementsByTagName("name")[0].childNodes[0].nodeValue);
    ie which one is responding with "undefined"

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Getting somewhere

    I have got somewhere since my first post. Most importantly I realise I cannot test this locally - so I've put this same code online and that has sorted most of my issues in one go. I was presuming I was saving myself a bit of time by working locally but it turns out I've been shooting myself in the foot.

    I've added a function in stateChanged like this:

    function stateChanged() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
    showData(xmlHttp.responseXML.getElementsByTagName('reference')[0].childNodes[0].nodeValue);
    }
    }

    function showData(datastr) {
    document.getElementById(changeDiv).innerHTML = "<ul><li>"+datastr+"</li></ul>";
    }

    And have found this works for me.

    Now that I've got past that hurdle, onto showing all node values.

    Thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •