SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Location
    High Wycombe, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    RFI: How to include HTML fragment on a page ( prototype.js ?)

    Calling AJAX experts.....

    I'm trying to embed an HTML fragment from one web page into another web page, using AJAX (as the fragment will change frequently). I'm using prototype.js for AJAX, but I'm a real newbie at this, so please be patient

    I've managed to fetch the HTML content of the slave page, but I can't figure out how to get just the part I want from the XML string returned in the AJAX request. The prototype.js AJAX function just returns a text sttring that I need to parse...but how?

    Child Page: hello.html
    Code HTML4Strict:
    <html>
    <head>
    </head>
    <body>
     
    <div id="source_content">
         <h1>Hello</h1>
    </div>
     
    </body>
    </html>


    I want to include the <h1>Hello</h1> in the parent page.


    Parent page: demo.html

    Code JavaScript:
    <html>
    <head>
     
    <script src=/js/prototype-1.6.0.3.js></script>
     
    <script language=javascript>
     
    // load the named fragment from the child document
    function get_fragment( url, source_fragment_name, target_fragment_name ) {
     
    	alert ("Loading: " + url );
     
    	new Ajax.Request( url, {
    			method: 'get',
    			onSuccess: function(transport) {
    				alert( transport.responseText );
     
    				// Get the chart out of the Child page;
     
    				var parser=new DOMParser();
    				var resultDoc=parser.parseFromString(transport.responseText,"text/xml");
     
    				if (resultDoc.documentElement.tagName == "parsererror")
    					alert("Parsing Error");
     
    				//--- The following line crashes, and I can't figure out what it's supposed to say.  HELP
    				fragment = resultDoc.getElementByClassName( source_fragment_name );
     
    				alert("Fragment = " + fragment );
     
    				// Load the chart into our page
    				document.getElementById( target_fragment_name ).innerHTML = fragment;
    				},
    			onFailure: function() {
    				alert( "Unable to raise request" )
    				}
    			}
    		);
    }
     
    </script>
     
     
    </head>
     
    <body onload='get_fragment("hello.html", "source_content", "child_content");'>
     
    	<div id="child_content">
    		<h1>Should hardly see this</h1>
    	</div>
     
    </body>
     
    </html>



    Obviously it's the fragment = resultDoc.getElementByClassName( source_fragment_name ); part that I'm having difficulty... It may not even be the right function - HELP.

    The resultDoc=parser.parseFromString(transport.responseText,"text/xml"); seems to work, because the subsequent alert() works fine, but how do I get the page fragment identified by the source_fragment_name.

    The alert("Fragment = " + fragment ); never happens, so the previous line has serious problem.

    So, just to clarify, I simply want to parse the content out of one page, and embed it into another, in real-time, using AJAX.

    If anyone can help I'd be very grateful.

    Thanks
    Last edited by CaptainZ34; Jan 30, 2009 at 07:31. Reason: I figured out how to put code fragment in-line with the question:)

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you are searching for an element with id="source_content"

    So I'd try:
    resultDoc.getElementById("source_content");

    I don't think that getElementByClassName is a native method of a DOMDocument.

    PS this script might have issues in IE as DOMParser isn't native (last time I checked).

  3. #3
    SitePoint Member
    Join Date
    Jan 2009
    Location
    High Wycombe, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Jim

    Still not working, though.

    I've modified the script following your suggestion:

    Code JavaScript:
    var parser=new DOMParser();
    var resultDoc=parser.parseFromString(transport.responseText,"text/xml");
     
    if (resultDoc.documentElement.tagName == "parsererror")
    	alert("Parsing Error");
     
    alert ( "Source String is: \n\n" + transport.responseText + "\n\n" +
    		"Looking for '" + source_fragment_name + "' in " + resultDoc );
     
    //--- The following line returns null - WHY
    fragment = resultDoc.getElementById( "source_content" );
    alert("Big Fragment = " + fragment );
     
    //--- The following line caused the script to fail - WHY
    fragment = resultDoc.getElementById( "source_content" ).innerHTML;
    alert("HTML Fragment = " + fragment );

    The alert following the DOMParser gives

    Code HTML4Strict:
    Source String is: 
     
    <html>
    <head>
    </head>
    <body>
    <div id="source_content">
    <h1>HelloCobber</h1>
    </div>
    </body>
    </html>
     
    Looking for 'source_content' in [object XMLDocument]

    ...so it can obviously see the source_content id, but resultDoc.getElementById doesn't seem able to find it

    Naturally, when I subsequently call resultDoc.getElementById( "source_content" ).innerHTML this fails, and the script crashes.

    So, I guess that I'm using the wrong technique to access the HTML as XML.

    Does the source document need to explicitly state its <DOCTYPE>?

    Confused

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Location
    High Wycombe, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I nearly have the solution to this problem....but still one issue.

    The following code successsfully gets the textContent from the XML element:

    Code JavaScript:
    // load the named fragment from the child document
    function get_fragment( url, source_fragment_name, target_fragment_name ) {
    	var message;
     
    	new Ajax.Request( url, {
    			method: 'get',
    			onSuccess: function(transport) {
     
    				// Get the fragment out of the Child page;
     
    				var parser=new DOMParser();
    				var resultDoc=parser.parseFromString(transport.responseText,"text/xml");
     
    				if (resultDoc.documentElement.tagName == "parsererror")
    					alert("Parsing Error");
     
    				alert ( "Source String is: \n\n" + transport.responseText + "\n\n" +
    						"Looking for '" + source_fragment_name + "' in " + resultDoc );
     
     
    				divs = resultDoc.getElementsByTagName( "div" );
    				for each( div in divs ) {
    					if ( div != undefined ) {
    						if ( div.attributes != undefined && div.attributes.getNamedItem("id") != undefined ) {
    							id_value = div.attributes.getNamedItem("id").value;
     
    							if ( id_value == source_fragment_name ) {
     
    								fragment = div.textContent;
    								break;
    							}
    						}
    					}
    				}
     
    				// Load the chart into our page
    				document.getElementById( target_fragment_name ).innerHTML = fragment;
    				},
    			onFailure: function() {
    				alert( "Unable to raise request" )
    				}
    			}
    		);
    }

    However fragment = div.textContent strips out the HTML tags from the div and I want the foll content of the div. I need something like innerHTML but I can't find anything.

    Input document is:
    Code HTML4Strict:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "XML URL removed because SitePoint won't let me post it">
     
    <html>
    <head>
    </head>
    <body>
     
    	<div id="parentnode">
    		<h1>hgsfdhgksdfhg</h1>
    		<div id="source_content">
    			<h1>HelloCobber</h1>
    		</div>
    	</div>
    </body>
    </html>
    Can you help?

    Thanks.

    PS: getElementByID() onlyworks if you have a full XML definition for the document, and for some reason it didn't work for me. Perhaps the DOCTYPE on the child was missing or incomplete. This is why I've parsed out the desired element, but I the missing HTML tags from textContent is a documented feature

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You should be able to use DOMParser to convert the string to an XML object.
    See https://developer.mozilla.org/en/DOMParser for info about it and http://www.captain.at/howto-javascri...-to-string.php for how to do it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •