✔ AJAX-Problem - Unterschiede FF und IE

napsio · 9. Januar 2007

Hallo,

ich hab ein kleines Ajax Script, das in der einen Version nur im Internet Explorer funktioniert und in der anderen Version nur im Firefox.

JavaScript:

Code:

function fillSelectTwo() {
	req = getXMLRequester();
	var jetzt = new Date();
	var v = jetzt.getTime();
	req.onreadystatechange = handleResponse;
	id = document.getElementById('selectOne').value;
	req.open('get', 'ajax.php?s='+ id +'&v='+ v, true);
	req.send(null); 
}

function handleResponse() {
	if ((req.readyState == 4) && (req.status == 200)) { 
		document.getElementById('selectTwo').innerHTML = req.responseText;
	}
}

function getXMLRequester( ){
    var xmlHttp = false;
    // try to create a new instance of the xmlhttprequest object        
    try{
        // Internet Explorer
        if( window.ActiveXObject ){
            for( var i = 5; i; i-- ){
                try{
                    // loading of a newer version of msxml dll (msxml3 - msxml5) failed
                    // use fallback solution
                    // old style msxml version independent, deprecated
                    if( i == 2 ){
                        xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );    
                    }
                    // try to use the latest msxml dll
                    else{
                        
                        xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
                    }
                    break;
                }
                catch( excNotLoadable ){                        
                    xmlHttp = false;
                }
            }
        }
        // Mozilla, Opera und Safari
        else if( window.XMLHttpRequest ){
            xmlHttp = new XMLHttpRequest();
        }
    }
    // loading of xmlhttp object failed
    catch( excNotLoadable ){
        xmlHttp = false;
    }
    return xmlHttp ;
}

HTML-Code (Version 1)

HTML:

...
<table width="100%" border="0" cellspacing="1" cellpadding="2">
	<tr>
		<td width="50%">
			<select name="selectOne" id="selectOne" onChange="fillSelectTwo()" size="15" style="width:190px;">
				...
			</select>
		</td>
		<td width="50%" align="right">
			<div id="selectTwo"></div>
		</td>
	</tr>
</table>	
...

PHP-Code (Version 1)

PHP:

<select size="15" style="width:190px;" name="selectTwoOut" id="selectTwoOut">
...

<?php
//Inhalte laden
$string = urldecode($_REQUEST['s']);
$string = htmlentities($string);

$result = $mysql->query("SELECT * FROM table WHERE wert = '".$string."'");
while($row = $mysql->fetch_array($result)) 
{
	echo "<option value=\"".$row['id']."\">".utf8_encode($row['name'])."</option>\n";
}

?>
</select>

HTML-Code (Version 2)

HTML:

...
<table width="100%" border="0" cellspacing="1" cellpadding="2">
	<tr>
		<td width="50%">
			<select name="selectOne" id="selectOne" onChange="fillSelectTwo()" size="15" style="width:190px;">
				...
			</select>
		</td>
		<td width="50%" align="right">
			<select id="selectTwo"  size="15" style="width:190px;" name="selectTwo">
				...
			</select>
		</td>
	</tr>
</table>	
...

PHP-Code (Version 2)

PHP:

<?php
//Inhalte laden
$string = urldecode($_REQUEST['s']);
$string = htmlentities($string);

$result = $mysql->query("SELECT * FROM table WHERE wert = '".$string."'");
while($row = $mysql->fetch_array($result)) 
{
	echo "<option value=\"".$row['id']."\">".utf8_encode($row['name'])."</option>\n";
}

?>

Version 1:
Funktioniert nur im Internet Explorer.
Im Firefox wird der Wert von selectTwo ($_POST['selectTwo']) an die Formularauswertung nicht übergeben.

Version 2:
Funktioniert nur im Firefox.
Im Internet Explorer wird selectTwo nicht gefüllt.

Kann mir da jemand helfen? Ich hab schon einiges ausprobiert, sehe aber wahrscheinlich den Wald vor lauter Bäumen nicht mehr.

Danke.

Quaese · 10. Januar 2007

Hi,

in Version 1 hast Du die ID selectTwo zweimal vergeben - einmal für den Ausgabecontainer und einmal für
die Selectgruppe. Sicherlich ist das der Grund, dass die entsprechende POST-Variable in der Auswertung
nicht gesetzt ist.

Ciao
Quaese

napsio · 10. Januar 2007

Ne, daran lag es nicht. Hatte mich hier bloß vertippt. In der PHP-Datei sollte das selectTwoOut und nicht selectTwo heißen.

Quaese · 10. Januar 2007

Hi,

in dem Fall muss im Auswertungsscript mit $_POST['selectTwoOut'] gearbeitet werden.

Ausserdem übergibst Du die ID, welche aus der ersten Selectgruppe ausgelesen wird. Wenn es der Wert der aktuelle
gewählten Option ist, solltest Du fogendermassen darauf zugreifen.

Code:

id = document.getElementById('selectOne').options[document.getElementById('selectOne').selectedIndex].value;

Folgende Kombination funktioniert bei mir im IE und im Firefox.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function fillSelectTwo() {
	req = getXMLRequester();
	var jetzt = new Date();
	var v = jetzt.getTime();
	req.onreadystatechange = handleResponse;
	id = document.getElementById('selectOne').options[document.getElementById('selectOne').selectedIndex].value;
	req.open('get', 'ajax.php?s='+ id +'&v='+ v, true);
	req.send(null);
}

function handleResponse() {
	if ((req.readyState == 4) && (req.status == 200)) {
		document.getElementById('selectTwo').innerHTML = unescape(req.responseText);
	}
}

function getXMLRequester( ){
    var xmlHttp = false;
    // try to create a new instance of the xmlhttprequest object
    try{
        // Internet Explorer
        if( window.ActiveXObject ){
            for( var i = 5; i; i-- ){
                try{
                    // loading of a newer version of msxml dll (msxml3 - msxml5) failed
                    // use fallback solution
                    // old style msxml version independent, deprecated
                    if( i == 2 ){
                        xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
                    }
                    // try to use the latest msxml dll
                    else{

                        xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
                    }
                    break;
                }
                catch( excNotLoadable ){
                    xmlHttp = false;
                }
            }
        }
        // Mozilla, Opera und Safari
        else if( window.XMLHttpRequest ){
            xmlHttp = new XMLHttpRequest();
        }
    }
    // loading of xmlhttp object failed
    catch( excNotLoadable ){
        xmlHttp = false;
    }
    return xmlHttp ;
}
 //-->
</script>
<style type="text/css">
  <!--
 //-->
</style>
</head>
<body>
<form action="get_formdata.php" method="post">
<table width="100%" border="0" cellspacing="1" cellpadding="2">
	<tr>
		<td width="50%">
			<select name="selectOne" id="selectOne" onChange="fillSelectTwo()" size="15" style="width:190px;">
      	<option value="0">Null</option>
      	<option value="1">Eins</option>
      	<option value="2">Zwei</option>
			</select>
		</td>
		<td width="50%" align="right">
			<div id="selectTwo"></div>
		</td>
	</tr>
  <tr>
  	<td></td>
  	<td><input type="submit" value="ab damit"></td>
  </tr>
</table>
</form>

</body>
</html>

Und das php-Dokument (ajax.php), das eine Datenbankabfrage simuliert und daraus die neue Selectgruppe aufbaut.

Code:

<?php
	// Datenbankabfrage
  $arrDB = array();
  $arrDB[0][0] = "Schuh";
  $arrDB[0][1] = "1";
  $arrDB[1][0] = "Hemd";
  $arrDB[1][1] = "2";
  $arrDB[2][0] = "Rock";
  $arrDB[2][1] = "3";
  $arrDB[3][0] = "Kette";
  $arrDB[3][1] = "4";
  $arrDB[4][0] = "Gürtel";
  $arrDB[4][1] = "5";

  if(isset($_GET['s']) && ($_GET['s']!="")){
  	// Select aufbauen
    $strOut = "<select size=\"15\" style=\"width:190px;\" name=\"selectTwoOut\" id=\"selectTwo\">\n";
    for($i=(int)$_GET['s']; $i<count($arrDB); $i++){
    	$strOut .= "<option value=\"".$arrDB[$i][1]."\">".$arrDB[$i][0]."</option>\n";
    }
    $strOut .= "</select>\n";
  }else{
  	$strOut = "";
  }

  echo(rawurlencode($strOut));
?>

Mit diesen beiden Dokumenten erhalte ich im Auswertungsdokument get_formdata.php sowohl für
$_POST['selectTwoOut'] als auch für $_POST['selectOne'] die ausgewählten Werte.

Vielleicht hilft Dir das weiter.

Ciao
Quaese

napsio · 10. Januar 2007

So funktionierts...=)

Vielen Dank für die schnelle Hilfe.

Maik · 10. Januar 2007

napsio hat gesagt.:
So funktionierts...=)

Dann markiere bitte zukünftig ein "gelöstes" Thema auch als erledigt. Vielen Dank

napsio · 10. Januar 2007

Wo kann ich das denn als erledigt markieren?

[EDIT]
Habs gefunden
[/EDIT]

Maik · 10. Januar 2007

Ich hatte das Thema bereits für dich als erledigt markiert

✔ AJAX-Problem - Unterschiede FF und IE

napsio

Mitglied

Quaese

Moderator

napsio

Mitglied

Quaese

Moderator

napsio

Mitglied

Maik

napsio

Mitglied

Maik

Neue Beiträge