SitePoint Sponsor

User Tag List

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

    In need of a some Javascript accessing XML files help !

    I am a recent newcomer to the JavaScript language. I am currently in need of a little help to get my photo gallery working in Firefox and Opera. The code works fine in IE.

    Below is the code for the Javascript. When I use the alert method for the x.length it in Firefox returns 0; Yet in IE version it returns the correct number of elements.

    If anyone could help me solve this problem I am facing I would be most grateful.

    I have also included an example of the XML files being used.

    Javascript Code:

    function loadalbum(gallery)
    {
    var xmlDoc=null;
    if (window.ActiveXObject)
    {// code for IE
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.load('http://www.hughesmultimedia.com/photography/xml/'+gallery+'.xml');
    var x=xmlDoc.getElementsByTagName('PHOTO');
    //alert(x.length);
    displayImages(x);
    }
    else if (document.implementation.createDocument)
    {// code for Mozilla, Firefox, Opera, etc.
    xmlDoc = document.implementation.createDocument("","", null);
    xmlDoc.async=false;
    xmlDoc.load('http://www.hughesmultimedia.com/photography/xml/'+gallery+'.xml');
    var x=xmlDoc.getElementsByTagName('PHOTO');
    //alert(x.length);
    displayImages(x);
    }
    else
    {
    alert('Your browser cannot handle this script');
    }
    }

    function displayImages(x)
    {
    for (i=0;i<x.length;i++)
    {
    document.write('<li>');
    document.write('<a href="');
    document.write(x[i].getAttribute("name"));
    document.write('" rel="thumbnail" title="');
    document.write(x[i].getAttribute("caption"));
    document.write('"><img src="');
    document.write(x[i].getAttribute("thumb"));
    document.write('" style="width: 75px; height: 75px" /></a></li>');
    }
    }


    XML Code:

    <?xml version="1.0" encoding="iso-8859-1"?>
    <ALBUM>
    <PHOTO name="photo1.jpg" caption="1" thumb="thumb1.jpg" num="0"></PHOTO>
    <PHOTO name="photo2.jpg" caption="2" thumb="thumb2.jpg" num="1"></PHOTO>
    <PHOTO name="photo3.jpg" caption="3" thumb="thumb3.jpg" num="2"></PHOTO>
    <PHOTO name="photo4.jpg" caption="4" thumb="thumb4.jpg" num="3"></PHOTO>
    <PHOTO name="photo5.jpg" caption="5" thumb="thumb5.jpg" num="4"></PHOTO>
    <PHOTO name="photo6.jpg" caption="6" thumb="thumb6.jpg" num="5"></PHOTO>
    <PHOTO name="photo7.jpg" caption="7" thumb="thumb7.jpg" num="6"></PHOTO>
    <PHOTO name="photo8.jpg" caption="8" thumb="thumb8.jpg" num="7"></PHOTO>
    <PHOTO name="photo9.jpg" caption="9" thumb="thumb9.jpg" num="8"></PHOTO>
    <PHOTO name="photo10.jpg" caption="10" thumb="thumb10.jpg" num="9"></PHOTO>
    <PHOTO name="photo11.jpg" caption="11" thumb="thumb11.jpg" num="10"></PHOTO>
    <PHOTO name="photo12.jpg" caption="12" thumb="thumb12.jpg" num="11"></PHOTO>
    </ALBUM>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your ajax code seems a little outdated. Attached is something i've quickly written that uses some ajax code I use daily.

    I've also added a little bit of code in there that would seem alot better then using document.write. If you still wish to use document.write, then uncomment the displayImages and return calls.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function createXMLHttpRequest() {
                    if (typeof XMLHttpRequest != "undefined") {
                        return new XMLHttpRequest();
                    } else if (typeof ActiveXObject != "undefined") {
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    } else {
                        throw new Error("XMLHttpRequest not supported");
                    }
                }
                function doRequest(url, callback, postAttributes) {
                    var request = createXMLHttpRequest();
                    request.open(((postAttributes) ? 'POST' : 'GET'), url, true);
                    if(postAttributes) {
                        var postStr = '';
                        if(typeof(postAttributes) != 'string') {
                            for(var i in postAttributes) {
                                postStr += '&' + i + '=' + postAttributes[i];
                            }
                        } else
                            postStr = postAttributes;
                        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        request.setRequestHeader("Content-length", postStr.length);
                        request.setRequestHeader("Connection", "close");
                    }
                    request.onreadystatechange = function() {
                        if (request.readyState == 4) {
                            if(request.status == 200) {
                                callback(request);
                            } else {
                                alert('An error has occurred');
                            }
                        }
                    }
                    if(postStr)
                        request.send(postStr);
                    else
                        request.send(null);
                }
                function loadalbum(gallery) {
    
                    doRequest('http://www.hughesmultimedia.com/photography/xml/'+gallery+'.xml', function(res) {
                        if(!res.responseXML) {
                            alert(res.responseText);
                            return;
                        }
    
                        var doc = res.responseXML.documentElement;
                        var _images = doc.getElementsByTagName('PHOTO');
    
                        //displayImages(_images);
                        //return;
    
                        var cont = document.getElementById('galleryCont');
                        while(cont.childNodes.length > 0)
                            cont.removeChild(cont.firstChild);
                        for(var i = 0; i < _images.length; i++) {
                            var li = document.createElement('LI');
                            var a = document.createElement('A');
                                a.href = _images[i].getAttribute('name');
                                a.setAttribute('rel', 'thumbnail');
                                a.setAttribute('title', _images[i].getAttribute('caption'));
                            var img = document.createElement('img');
                                img.src = _images[i].getAttribute('thumb');
                                img.style.width = '75px';
                                img.style.height = '75px';
                            a.appendChild(img);
                            li.appendChild(a);
                            cont.appendChild(li);
                        }
                    });
    
                }
                function displayImages(x) {
                    for (i=0;i<x.length;i++) {
                        document.write('<li>');
                        document.write('<a href="');
                        document.write(x[i].getAttribute("name"));
                        document.write('" rel="thumbnail" title="');
                        document.write(x[i].getAttribute("caption"));
                        document.write('"><img src="');
                        document.write(x[i].getAttribute("thumb"));
                        document.write('" style="width: 75px; height: 75px" /></a></li>');
                    }
                }
    
                window.onload = function() {
                    loadalbum('test');
                }
            </script>
        </head>
        <body>
            
            <ul id="galleryCont"><li>Loading Gallery</li></ul>
    
        </body>
    </html>


  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you gRoberts for your help !


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
  •