www.webdeveloper.com
Results 1 to 6 of 6

Thread: CDATA in Script and Style Elements Recovered in Parsed XML with Ajax

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    66

    CDATA in Script and Style Elements Recovered in Parsed XML with Ajax

    1. I have one Main.HTML document (is a "modular" chemistry calculator) which does Ajax requests to load in XHMTL documents (each has a single external JS file too) which are parsed in the xmlResponse property of the XML HTTP request object.

    2. Each XHTML document (as a module) is also a valid loadable document on its own: the Main.HTML is just incorporating multiple functionalities with Main.HTML as an interface.

    3. Some XHTML modules/documents have dynamically configured content at load time, through the onload attribute of the body element

    HTML Code:
    <body onload="finishDocument();">
    4. These XHTML documents also contain in their head elements: one script element and one style element.

    When the Ajax request completes and the xmlResponse contains the DOM tree, the onload handler is executed, which is nice. It is supposed call a function in the script element contained in the head element, but there is an error that the function finishDocument() is not defined.

    In other words, the CDATA in the script element of the document tree returned by Ajax and parsed for XML is not converted to source in the global execution scope.

    What am I missing?

  2. #2
    Join Date
    Jul 2011
    Posts
    24
    which are parsed in the xmlResponse property

    what does that mean?
    how is it "parsed"?

  3. #3
    Join Date
    Jul 2010
    Posts
    66
    Quote Originally Posted by DaveyErwin View Post
    which are parsed in the xmlResponse property

    what does that mean?
    how is it "parsed"?

    I have attached a screen capture (image below) that shows the document loaded in the browser with a Firebug interface.

    Firebug is showing one of the XHTML (module) documents loaded, obtained by a request with Ajax.

    If the XHTML were at all invalid, the XML parser in Firefox would have shown an error and not put the DOM tree into the xmlResponse property of the request object.

    But since it was valid, it shows the parsed document in color-highlighted and indented style

    Note that there is one SCRIPT element contained by the HEAD element, and that script contains a function defined finishDocument().

    Note also that the BODY element has an ONLOAD attribute calling finishDocument().

    When the Ajax request completes, and the XML parser finished, an onload event is triggered. The function finishDocument is thus called, but there is an error that it is not defined.

    This means that the contents (CDATA) of the script element did not become part of the global scope in the execution context of the document.

    Why not? How can it be done?


    screencap.png

  4. #4
    Join Date
    Jul 2011
    Posts
    24
    The xml doc is a
    seperate entity
    from the html/xhtml
    doc the html doc
    wont run javascript
    that is in the xml doc

    can you build a very
    simplified html that
    loads an external file
    that contains javascript ?

    the XMLHttpRequest object
    is not normally useful for
    loading complete html/xhtml
    docs

    I would be interested to see
    a simple example of script
    being executed that is located
    in a complete html/xhtml doc
    that is loaded by the XMLHttpRequest
    as i beleive this is not possible
    unless you create a script element
    in the calling doc and then populate
    it with the script from the loaded
    doc
    Last edited by DaveyErwin; 09-20-2012 at 02:20 PM.

  5. #5
    Join Date
    Jul 2011
    Posts
    24
    Quote Originally Posted by DaveyErwin View Post
    I would be interested to see
    a simple example of script
    being executed that is located
    in a complete html/xhtml doc
    that is loaded by the XMLHttpRequest
    as i beleive this is not possible
    unless you create a script element
    in the calling doc and then populate
    it with the script from the loaded
    doc
    I should have said ...

    I would be interested to see
    a simple example of script
    being executed that is located
    in a complete html/xhtml doc
    that is loaded by the XMLHttpRequest

    After the Calling Page is Ready

    as i beleive this is not possible
    unless you create a script element
    in the calling doc and then populate
    it with the script from the loaded
    doc

    if you run the XMLHttpRequest
    before window.onload fires and
    include the response in the calling
    page with document.write the javascript
    contained therein Will execute

  6. #6
    Join Date
    Jul 2010
    Posts
    66
    Here's what I was doing

    The Main HTML ("module aggregator"?) would actually include one JS file for every module to be included.

    HTML Code:
    <-- Main.html markup -->
    <html>
    .
    .
    <script src="module.js" type="text/javascript"></script>
    .
    .
    </html>
    This Module.JS file would contain an object with some required methods for a separate ModuleManager.JS (not shown) file which registers each module, initializes or other controls the activation of the module. The Module.JS contains as well its own specific code for the module and playing with its own XHTML markup. Note in particular that the registration process would contain a .registerModule() method, and that method contained code to build an XML-Http request object and use Ajax to retrieve the file as XML object.

    Code:
    /*  Module.JS */
    
    ModuleName = {
       registerModule : function () {
        ModuleManager.registerModule(ModuleName, "/path/to/Module.xhtml");
        // other registration code
        
       },
       activateModule : function () {
       // code like going from display off (display:none) to display on (display:block)
       }
    };
    
    // Everything wrapped in an object to avoid namespace pollution.  Advice from D. Crockford (?)
    The Module.xhtml document contained the markup to be inserted into the document tree of Main.html.

    But I also had <script> elements inside...probably when I was testing code and not putting it into an external JS file.

    So basically I ran with your suggestion/idea and just took the code of the <script> and put it in Module.JS, as (a) method(s) in that external JS file. I'll debug it from there.

    As for any <style> elements contained in Module.xhtml, I am sure a createStylesheet() DOM call with the CDATA contained will do the job, which I can recover with .getElementsByTagName("style").

    HTML Code:
    <!-- Module.xhtml -->
    <html>
    <head>
    <script type="text/javascript">
       function finishDocument() { ....  }
      // document-level script: used when trying code
      //  moved to Module.JS file above
    </script>
    </head>
    <body onload="finishDocument();">
    .
    .
    </body>
    </html>
    I think that will solve all problems with trying to make a main document interface that acts to provide separable or integrable functionalities.

    The Main.HTML document is a "(Bio)Chemistry Calculator"

    This calculator's modules include

    * how to calculate the volumes and concentrations of chemicals in general
    * how to make dilutions from concentration stocks
    * how to calculate values of importance for scienstists who do PCR (melting temperatures computed from DNA oligonucleotide sequences
    * utilities/tools useful to proteomic scientists doing mass spectrometry
    * computing pH of common buffer solutions and their mixtures
    * preparation of working solutions for casting and polymerizing sodium-dodecyl sulfate polyacrylamide gel electrophoresis (SDS-PAGE) gels

    These modules were motivated because I got tired of answering the questions of university undergraduates (and some graduate students!) in the natural sciences of "how do I make up a 0.2 M solution of sodium phosphate at pH 8.0 if I have phosphoric acid and sodium hydroxide?" or "I have 2 M stock of silver nitrate and I want to make 50 ml of a 0.1 M solution...how do I do it?" These modules compute and give detailed instructions in mostly plain English about how to do just those things.

    I code and re-code (bug-fix or feature-add) continuously, and so you can see why making such a multi-functional "reference calculator" in modular way is important.

    A long time ago, I decided to do things this way rather than learn the nomenclature and API of Windows 32-/64-bit programming and distribution of a Windows app.

    So I try to serve this up with just HTML/CSS/Javascript for those who want a package offline, and also to use HTML/CSS/JS/PHP for what I run off my server.
    Last edited by seniseven; 09-21-2012 at 11:34 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles