XML mit Javascript auswerten

[Volker]

Hallo,

ich wollte eine Seite mit einer Onlinehilfe erstellen. Da die Seite zu komplex ist, habe ich jetzt ein Minimalbeispiel erstellt und versuche daran das Problem zu lösen. Leider komme ich gerade nicht mehr weiter und brauche eure Hilfe.

Ich habe eine hilfe.xml Datei die wie folgt aussieht:
<help1>Hilfe1</help1>
<help2>Hilfe2</help2>
<help3>Hilfe3</help3>
<help4>Hilfe4</help4>

und ich habe eine index.html Seite die wie folgt aussieht:

<script type="text/javascript">

function helpMe(index)
 {
  document.getElementById("hilfeDIV").innerHTML = "Hilfetext";
 }
</script>

<input type="text" name="text1" onMouseOver="helpMe(help1)"><br>
<input type="text" name="text2" onMouseOver="helpMe(help2)"><br>
<input type="text" name="text3" onMouseOver="helpMe(help3)"><br>
<input type="text" name="text4" onMouseOver="helpMe(help4)"><br>

<div id="hilfeDIV" style="position:absolute; top:500; left:200">Hilfetext</div>

Das Ziel ist es, wenn ich über das erste Textfeld gehe, soll "Hilfetext" mit dem Inhalt aus der XML Datei vom Node "help1" überschrieben werden usw.
Ich hatte einige Tutorials ausprobiert, liefen aber alle nicht so recht. Daher habe ich das Beispiel erstmal wieder zurückgesetzt, nur was muss ich jetzt genau machen?

Ich danke schonmal für Hilfe.
Einen schönen Tag noch,
Volker

PS.: Es sollte auf allen Browsern gehen, nicht nur IE oder Mozilla oder so.

[Siechfred]

Hell-O!

was muss ich jetzt genau machen?

Verwende AJAX. Solltest du dabei Probleme haben, frage einfach nochmal nach.

Siechfred

[Volker]

Hi :-)

Ajax hatte ich mir auch schon überlegt, nur ist mir der Ablauf irgendwie nicht so ganz klar, also der Programmablauf. Was passiert, wenn der MouseOver Trigger ausgelöst wird? Die JS Funktion wird aufgerufen und dann? Könntest du mir so per Psydo-Code einen Ansatz erstellen? Syntaxfehler etc kann ich selbst lösen, nur der Ansatz fehlt mir zur Zeit noch.

Danke für die Hilfe :-)

Hell-O!

was muss ich jetzt genau machen?

Verwende AJAX. Solltest du dabei Probleme haben, frage einfach nochmal nach.

Siechfred

[.nils.]

Hallo,

nimm die xajax-Bibliothek, lade dir das PHP-Handbuch als .chm herunter (weil das Menü links übersichtlicher ist) und schau dir hier die Dom-Funktionen an, schreibe dir dein php-script, melde es bei xajax an, ruf die Funktion über javascript auf, fertisch :-)

Gruß, Nils

[Mssmar]

Hallo,

das hier ist schon einmal falsch. Es muss folgendermaßen heißen:

document.getElementById("hilfeDIV").innerHTML = index;

und das Prarameter in den Funktion-Aufruf muss ein String sein:

Das Ganze muss also lauten:

  
<script type="text/javascript">  
  
function helpMe(index)  
 {  
  document.getElementById("hilfeDIV").innerHTML = index;  
 }  
</script>  
  
  
  
<input type="text" name="text1" onMouseOver="helpMe('help1')"><br>  
<input type="text" name="text2" onMouseOver="helpMe('help2')"><br>  
<input type="text" name="text3" onMouseOver="helpMe('help3')"><br>  
<input type="text" name="text4" onMouseOver="helpMe('help4')"><br>  
  
<div id="hilfeDIV" style="position:absolute; top:500; left:200">Hilfetext</div>  

Gruß
Messmar

[Siechfred]

Hell-O!

function helpMe(index)
{
  document.getElementById("hilfeDIV").innerHTML = index;
}
</script>

Ich glaube, dass der OP mit Hilfe von index die Hilfetexte aus einer XML-Datei haben möchte, dein Beispiel jedoch zeigt index als String an.

Siechfred

[Volker]

Hi.

Genau. Das das so nicht klappen kann wie ich es gepostet hatte, ist schon klar. Ich wollte nur, dass der Inhalt des Nodes aus der XML Datei des zugehörigen Index's ausgegeben wird. Also "Hilfe1" wenn über das erste Textfeld der Mousecoursor ist.

Mfg
Volker

Hell-O!

function helpMe(index)
{
  document.getElementById("hilfeDIV").innerHTML = index;
}
</script>

Ich glaube, dass der OP mit Hilfe von index die Hilfetexte aus einer XML-Datei haben möchte, dein Beispiel jedoch zeigt index als String an.

Siechfred

[Colin Finck]

Sowas ähnliches stand mal in c't 5/2006.

Mit AJAX kannst du die Funktion folgendermaßen realisieren:

------------------------------------------
function helpMe(tag)
{
  ajax = new XMLHttpRequest();
  ajax.open("GET", "hilfe.xml", true);

// IE cacht die übertragenen Dateien. Deshalb erscheint nach einem zweiten Abruf keine Veränderung.
  // Mit diesem zusätzlichen Request-Header lässt sich das Problem umgehen.
  ajax.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

ajax.send(null);

ajax.onreadystatechange = function()
  {
    if(ajax.readyState == 4)
    {
      if(ajax.status == 200)
        document.getElementById("hilfeDIV").appendChild(document.createTextNode(ajax.responseXML.getElementsByTagName(tag)[0].nodeValue));
      else
        alert("Fehler beim Abruf! Fehler-Code: " + ajax.status + ", Fehler-Text: " + ajax.statusText);
    }
  }
}

// XMLHttpRequest-Objekt für Internet Explorer 5.x und 6
/*@cc_on @if (@_win32 && @_jscript_version >= 5) if (!window.XMLHttpRequest)
function XMLHttpRequest() { return new ActiveXObject('Microsoft.XMLHTTP') }
@end @*/
------------------------------------------

Aufrufen kannst du diese Funktion dann z.B. so: helpMe("help1");

Dies funktioniert allerdings nur, solange nodeValue keine weiteren Tags wie Fettschrift und Links enthält.
Wenn du weitere Tags einbinden willst, ist noch folgende Hilfsfunktion notwendig (hab ich jetzt mal aus dem c't-Beispiel übernommen :-)

------------------------------------------
function klonen(quelle, ziel) {
 // Hilfsfunktion für Fußnoten-Darstellung im DOM
 // Einfaches cloneNode() funktioniert nicht bei komplexen
 // Gebilden; eine Schleife baut den Teilbaum nach.
 for(var i = 0; i < quelle.childNodes.length; i++) {
  var knoten = quelle.childNodes[i];
  switch (knoten.nodeType) {
   case 1: // Elementknoten
    var neu = ziel.appendChild(document.createElement(knoten.nodeName));
    for (var j = 0; j < knoten.attributes.length; j++) {
     neu.setAttribute(knoten.attributes[j].nodeName, knoten.attributes[j].nodeValue);
    }
    klonen(knoten, neu);
    break;
   case 3: // Textknoten
    subknoten = document.createTextNode(knoten.nodeValue);
    ziel.appendChild(subknoten);
   // andere Knotentypen sind nicht relevant
  }
 }
}
------------------------------------------

Im vorherigen Code musst du dann die Zeile "document.getElementById ....." durch folgende Zeile ersetzen:

------------------------------------------
klonen(ajax.responseXML.getElementsByTagName(tag)[0].cloneNode(true), document.getElementById("hilfeDIV"));
------------------------------------------

Das c't-Beispiel findest du übrigens unter der URL http://www.heise.de/ct/ftp/06/05/152 bzw. unter Soft-Link "0605152".

Ich hab's jetzt nicht getestet, aber der Code sollte funktionieren.

Beste Grüße,

Colin Finck