How can I retrieve XML and display it in HTML according to a condition?

[Kholood Ali]

Hi, I want to retrieve XML content according to specified tags.
A user will click on a list item (links) on the left, and the corresponding XML content will appear.
ex. click on "Coach Home", then content of coach will appear on the left frame.

the xml is described as follows:

<title>Coach Home</title>

<titleContent>
bla bla bla 
</titleContent>

is there a conditional statement I can place? where? according to what?

[Dormilich]

do you want to do that by JavaScript or any other Programming Language?

the left part looks like a tree view (there are some libraries around, I think), although it is possible to write that on your own.

the right part is much easier (but depends a bit on the "menu"), because it’s basicly a DOM access to the specified node.

[Kholood Ali]

yes i want to use Javascript, but i dont know how to do that to specify display of the content. the left part (frame) is a menu retrieved from an XML file shown above. i need the script to enable me to view the content of whatever title clicked on! (the content will appear on the right frame).
any idea?

[Dormilich]

does that mean you already have the menu part?

[Kholood Ali]

yes i have it retrieved from an xml file! this is my xml:

<title>main</title>
<titleContent>.....</titleContent>

<title>coach home</title>
<titleContent>....<titleContent>

now i have already retrieved the <title>s and put them in a menu on the left, i want my website to react to user's click on a menu item, and according to what the user clicks on, it retrieves the suitable xml <titleContent > on the right frame..
i have put this code:

xmlDoc.load("helpXML.xml");
 
var x=xmlDoc.getElementsByTagName("titleContent");

for (var i=0;i<x.length;i++)
{ 
document.write("<span class=\"mystyle\">"+x[i].childNodes[0].nodeValue+"</span>");
document.write("<br/>");
}

this displays the contents on the right frame, BUT all of the contents together!
i want to display only the content of the title that the user clicks on..

[Dormilich]

this displays the contents on the right frame, BUT all of the contents together!

well, that’s what you told it to do …

what you need to do is tie the link in the menu to the appropriate XML tag. in your case I guess that’d be the index number of the XML tag concerned. how to do that depends on how you build the menu.

[jkmyoung]

One possible way would be to pre-populate each of the contents in it's own div, but set to hidden. Each div has a specific id. Then using an onclick function, which passes in a corresponding id, you would hide all of the divs in that area, and unhide the div with given id.

Regarding setting id: Are the title and titleContent nodes proper children of containing parents, or are all of those nodes in the same parent?

[Kholood Ali]

One possible way would be to pre-populate each of the contents in it's own div, but set to hidden. Each div has a specific id. Then using an onclick function, which passes in a corresponding id, you would hide all of the divs in that area, and unhide the div with given id.

Regarding setting id: Are the title and titleContent nodes proper children of containing parents, or are all of those nodes in the same parent?

Dormilich: can you please elaborate on using the index? I dont know how to do that! my menu is a simple retrieve function from the xml using a for loop

var x=xmlDoc.getElementsByTagName("title"); 
 
for (var i=0;i<x.length;i++)

{ 
document.write("<a href="+' " '+"b_frame.html"+' " '+"target=\"b\">");
document.write(x[i].childNodes[0].nodeValue);
document.write("</a>");
document.write("<br/>");
}

and my xml:

<title>Register</title>

<titleContent>
Leaving a blank field in the register form is not acceptable by the system. The cursor will be placed at the username field for you to re-enter the values.
“Home” will take you back to the previous page (Main) and “Exit” will leave the system.
</titleContent>


<title>Coach Home</title>

<titleContent>
The Coach Home contains all the tasks a coach needs to perform. The name of the contents.
</titleContent>

so i will just retrieve the titles and display them as links on the left..

jkmyoung: they are currently under one parent. do you think i should put them under a separate parent for each title? i have almost 30 titles!

[jkmyoung]

It would be easier if you put it under the parent nodes; Then you could get the parent nodes, and from that more easily link the title to the titleContent node.

Unfortunately, the support for parent() or next_sibling() is lacking on older browsers.

Since you're using i as an index, have the parent node have a onclick="runfun ction(i)" attribute
where runfunction(id) is a function which displays only the div you want to display.

While you're processing the titlenode, create a div for the titleContent, and add it to a string variable, which you add to the page at the very end.

For each title, add something like "<div id="+i+">"
node titleContent = y=get_nextsibli ng(x[i]);
.. contents of titleContent
</div>

[Kholood Ali]

It would be easier if you put it under the parent nodes; Then you could get the parent nodes, and from that more easily link the title to the titleContent node.

Unfortunately, the support for parent() or next_sibling() is lacking on older browsers.

Since you're using i as an index, have the parent node have a onclick="runfun ction(i)" attribute
where runfunction(id) is a function which displays only the div you want to display.

While you're processing the titlenode, create a div for the titleContent, and add it to a string variable, which you add to the page at the very end.

For each title, add something like "<div id="+i+">"
node titleContent = y=get_nextsibli ng(x[i]);
.. contents of titleContent
</div>

Thank you guys, I will try my best to do this, and if I do not succeed, I will ask again (You would hopefully reply (a))