Per JavaScript auf AJAX-generierte Elemente zugreifen?

Beitrag von **Andreas I.** » 27.10.2009, 13:12

Guten Tag.

Da gibt es ein Formular mit AJAX-Elementen für die Postleitzahlen und Orte. Je nach Postleitzahl wird ein <select> mit einer passenden Ortsauswahl erzeugt.

Sooo... Nun soll ein Captcha noch dazu und da braucht man dann einen Durchgang des Formulars durch PHP. Dabei sollen die Formulareingaben überprüft, richtige Eingaben behalten und falsche bzw. fehlende Eingaben angemeckert werden..

Das ganze sieht dann in PHP etwa so aus:

Code: Alles auswählen

...
		<form id="form1" name="form1" action="" method="post">
	                <div style="float&#58;left; margin-right&#58;10px">
				  <label id="Anrede">Anrede&#58;</label>
				  <br />
                  <select name="Anrede" id="Anrede">
                    <option value="0" selected="selected">Auswahl</option>
                    <option value="Herr" <?  /* PHP-Zeugs */ ?>>Herr</option>
                    <option value="Frau" <?  /* PHP-Zeugs */ ?>>Frau</option>
                    <option value="Firma" <?  /* PHP-Zeugs */ ?>>Firma</option>
                  </select>
				</div>

// ...usw. etc. Es folgen noch viele Formularelemente...
// Hier nun das AJAX-generierte Element&#58;

<?php 
				if &#40;$_POST&#91;Ort&#93;!=""&#41;
				&#123;
				echo "
<script type=\"text/JavaScript\">
	$.ajax&#40;&#123; // AJAX Request auslösen
		type&#58; \"GET\",
		url&#58; '/kunde/ajax_proxy.php?function=get_ort_select&Plz='+$_POST&#91;Plz&#93;,
		dataType&#58; 'html',
		global&#58; 'false',
		success&#58; function&#40;html&#41; &#123; // Funktion um die XML Antwort des PHP-Scripts zu verarbeiten
			
			$&#40;\"#ortselect\"&#41;.show&#40;&#41;;
			$&#40;\"#ajaxloading\"&#41;.hide&#40;&#41;;
				
			if &#40; html != '' &#41; &#123;
				$&#40;\"#ortselect\"&#41;.html&#40;html&#41;;
			&#125;
			else &#123;
				$&#40;\"#ortselect\"&#41;.html&#40;'  Keine Orte gefunden!'&#41;;
			&#125;
		&#125;,
		error&#58; function&#40;html&#41; &#123; // Funktion um die XML Antwort des PHP-Scripts zu verarbeiten
			$&#40;\"#ajaxloading\"&#41;.hide&#40;&#41;;
			$&#40;\"#ortselect\"&#41;.hide&#40;&#41;;
			$&#40;\"#ortselect\"&#41;.html&#40;'Fehler!'&#41;;
		&#125;
	&#125;&#41;;


// Hier der Teil, der nicht funktioniert&#58;
	document.form1.Ort.selectedIndex=1;
</script>
";

Ich erhalte die Fehlermeldung "document.form1.Ort is undefined". Tatsächlich taucht das Ort-Element im ursprünglichen Quelltext nicht auf. In der durch AJAX modifizierten Form des Formulars gibt es aber sehr wohl ein Ort-Element. Beispielhafter HTML-Quelltext:

Code: Alles auswählen


...

// Durch AJAX generiert&#58;
                    <div id="ortselect" style="float&#58; left; padding-left&#58; 5px;">
<select name="Ort" id="Ort" class="check">
<option value="0">Bitte Ort wählen</option>
<option value="Hamburg">20099 'Hamburg'</option>
</select>
</div> 
...

Wieso erhalte ich die Fehlermeldung "document.form1.Ort is undefined" ?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **Mork vom Ork** » 27.10.2009, 14:01

Nur nebenbei:
Das hier

Code: Alles auswählen

<?php 
	if &#40;$_POST&#91;Ort&#93;!=""&#41;
		&#123;
		echo "
<script type=\"text/JavaScript\">
	$.ajax&#40;&#123; // AJAX Request auslösen
		type&#58; \"GET\",

ist mit den ganzen \" und \' ja fürchertlich hässlich. Bei längeren Passagen verlasse einfach den PHP-Bereich:

Code: Alles auswählen

if &#40;$_POST&#91;Ort&#93;!=""&#41; &#123;
?>
<script type="text/javascript">
    $.ajax&#40;&#123; // AJAX Request auslösen
        type&#58; "GET",
<?php
&#125;

Zu deinem Problem:

Ich erhalte die Fehlermeldung "document.form1.Ort is undefined". Tatsächlich taucht das Ort-Element im ursprünglichen Quelltext nicht auf. In der durch AJAX modifizierten Form des Formulars gibt es aber sehr wohl ein Ort-Element.

Das A in AJAX bedeutet asynchron. Schau dir deinen Code nochmal an:

Code: Alles auswählen

$.ajax&#40;&#123;
    success&#58; function&#40;html&#41; &#123;          
        $&#40;"#ortselect"&#41;.html&#40;html&#41;; 
    &#125;, 
&#125;&#41;; 
document.form1.Ort.selectedIndex=1;

Du kannst nicht davon ausgehen, dass du $.ajax() aufrufen kannst und dessen Effekt bereits durch ist, wenn du sofort darauf in der nächsten (!) Zeile per document.form1.Ort.selectedIndex=1; das per AJAX zu erzeugende Element ansprichst.
Wegen des asynchronen Ablaufs würde das Element bestenfalls gleichzeitig mit der nächsten Zeile erzeugt werden, so dass der Zugriff ein Lotteriespiel wäre. Es dürfte in der Praxis aber vielmehr so sein, dass der AJAX-Aufruf noch einen Augenblick auf Halde liegt, bis der Rest der Seite geladen ist.

Setze document.form1.Ort.selectedIndex=1 in die AJAX-success-Funktion.

Beitrag von **Andreas I.** » 27.10.2009, 14:12

Danke!