xmlhttprequest question

[spark]

I have been experimenting with xmlhttprequest. (I am a javascript
newbie, but familiar with programming with VB, Perl, and some PHP.) I
am trying to see if it's possible to receive html snippets back from a
request, and then insert that snippet into the target page; for example,
getting back a set of <ul> lists within lists, or a set of <option>
tags, which could then be added to a page's extent lists, or to select
inputs.

I'm trying to do this by setting the content-type header in the returned
data to text/xml, and I'm able to insert the nodes into the target page;
but then they will not be formatted with any css page I may have set
within the target page. Taking the aforementioned <ul> list, if the
target page references a css page with some layout rules for ul, the
inserted <ul> nodes aren't formatted using these rules.

Here's my code:

if (xmlhttp) {
xmlhttp.open("GET", "[command]",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
var insertHere = document.getElementById('writeroot');
var respDoc = xmlhttp.responseXML;
insertHere.parentNode.insertBefore(respDoc.childNo des
[0].cloneNode(true),insertHere);
}
}
}

If anyone has any suggestions for a different way to do this, I'd be
very grateful. (I'm trying to do it this simply, that is, just insert
nodes from a request result into the target page. My hope is to avoid
writing extra list-parsing logic on the client side of my app.)

[Martin Honnen]

spark wrote:

I have been experimenting with xmlhttprequest. (I am a javascript
newbie, but familiar with programming with VB, Perl, and some PHP.) I
am trying to see if it's possible to receive html snippets back from a
request, and then insert that snippet into the target page; for example,
getting back a set of <ul> lists within lists, or a set of <option>
tags, which could then be added to a page's extent lists, or to select
inputs.

I'm trying to do this by setting the content-type header in the returned
data to text/xml, and I'm able to insert the nodes into the target page;
but then they will not be formatted with any css page I may have set
within the target page. Taking the aforementioned <ul> list, if the
target page references a css page with some layout rules for ul, the
inserted <ul> nodes aren't formatted using these rules.
Make sure you send elements in the XHTML namespace e.g.
<ul xmlns="http://www.w3.org/1999/xhtml">
<li>Kibo</li>
</ul>
then with Mozilla you can do:

if (xmlhttp) {
xmlhttp.open("GET", "[command]",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
var insertHere = document.getElementById('writeroot');
var respDoc = xmlhttp.responseXML;
insertHere.parentNode.insertBefore(respDoc.childNo des
[0].cloneNode(true),insertHere);

insertHere.parentNode.insertBefore(
insertHere.ownerDocument.importNode(respDoc.docume ntElement, true),
insertHere
);

That should then also work with other browsers having a common DOM
implementation for HTML and XML but with IE/Win that approach is not
possible, IE doesn't have an XML DOM implementation but uses MSXML to
parse XML and you can't move nodes from the MSXML XML DOM implementation
to the IE HTML DOM implementation. So with IE you are left to using
responseText and insert that e.g.
someElement.innerHTML = xmlhttp.responseText;
or
someElement.insertAdjacentHTML('beforeEnd', xmlhttp.responseText);
or you would need to write importNode for IE e.g. walk the MSXML XML DOM
and create all nodes as needed in the IE HTML DOM. But for instance the
Sarissa project suggests that IE with innerHTML performs better than an
attempt to implement importNode with DOM createXXX method calls so there
importNode is "implemented" by creating a div, setting its innerHTML and
then using the child nodes.

The Sarissa project is here:
<http://sarissa.sourceforge.net/>
--

Martin Honnen
http://JavaScript.FAQTs.com/

[spark]

In article <42***********************@newsread2.arcor-online.net>,
ma*******@yahoo.de says...

Make sure you send elements in the XHTML namespace e.g.
<ul xmlns="http://www.w3.org/1999/xhtml">
<li>Kibo</li>
</ul>
then with Mozilla you can do:

[example code snipped]
That should then also work with other browsers having a common DOM
implementation for HTML and XML but with IE/Win that approach is not
possible, IE doesn't have an XML DOM implementation but uses MSXML to
parse XML and you can't move nodes from the MSXML XML DOM implementation
to the IE HTML DOM implementation.

Thanks Martin!!

Actually I'm not too concerned (at the moment at least) about IE, as the
app I'm writing will not be available on a public webpage, and so I'm
focusing my development on firefox only.

I have an additional question. I put the namespace declaration into my
returned doc, and now the ul list, and the ul lists within it, are all
formatted as html. However, this particular ul list was set up in my
css sheet as _drop down menus_ - in other words, the top (or root) ul
menu is displayed horizontally, and all ul list below the top are
invisible ( display: none; ) until the user hovers the cursor over an
item in the top list; and a few other effects. And this additional css
stuff is missed entirely. So it appears that the namespace has some
basic formatting commands, but not others. I tried placing a reference
to my stylesheet into the returned xml doc ( <?xml-stylesheet .. ?> ),
but that doesn't seem to work. Are there different namespaces I can
include that might give me the desired formatting? Is there a webpage
where I can view available public namespaces? Or is there a better way
to refer to my stylesheet? Or would I have to recreate my stylesheet as
an XML schema of some kind (I see on http://www.w3.org/TR/REC-xml-names/
that sometimes a namespace is declared via reference to a schema?)?

Thanks again!

[spark]

In article <MP***********************@news-central.giganews.com>,
[e-mail] says...

In article <42***********************@newsread2.arcor-online.net>,
ma*******@yahoo.de says...

Make sure you send elements in the XHTML namespace e.g.
<ul xmlns="http://www.w3.org/1999/xhtml">
<li>Kibo</li>
</ul>
then with Mozilla you can do:

[example code snipped]

That should then also work with other browsers having a common DOM
implementation for HTML and XML but with IE/Win that approach is not
possible, IE doesn't have an XML DOM implementation but uses MSXML to
parse XML and you can't move nodes from the MSXML XML DOM implementation
to the IE HTML DOM implementation.

I have an additional question.

[snip] So it appears that the namespace has some
basic formatting commands, but not others.

You know what, I goofed. I had no reference in my experimental document
to the css sheet I was talking about. Once I put that reference in, the
inserted xml/html doc was formatted correctly.

So - thank again Martin!