Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Xml DHTML and DIV refresh

Status
Not open for further replies.

weirdcpu

IS-IT--Management
Mar 19, 2005
22
FR
Hello,

I don't know where to post this : in XML forum or in javascript forum ?

So, I have to display two set of data in the same html page.
Each set of data is inside a <div> tag.
Data is encoded in xml, each set in a different file.
HMLT code is generated by XSLT. One XSLT for each data set.
On first display all this works correctly.

But, beetween the two div there is some links in order to change the data set displayed in the second div.

( first data set is a general annual planning calendar, second data set is a monthly specialized calendar and the links are used to select wich month to display )

So, ,when i select another month, the second div is NOT refresh but the new data set is display AFTER the second div.
Is there anyone that can help ?

Thanks a lot.

This is the code :
function creeCalend() {
calendrier = document.createElement("div");
calendrier.id="calendrier";
// Create a <table> object and insert it into the document
table = document.createElement("table");
table.id="tableCalend";
table.setAttribute("border", "0");
table.setAttribute("cellpadding","0");
table.setAttribute("cellspacing","0");
table.setAttribute("width","100%");
calendrier.appendChild(table);

var tete = table.createTHead( );
var lgnTete = tete.insertRow(0);
lgnTete.insertCell(0).appendChild(document.createTextNode("Appli/date"));
lgnTete.insertCell(1).appendChild(document.createTextNode("systeme"));
lgnTete.insertCell(2).appendChild(document.createTextNode("bdrp"));
lgnTete.insertCell(3).appendChild(document.createTextNode("medoc"));
lgnTete.insertCell(4).appendChild(document.createTextNode("miriam"));
conteneur.appendChild(calendrier);
}
function creeNavigation() {
var mois_a_afficher;
if (document.getElementById("barre") ) {
var tmp1=document.getElementById("barre");
if( tmp1.childNodes.length > 0 ) {
clearChildNodes("barre");
}
}
else {
tmp1=document.createElement("div");
tmp1.id="barre";
conteneur.appendChild(tmp1);
}
var tmp2, tmp3;
htmlscript='<a href="';
htmlscript+=annee[moisactuel];
htmlscript+='.html" title=';
htmlscript+=annee[moisactuel];
htmlscript+='>\n';
htmlscript+='<span>';
htmlscript+=annee[moisactuel];
htmlscript+='</span></a></h1>';
tmp1.innerHTML= htmlscript;
//debut de la creation du menu:
// Il s'agit d'une liste <ul> <li>....
//Mise en forme de barre via la feuille de style
// cf les elements ul#menu
if (document.getElementById("menu") ) {
var tmp2=document.getElementById("menu");
if( tmp2.childNodes.length > 0 ) {
clearChildNodes("menu");
}
}
else {
tmp2=document.createElement("ul");
tmp2.id="menu";
conteneur.appendChild(tmp2);
}
htmlscript="";
for( var i=0;i<5;i++) {
// On part du mois_courant puis on boucle en annee glissante
// pour constituer le menu
mois_a_afficher=(moisactuel+i)%12;
tmp3=document.createElement('li');
htmlscript ='<a href="';
but ='javascript:{moisactuel='
but +=mois_a_afficher;
but += ';navigation();}';
htmlscript +=but;
htmlscript +='">';
htmlscript +=annee[mois_a_afficher];
htmlscript +='</a>';
// bon, il est temps de mettre le code HTML dans la balise <li>
tmp3.innerHTML = htmlscript;
// insertion de la balise <li> courante
tmp2.appendChild(tmp3);
// tmp2.appendChild(document.createElement("</li>"));
}
// On ferme le menu :
// tmp1.appendChild(document.createElement("</ul>"));
conteneur.appendChild(tmp1);
conteneur.appendChild(tmp2);
}
function navigation() {
var fichier_calend="";
var fichier_contenu="";
fichier_calend= annee[moisactuel]+".xml";
chargeXML(fichier_calend, chargeCalend);
creeNavigation();
fichier_contenu= annee[moisactuel]+"_data.xml";
chargeXML(fichier_contenu, chargeContenu);
}
function chargeCalend(xmldoc, url) {

// On vient de faire l'entete de la table.
// Passons a la partie variable
if( document.getElementById("tbodyCalend")) {
var tbody=document.getElementById("tbodyCalend");
if ( tbody.childNodes.length > 0) {
clearChildNodes("tbodyCalend");
}
}
else {
tbody = document.createElement("tbody");
tbody.id="tbodyCalend";
table.appendChild(tbody);
}

// Le tbody est disponible et il est vide.
// Il faut une enveloppe pour receuillir l'ensemble des lignes et colonnes.
var frag = document.createDocumentFragment();
frag.id = "fragCalend";

// Now find all <mois> elements in our xmldoc document
var dataCalend = xmldoc.getElementsByTagName("mois");
if( dataCalend.length == 0 ) {
alert ( "Je ne reconnais pas les composants du calendrier");
}

for(var i = 0; i < dataCalend.length; i++) {
// Pour chaque mois, obtient les elements applicatifs using standard DOM
var e = dataCalend;
var nom = e.getAttribute("nom");
var systeme = e.getElementsByTagName("systeme")[0].firstChild.data;
if( systeme.length==0) {alert ( "Je ne reconnais pas les composants systeme"); }
var bdrp = e.getElementsByTagName("bdrp")[0].firstChild.data;
var medoc = e.getElementsByTagName("medoc")[0].firstChild.data;
var miriam = e.getElementsByTagName("miriam")[0].firstChild.data;
// Il faut remplir la ligne courante du tableau
tr=document.createElement("tr");
if( i%2 == 0 ) {
tr.setAttribute("bgcolor","#99CCFF");
}
else
tr.setAttribute("bgcolor","white");
td=document.createElement("td");
td.appendChild(document.createTextNode(nom));
// td.setAttribute("valign", "top");
tr.appendChild(td);
td=document.createElement("td");
td.appendChild(document.createTextNode(systeme));
tr.appendChild(td);
td=document.createElement("td");
td.appendChild(document.createTextNode(bdrp));
tr.appendChild(td);
td=document.createElement("td");
td.appendChild(document.createTextNode(medoc));
tr.appendChild(td);
td=document.createElement("td");
td.appendChild(document.createTextNode(miriam));
tr.appendChild(td);
frag.appendChild(tr);
}
tbody.appendChild(frag);

}
function chargeContenu(xmldoc, url) {
if ( document.getElementById("contenu") ) {
var tmp1=document.getElementById("contenu");
if( tmp1.childNodes.length > 0 ) {
clearChildNodes("contenu");
}
}
else {
tmp1=document.createElement("div");
tmp1.id="contenu";
conteneur.appendChild(tmp1);
}
var dataContenu= xmldoc.getElementsByTagName("Contenu");
var tmp2=document.createElement("h2");
tmp2.innerHTML=dataContenu[0].getAttribute("titre");
tmp1.appendChild(tmp2);
// tmp1.appendChild(document.createElement("</h2>"));
tmp2=document.createElement("p");
tmp2.innerHTML=dataContenu[0].getAttribute("intro");
tmp1.appendChild(tmp2);
// tmp1.appendChild(document.createElement("</p>"));

CDC_tmp = dataContenu[0].getElementsByTagName("Titre_CDC");
NUM_tmp = dataContenu[0].getElementsByTagName("Num_CDC");
for( var i=0; i<CDC_tmp.length;i++) {
tmp2=document.createElement("h3");
tmp2.innerHTML=CDC_tmp.firstChild.data+" ";
tmp2.innerHTML +=NUM_tmp.firstChild.data+"\n";
tmp1.appendChild(tmp2);
// tmp1.appendChild(document.createElement("</h3>"));
// tmp1.appendChild(document.createElement("br"));
}

}
....
<body>
<script language="Javascript1.2">
var fichier_calend="";
var fichier_contenu="";
creePage();
initCalend();
creeCalend();
navigation();
creeBasPage()
</script>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top