SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update dom from xml

    I have written some code that is meant to parse an xml file and put the elements from the xml dom to the document's dom. I thought it might be as easy as saying
    Code:
    document.getElementById('replaceme').innerHTML = '';
    document.getElementById('replaceme').appendChild(xmlNode);
    But it turns out that is not the case. So I have made an elaborate script that creates the elements manually and sets their attributes according to the attributes of the xml document.

    I have noticed a strange behaviour with short tags, where the firstChild.data is empty. If I put a single space and have the full tag, it works ok.

    examples:
    single space added ( correct behaviour )
    http://www.antzcode.com/dom/spaces.htm
    http://www.antzcode.com/dom/spaces.xml

    Empty tags ( no space )

    http://www.antzcode.com/dom/empty.htm
    http://www.antzcode.com/dom/empty.xml

    the code:
    http://www.antzcode.com/dom/AntzUpdateDom1.js

    Any help is greatly appreciated, as it will greatly enhance my potential with OOP PHP if I can get it to work properly.

  2. #2
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Call me stupid, but why not go
    Code:
    document.getElementById('replaceme').innerHTML = dom.ajax.responseText;
    ?
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  3. #3
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out some tutorials on XSLT
    XSLT is generally used to transform XML to HTML.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think XSLT is just another level of complication that is not really needed here. I'm really close with the approach I have taken, except for this one problem, which is due to the empty tags - What I need is to know why this is happening, and how to fix it.

    Mr moo, that is essentially what I want to do, except I want to send replacements for several elements in the same document. So I need to do this:
    Code:
    var xml = ajax.responseXML;
    for(var i=0; i<xml.childNodes.length; i++){
        var el = xml.childNodes[i];
        document.getElementById(el.getAttribute('id')).innerHTML = el.innerHTML;
    };
    I wish it was that simple, but the el.innerHTML does not work on xml objects. Perhaps someone knows a way to get the contents of an xml element as a string? That may do it.

  5. #5
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I recall correctly, in IE you can use innerXML. I don't remember off-hand how you get the inner xml of a node in FF or the others, but I'm know there's a way.
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a solution, so I thought it is best to share it in case anyone finds this post relevant to their problem one day.

    I ended up using json, via Cesar D. Rodas' JSON class to serialise a php object into a json object. The JSON class is available from phpclasses.org : http://www.phpclasses.org/browse/package/4205.html

    So this is my methodology:

    *index.html contains some divs with id's "time", "content" and "table".
    *AntzDom.js contains definition for a class called AntzDom, posted below for resource.
    *Onload instructs AntzDom.init to set an interval for checking updates.php for updates to the page
    *Updates.php echos a JSON serialized object for AntzDom to evaluate.
    *Parts of the page with relevant Id's are updated

    [h1]Resources[/h1]

    [h2]AntzDom.js[/h2]
    Code JavaScript:
    var AntzDom = {
        init : function(url){
            this.interval = setInterval('AntzDom.update()', 5000);
            this.ajaxUrl = url;
            if (window.XMLHttpRequest) { 
                this.ajax = new XMLHttpRequest();
            } else if (window.ActiveXObject) { 
                this.ajax = new ActiveXObject("Microsoft.XMLHTTP");
            };
        },
     
        update : function(){
            this.ajax.open('POST', this.ajaxUrl);
            this.ajax.onreadystatechange = AntzDom.parseUpdate;
            this.ajax.send(null);
        },
     
        parseUpdate : function(){
            //alert('status: '+AntzDom.ajax.status+' - state: ');
            if(AntzDom.ajax.readyState == 4){
                if(AntzDom.ajax.status == 200){
                    var content = eval ( "(" + AntzDom.ajax.responseText  +")");
                    //alert(content.els.length);return;
                    AntzDom.parseUpdates(content);
                };
            };
        },
     
        parseUpdates : function(obj){
            for(var i=0; i<obj.els.length; i++){
                //alert(i+' - obj.name: '+obj.els[i].name+' obj.content: '+obj.els[i].content);
                if(document.getElementById(obj.els[i].id)){
                    document.getElementById(obj.els[i].id).innerHTML = obj.els[i].innerHTML;
                };
            };
        }
     
     
    }

    [h2]AntzDom.php[/h2]
    Code PHP:
     
    class AntzDom {
        protected $els = array();
        public function add($name, $content)
        {
            $this->els[$name] = $content;
        }
     
        public function fetchJson()
        {
            $object = new AntzObject;
            $object->els = array();
            $count = 0;
            foreach($this->els as $k=>$v){
                $object->els[$count] = new AntzObject;
                $object->els[$count]->id = $k;
                $object->els[$count]->innerHTML = $v;
                $count++;
            };
            $json = new JSON;
            return $json->serialize($object);
    //        return json_encode($object);
        }
    }
     
    class AntzObject {
     
    }

    [h2]update.php[/h2]
    Code PHP:
    include('AntzDom.php');
     
    $dom = new AntzDom;
    $dom->add('time', date('H:ia d M Y'));
     
    $table = '<table border=1><tr><td>hello</td><td>there</td></tr><tr><td>hello</td><td>there</td></tr></table>';
    $dom->add('table', $table);
     
     
    $dom->add('comment', 'some content');
    die($dom->fetchJson());

    [h2]index.html[/h2]
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <script type="text/javascript" src="AntzDom.js"></script>
      </head>
      <body onload="AntzDom.init('update.php')">
      <div id="time">time</div>
      <div id="comment">comment</div>
      <div id="table">table</div>
      </body>
    </html>


    Therefore, with JSON a simple task is rather simple indeed.


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
  •