Loading ...
Sorry, an error occurred while loading the content.
 

webkit - problem with appendChild

Expand Messages
  • krugerboy1971
    Hi List, I m getting an error from webkit browsers when trying to addChild on an external xml file The error message is: Error: WRONG_DOCUMENT_ERR: DOM
    Message 1 of 9 , May 26, 2010
      Hi List, I'm getting an error from webkit browsers when trying to addChild on an external xml file

      The error message is:

      Error: WRONG_DOCUMENT_ERR: DOM Exception 4

      The external svg/xml is simply this:

      <?xml version="1.0" encoding="UTF-8" ?>
      <g xmlns="http://www.w3.org/2000/svg" id="xmlobjects">
      <rect x="20" y="50" width="200" height="100"/>
      </g>

      I am using XMLHttpRequest to load (which seems fine), the error seems to be when appending the above content to the DOM

      var myTarget = svgDoc.getElementById("targetLayer");
      myTarget.appendChild(node);

      It works perfectly in FF, Opera - is this a known issue with webkit - are there any workarounds?
    • Dr. Clue
      Howdy Krugerboy You probably need to use a reference to the document object you loaded to create the new element as opposed to trying to use the main page
      Message 2 of 9 , May 26, 2010
        Howdy Krugerboy

        You probably need to use a reference to the document object you loaded
        to create the new element as opposed to trying to use the main page
        document object to create the element

        --Doc


        On Wed, 2010-05-26 at 20:19 +0000, krugerboy1971 wrote:
        > Hi List, I'm getting an error from webkit browsers when trying to addChild on an external xml file
        >
        > The error message is:
        >
        > Error: WRONG_DOCUMENT_ERR: DOM Exception 4
        >
        > The external svg/xml is simply this:
        >
        > <?xml version="1.0" encoding="UTF-8" ?>
        > <g xmlns="http://www.w3.org/2000/svg" id="xmlobjects">
        > <rect x="20" y="50" width="200" height="100"/>
        > </g>
        >
        > I am using XMLHttpRequest to load (which seems fine), the error seems to be when appending the above content to the DOM
        >
        > var myTarget = svgDoc.getElementById("targetLayer");
        > myTarget.appendChild(node);
        >
        > It works perfectly in FF, Opera - is this a known issue with webkit - are there any workarounds?
        >
        >
        >
        > ------------------------------------
        >
        > -----
        > To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
        > -or-
        > visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
        > ----Yahoo! Groups Links
        >
        >
        >
      • Holger Jeromin
        ... The external Node seems to be not in the right document. Try if (svgDoc.importNode) svgDoc.importNode(node, true); ... Firefox and Opera are wrong, this
        Message 3 of 9 , May 31, 2010
          krugerboy1971 schrieb am 26.05.2010 22:19:
          > Hi List, I'm getting an error from webkit browsers when trying to addChild on an external xml file
          >
          > The error message is:
          >
          > Error: WRONG_DOCUMENT_ERR: DOM Exception 4
          >
          > The external svg/xml is simply this:
          >
          > <?xml version="1.0" encoding="UTF-8" ?>
          > <g xmlns="http://www.w3.org/2000/svg" id="xmlobjects">
          > <rect x="20" y="50" width="200" height="100"/>
          > </g>
          >
          > I am using XMLHttpRequest to load (which seems fine), the error seems to be when appending the above content to the DOM
          >
          > var myTarget = svgDoc.getElementById("targetLayer");
          > myTarget.appendChild(node);

          The external Node seems to be not in the right document.
          Try

          if (svgDoc.importNode)
          svgDoc.importNode(node, true);

          > It works perfectly in FF, Opera - is this a known issue with webkit - are there any workarounds?

          Firefox and Opera are wrong, this appendChild should be not allowed.

          --
          regards
          Holger
        • Erik Dahlstrom
          On Mon, 31 May 2010 10:01:09 +0200, Holger Jeromin ... I d like to see the full example before coming to that conclusion, but I agree that
          Message 4 of 9 , Jun 3, 2010
            On Mon, 31 May 2010 10:01:09 +0200, Holger Jeromin <mailgmane@...>
            wrote:

            > krugerboy1971 schrieb am 26.05.2010 22:19:
            >> Hi List, I'm getting an error from webkit browsers when trying to
            >> addChild on an external xml file
            >>
            >> The error message is:
            >>
            >> Error: WRONG_DOCUMENT_ERR: DOM Exception 4
            >>
            >> The external svg/xml is simply this:
            >>
            >> <?xml version="1.0" encoding="UTF-8" ?>
            >> <g xmlns="http://www.w3.org/2000/svg" id="xmlobjects">
            >> <rect x="20" y="50" width="200" height="100"/>
            >> </g>
            >>
            >> I am using XMLHttpRequest to load (which seems fine), the error seems
            >> to be when appending the above content to the DOM
            >>
            >> var myTarget = svgDoc.getElementById("targetLayer");
            >> myTarget.appendChild(node);
            >
            > The external Node seems to be not in the right document.
            > Try
            >
            > if (svgDoc.importNode)
            > svgDoc.importNode(node, true);
            >
            >> It works perfectly in FF, Opera - is this a known issue with webkit -
            >> are there any workarounds?
            >
            > Firefox and Opera are wrong, this appendChild should be not allowed.

            I'd like to see the full example before coming to that conclusion, but I
            agree that it sounds a bit strange.

            Are you using XMLHttpRequest to fetch the file from a server, or is it
            just running locally from your filesystem?

            Cheers
            /Erik

            --
            Erik Dahlstrom, Core Technology Developer, Opera Software
            Co-Chair, W3C SVG Working Group
            Personal blog: http://my.opera.com/macdev_ed
          • krugerboy1971
            Erik/Holger/Dr.Clue Thanks for your replies... Firstly, I ve just been testing this with some locally stored xml content (in fact, final product is likely to
            Message 5 of 9 , Jun 4, 2010
              Erik/Holger/Dr.Clue

              Thanks for your replies...

              Firstly, I've just been testing this with some locally stored xml content (in fact, final product is likely to be available on dvd/usb stick as well as online, so it's important this can work both ways).

              the external rect.xml file simply contains this as a test case:

              <?xml version="1.0" encoding="UTF-8" ?>
              <g xmlns="http://www.w3.org/2000/svg" id="xmlobjects">
              <rect x="20" y="50" width="200" height="100"/>
              </g>

              My full code is as below ("targetLayer" is a blank <g> element within the source svg file):

              //INTERNAL GLOBALS
              var svgDoc = document;//reference to SVG document

              function init() {
              getData("rect.xml");

              }

              function getData(myUrlString) {
              //call getURL() if available, case ASV3, ASV6 and Batik
              if (window.getURL) {
              getURL(myUrlString,getURLCallback);
              }
              //call XMLHttpRequest() if available, case MozillaSVG
              else if (window.XMLHttpRequest) {


              function XMLHttpRequestCallback() {

              if (xmlRequest.readyState == 4) {

              // if (xmlRequest.status == 200) {//i've commented this out as it's only required if a server is used...

              addGeom(xmlRequest.responseXML.documentElement);
              //}
              }
              }
              var xmlRequest = null;
              xmlRequest = new XMLHttpRequest();
              xmlRequest.open("GET",myUrlString,true);
              xmlRequest.onreadystatechange = XMLHttpRequestCallback;
              xmlRequest.send(null);
              }
              //write an error message if either method is not available
              else {
              alert("your browser/svg viewer neither supports window.getURL nor window.XMLHttpRequest!");
              }
              }

              function getURLCallback(data) {
              //check if data has a success property
              if (data.success) {
              //parse content of the XML format to the variable "node"
              var node = parseXML(data.content, document);
              addGeom(node);
              }
              else {
              alert("something has gone horribly wrong...");
              }
              }

              function addGeom(node) {
              var myContent = node.firstChild.nextSibling;
              var myTarget = svgDoc.getElementById("targetLayer");
              myTarget.appendChild(myContent);
              }
            • israel_eisenberg
              Holger Jeromin already gave you the correct answer,try to implement it like so: function addGeom(node) { node = svgDoc.importNode(node, true); var
              Message 6 of 9 , Jun 4, 2010
                Holger Jeromin already gave you the correct answer,try to implement it
                like so:
                function addGeom(node) { node = svgDoc.importNode(node, true); var
                myContent = node.firstChild.nextSibling; var myTarget =
                svgDoc.getElementById("targetLayer");
                myTarget.appendChild(myContent);}
                Regards,Israel


                [Non-text portions of this message have been removed]
              • krugerboy1971
                Yup, working nicely now Israel (and of course Holger!). One of those occasions when FF/Opera doing what I asked was confusing me into thinking it was a webkit
                Message 7 of 9 , Jun 5, 2010
                  Yup, working nicely now Israel (and of course Holger!). One of those occasions when FF/Opera doing what I asked was confusing me into thinking it was a webkit bug.

                  Cheers

                  A

                  --- In svg-developers@yahoogroups.com, "israel_eisenberg" <owlgems@...> wrote:
                  >
                  >
                  > Holger Jeromin already gave you the correct answer,try to implement it
                  > like so:
                  > function addGeom(node) { node = svgDoc.importNode(node, true); var
                  > myContent = node.firstChild.nextSibling; var myTarget =
                  > svgDoc.getElementById("targetLayer");
                  > myTarget.appendChild(myContent);}
                  > Regards,Israel
                  >
                  >
                  > [Non-text portions of this message have been removed]
                  >
                • krugerboy1971
                  There is always an exception! Thanks to help from the folks on the forum, appendChild on external document elements now working nicely in everything - apart
                  Message 8 of 9 , Jun 7, 2010
                    There is always an exception! Thanks to help from the folks on the forum, appendChild on external document elements now working nicely in everything - apart from Chrome - which seems to be struggling with the XMLHttpRequestCallback function below - anyone have any suggestions for what's causing the problem? Could it be because I am dealing with local files only during testing?

                    if (window.XMLHttpRequest) {



                    function XMLHttpRequestCallback() {

                    //in this example we are only interested in the complete transaction (readyState 4)
                    if (xmlRequest.readyState == 4) {

                    // if (xmlRequest.status == 200) {//i've commented this out as it's only required if a server is used and I am loading local files during testing...
                    addGeom(xmlRequest.responseXML.documentElement);
                    //}
                    }
                    }
                    var xmlRequest = null;
                    xmlRequest = new XMLHttpRequest();
                    xmlRequest.open("GET",myUrlString,true);
                    xmlRequest.onreadystatechange = XMLHttpRequestCallback;
                    xmlRequest.send(null);
                    }
                  • israel_eisenberg
                    ... Yes. Regards, Israel
                    Message 9 of 9 , Jun 8, 2010
                      --- In svg-developers@yahoogroups.com, "krugerboy1971" <alan.smithy@...> wrote:
                      >
                      >...Could it be because I am dealing with local files only during testing?

                      Yes.

                      Regards,
                      Israel
                    Your message has been successfully submitted and would be delivered to recipients shortly.