✔ <DIV> Zuordnung aus Ajax funktioniert nicht...

[Frank73]

Hallo zusammen,

Ich habe mehrere Select Felder, welche Schriften beinhalten. Nun prüfe ich via PHP ob zu der Schrift weitere Schriften verfügbar sind (Fett, Kursiv etc...) Dazu lasse ich die via onchange das script search.js aufrufen. So weit funktioniert das alles. Problem ist nur, das trotz eindeutiger DIV ID das Ergebnis immer in DIV 3 erscheint. Vielleicht kann mal jemand drüber schauen und findet den Fehler. Vielen Dank für jede Hilfe....

<SCRIPT SRC="machwas.js"></SCRIPT>
<SELECT ID="pulldown" NAME="font1" SIZE="1" ID="eingabe1" onchange="suggest1(this.value)">blablabla</SELECT></TD>
<DIV ID="DIV1"></DIV>

<SELECT ID="pulldown" NAME="font1" SIZE="1" ID="eingabe2" onchange="suggest2(this.value)">blablabla</SELECT></TD>
<DIV ID="DIV2"></DIV>

<SELECT ID="pulldown" NAME="font1" SIZE="1" ID="eingabe3" onchange="suggest3(this.value)">blablabla</SELECT></TD>
<DIV ID="DIV3"></DIV>

Und hier machwas.js

var xmlHttp;

function suggest1(suchbegriff1) {
xmlHttp=httpXMLobjects();
if (xmlHttp==null) {
  alert ("Browser does not support AJAX");
  return;
}
if (suchbegriff1.length==0) { 
  document.getElementById("DIV1").innerHTML="";
  return;
}
else {
	//URL vorbereiten, Zufallszahl umgeht den Browsercache  
	var aufruf1="js/processor1.php"+"?q1="+suchbegriff1+"&sid="+Math.random();
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",aufruf1,true);
	xmlHttp.send(null);
	}
} 
function stateChanged() { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
 document.getElementById("DIV1").innerHTML=xmlHttp.responseText;
 } 
}





function suggest2(suchbegriff2) {
xmlHttp=httpXMLobjects();
if (xmlHttp==null) {
  alert ("Browser does not support AJAX");
  return;
}
if (suchbegriff2.length==0) { 
  document.getElementById("DIV2").innerHTML="";
  return;
}
else {
	//URL vorbereiten, Zufallszahl umgeht den Browsercache  
	var aufruf2="js/processor2.php"+"?q2="+suchbegriff2+"&sid="+Math.random();
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",aufruf2,true);
	xmlHttp.send(null);
	}
} 
function stateChanged() { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
 document.getElementById("DIV2").innerHTML=xmlHttp.responseText;
 } 
}


function suggest3(suchbegriff3) {
xmlHttp=httpXMLobjects();
if (xmlHttp==null) {
  alert ("Browser does not support AJAX");
  return;
}
if (suchbegriff3.length==0) { 
  document.getElementById("DIV3").innerHTML="";
  return;
}
else {
	//URL vorbereiten, Zufallszahl umgeht den Browsercache  
	var aufruf3="js/processor3.php"+"?q3="+suchbegriff3+"&sid="+Math.random();
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",aufruf3,true);
	xmlHttp.send(null);
	}
} 
function stateChanged() { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
 document.getElementById("DIV3").innerHTML=xmlHttp.responseText;
 } 
}



//AJAX-Standards 
//Weniger interessant

function httpXMLobjects() {
var xmlHttp=null;
try {
 // Fuer Firefox, Opera und Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e) {
 // Der Internet Explorer wills wieder anders
 try {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e) {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

 

[Quaese]

Hi,

deine callback-Funktionen heissen alle gleich - stateChanged. Somit überschreibst du jedesmal die vorher definierte Funktion und am Ende bleibt nur die Funktion übrig für das Element mit der ID DIV3.

Entweder vergibst du individuelle Namen oder du übergibst die ID als String an die Funktion. Hierfür muss sie innerhalb einer ananymen Funktion aufgerufen werden.

Beispiel:

function suggest1(suchbegriff1) {
xmlHttp=httpXMLobjects();
if (xmlHttp==null) {
  alert ("Browser does not support AJAX");
  return;
}
if (suchbegriff1.length==0) { 
  document.getElementById("DIV1").innerHTML="";
  return;
}
else {
    //URL vorbereiten, Zufallszahl umgeht den Browsercache  
    var aufruf1="js/processor1.php"+"?q1="+suchbegriff1+"&sid="+Math.random();
    xmlHttp.onreadystatechange = function(){
      stateChanged("DIV1");
    };
    xmlHttp.open("GET",aufruf1,true);
    xmlHttp.send(null);
    }
} 

// callback-Funktion für alle Ajax-Requests; bekommt ID des Zielelements übergeben
function stateChanged(strID) { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
 document.getElementById(strID).innerHTML=xmlHttp.responseText;
 } 
}

Ciao
Quaese

 

[Frank73]

Ja klar, man das passiert wenn man zu lange davor sitzt ;-)