Topic: Get the html code inside an xml tag

Hi there!

I am using an xml file to store my html code (inside a 'code' tag) and then spitting it out to the browser. At the client side I need to get to this 'code' node and copy over all the data inside that tag into the innerHTML of a page element. I can't do the copy. innerText, textContent all fail. Can anybody help? I am pasting the xml on the server side and the cml that I get as the result of the ajax call.

server side xml:

<items>
<item>
<id>worldcat</id>
<title>WorldCat</title>
<dropdowntitle>WorldCat</dropdowntitle>
<code>
<div class="interpsearchq" style="margin: 0 0 0 .92em; padding: 0 0 4px 0;">Enter your query:</div>
<div>
<form method="get" action="" style="margin-left: .92em;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><input type="text" name="q" id="q" value="" style="margin: 0 0 0 0;" class="textinterpsearch" /></td>
<td><input type="image" name="__submit" onClick="window.open('https://proxy.library.upenn.edu/login?url=http://newfirstsearch.oclc.org/dbname=WorldCat;screen=advanced;done=referer;logo=http://www.library.upenn.edu/images/penn-banner-oclc.gif;fsip;javascript=true;query='+ document.getElementById('q').value, '_blank');return false;" src="images/common/gowhite.gif" alt="Go" class="gointerpsearch" style="margin: 0 0 0 0;" /></td>
</tr>
</table>
</form>
</div>
</code>
</item>
<items>

now the xml that I get at the client side is everything inside the <item> tag.

Any help will be deeply appreciated.

ankit

(Edited by jainanki on 07-03-2008 23:14)

Looks like what you need is to instanciate a new XMLSerializer() and call the serializeToString( node ) method on it with the CODE node as argument, then inject the result into the innerHTML of the destination element.

Did you choose to have the HTML as a text value in a <[CDATA[ section ]]> you would only need to grab the nodeValue of the CODE node.

In a way it's nice to have the markup of your page in the XML as it means it is valid XML, but unless I miss something this whole XML + innerHTML injection approach doesn't feel right.


Do you mind shedding some light on what it is you're doing and the reason for this approach ?
Oh and the HTML markup itself is meh. A TABLE for layout ... seriously ?


Hope that helps,

Thanks poi.

I thought about the CDATA thing, but you know what, I was stupid not to try that trick out that time itself.
That will be the first thing I am going to try next.

The reason we are doing this is my boss wants to get rid of all the separate html files (right now we have one file for each item) and try to spit out xml using some xslt files. Anyways, thanks for again redirecting me towards CDATA.

ankit

quote:

---

The reason we are doing this is my boss wants to get rid of all the separate html files (right now we have one file for each item) and try to spit out xml using some xslt files.

---

Oh. Does he have big bones and pointy hair ?

Why not using a server side language and a database or XSLT out the bits needed and spit out an xHTML page per product ? Have you tried browsing the site without JavaScript or doing a wget on it ? Your boss might reconsider his decision when he sees the site fall into oblivion in various search engines.

We are creating several widgets using the html (xml) that we get from the server, and we need to operate on the html that we thus get. We need to extract out the title and make it as the title of the tool and also we need to extract out the <id> and <dropdowntitle> tag. I tried doing it in html, but then I could not get the innerHTML for the code tag. The ending tag corresponding to the opening code tag moves up and comes right before the first div. To get rid of this we thought of working in xml.

e.g. If I use this
<item>
<id>test</id>
<title>test</title>
<dropdowntitle>test</dropdowntitle>
<code> <div>askjhfsejhvdjh <input type="text" /></div>
</code>
</item>

var tempdiv = document.createElement('div');
tempdiv.innerHTML = removeInitialLineBreak(removeAmp(searchObject.responseText));
alert(tempdiv.innerHTML);

gives me

<item>
<id>test</id>
<title>test</title>
<dropdowntitle>test</dropdowntitle>
<code> </code>
<div>askjhfsejhvdjh <input type="text" /></div>
</item>


Also we are using the xml to give out the list of all the items using another xslt, so she is thinking that we can shot two birds in one stone.

ankit

Of course it does give you the whole XML's markup since you grab the entire responseText. Here what you need to do to only get the markup of the first CODE node:

var code = yourXhrObject.responseXML.getElementsByTagName('code');
if( !code || !code.length )
{
alert( 'no CODE node' );
return false;
}

var tempdiv = document.createElement('div');
tempdiv.appendChild( code[0] );
alert(tempdiv.innerHTML);
return true;

or

var code = yourXhrObject.responseXML.getElementsByTagName('code');
if( !code || !code.length )
{
alert( 'no CODE node' );
return false;
}

var tempdiv = document.createElement('div');
tempdiv.innerHTML =  (new XMLSerializer()).serializeToString( code[0] ) );

Note that the later will also include the markup of the CODE node itself so you'll certainly need to loop through its children, and maybe use a DocumentFragment.

Also note that your XML markup is invalid. The DIV tag inside the CODE tag isn't closed.



And again, unless this is for a specific web application/widget, I must that this approach doesn't sound right.

HTH,

correction: Both methods will include the CODE tag itself, so loop through its children at some point.

Thanks a lot poi.

The trick that we are using now is that we get the document element, use it to get hold of the CODE node. And then append all the childNodes of the CODE element to a temporary DIV; and later we just say:

document.getElementById(<destid>.innerHTML = <tempdiv>.innerHTML;


ankit

Now, IE is sucking my blood..., everything is working fine in FF (2.0 as well as 3.0).

I am getting the document element for the XML returned from the server and operating over it, but IE seems to give me a problem in appendChild, which I am invoking on the temporary DIV element.

Here is the code for you:

var xmlPage = searchObject.responseXML.documentElement;
var titlenodes = xmlPage.childNodes[getIndex(0)].childNodes[getIndex(1)].childNodes; //This is giving me the TITLE node
var titlediv = document.createElement('body');
var codenodes = xmlPage.childNodes[getIndex(0)].childNodes[getIndex(3)].childNodes; //This is giving me the CODE node
var htmlcodediv = document.createElement('body');

for(ttlcnt=0 ; ttlcnt<titlenodes.length ; ttlcnt++)
{
// 1 means an html Node Element.
if (titlenodes[ttlcnt].nodeType == 1){
titlediv.appendChild(titlenodes[ttlcnt]);
}
// When we have only text title, no need to check for nodeType
if(titlenodes[ttlcnt].nodeType == 3 && titlenodes.length == 1){
titlediv.appendChild(titlenodes[ttlcnt]);
}
}

for(i=0 ; i<codenodes.length ; i++)
{
// 1 means an html Node Element.
if (codenodes[i].nodeType == 1){
htmlcodediv.appendChild(codenodes[i]);
}
}

getElement('search_title_'+count).innerHTML = titlediv.innerHTML;
document.getElementById(div).innerHTML = htmlcodediv.innerHTML;


In IE, the appendChild operation fails...

thanks in advance,
ankit

(Edited by jainanki on 07-08-2008 23:10)

Update:

The two createElements are actually DIVs

var titlediv = document.createElement('div') ;
var htmlcodediv = document.createElement('div') ;

ankit

Would be nice to have a live test page to see what's really going on.

http://ganymede.library.upenn.edu/cocoon/pennpage/html/librarians/ankit/test.html

It is the search tool (I have two instances of the search tool on this page)

If you want to debug with only one instance, try:
http://ganymede.library.upenn.edu/cocoon/pennpage/html/librarians/ankit/ank.html

ankit