Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    svg-elements in xml via XHR, putting a single element as an inline code to html5

    Code below. 20 svg-elements within a XML-document got from a server via asynchrounous XMLHttpRequest, put into the table svgs (svgs.length == 20, OK). I'd like to put one randomly selected svg-element from the table to html5-page as a inline code. So I think I would need to have single svg -element as a string, which could be inserted to the html5-page. How to do this? And yes, I know that with innerHTML or with jQuery's .load()-method, but what I should the give as a parameter?

    Code:
    function showImage() {
    
    if(xhr.readyState == 4){
    
    if(xhr.status == 200){
    
    if(xhr.responseXML && xhr.responseXML.childNodes.length > 0){
    res = xhr.responseXML;
    svgs = res.getElementsByTagName("svg");
    alert(svgs.length);
    
    }else{ 
    document.getElementById('container').innerHTML = xhr.responseText; 
    }
    }else{
    $('#container').load(toText(xhr.status));
    } 
    }
    }

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    144
    Thanks
    11
    Thanked 7 Times in 7 Posts
    On a hunch, I wonder if a problem exists when your code attempts to access elements by tagname from a returned text-stream that has not yet been deserialized into nodes.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    there is no command to get the source of XML nodes. (they are killing XMLSerializer soon)


    you MIGHT be able to simply grab the node and append it to your HTML element.
    you might need to use importNode depending on the strictness in use.

    otherwise maybe a temp div will work?


    Code:
    var d=document.createElement("div")
    d.appendChild(res.getElementsByTagName("svg")[0]);
    
    alert(d.innerHTML);
    or, the worst-case:
    Code:
    var d=document.createElement("div")
    d.innerHTML=res.responseText;
    
    var svg1=d.getElementsByTagName("svg")[0];
    
    alert(svg1.outerHTML);
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Tags for this Thread

    Posting Permissions

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