AJAX/PHP/MySQL: Mehrere dynamische Formularfelder

Trainee

Monday, November 10th 2008, 1:10pm

Hallo!

Ich möchte mit AJAX/PHP/MySQL folgendes umsetzen:
Der Website-Besucher sieht 3 Auswahlformulare und 1 Ergebnisbereich.

Zunächst muss er im 1. Auswahlformular einen Eintrag auswählen.
Daraufhin füllt sich das 2. Auswahlfeld, wo er wieder einen Eintrag auswählt.
Daraufhin füllt sich das 3. Auswahlfeld, wieder wird ein Eintrag ausgewählt.
Danach ist schließlich das Endergebnis im Ergebnisbereich zu sehen.

Die Inhalte für die Auswahlfelder und das Ergebnisfeld sollen per PHP aus einer MySQL-Datenbank kommen.
Im Idealfall steht im Bereich Endergebnis eine Info "Seite wird geladen", wenn die Datenbankabfrage länger dauert.

Wie könnte ich das umsetzen? Hat jemand von Euch zufällig so ein Script bei der Hand?
Ich bin auch für alle Tipps und Links dankbar, bislang habe ich nur AJAX-Abfragen für 1 Formular bzw. ohne MySQL gefunden.

Vielen Dank,
ChB

Snowflake

Professional

Posts: 370

2

Monday, November 10th 2008, 1:47pm

Die Suchfunktion ist schon was feines

http://www.coder-wiki.de/HowTos/Ajax-Inh…elect-nachladen
http://www.easy-coding.de/3-div-tags-per…aden-t5892.html
http://www.easy-coding.de/dropdownfeld-mir-select-t5869.html
http://www.easy-coding.de/zweite-select-…sten-t2622.html

Praktisch sollte dir iwas davon helfen. Theoretisch geht das so:
Das select-fenster ruft mit onchange die ajax1 funktion auf und übergibt den ausgewählten Parameter womit die datei x1.php geladen wird.
In der Datei x1.php machst du deine Datenbankabfrage und lässt dir das ganze wieder mit einem select ausgeben und einen onchange der die ajax2 funktion aufruft und datei x2 läd. u.s.w

EDIT://

"Das mit dem Seite wird geladen" im Endergebnis ist machbar. Arbeitest du mit einem Framework wie Prototype ect.?
Wenn ja gibt es dort vor definierte funktionen die du im Ajaxrequest ausführen kannst.

Bei prototype würde das ganze so aussehen:

JavaScript Code

1
2

onLoading:function(){ $('endergebnis').innerHTML='Seite wird geladen..ein Moment bitte'; },
onComplete:function(){$('endergebnis').innerHTML='';}

ChB

Trainee

Posts: 11

3

Monday, November 10th 2008, 2:33pm

Hallo Snowflake,

danke für Deine schnelle Antwort.

Die Links habe ich schon gekannt, ich suche heute schon den ganzen Tag nach der Lösung für meine Anforderung. - Es werden aber immer nur die Probleme gepostet, einen funktionierenden Code mit mehreren Formularfeldern und PHP/MySQL habe ich noch nicht gefunden. Als Ansatzpunkt sind die Links aber natürlich super.

Ist leider mein 1. AJAX-Projekt, daher bin ich noch ziemlich hilflos ... !

Liebe Grüße,
ChB

JFoX

Professional

Posts: 535

4

Monday, November 10th 2008, 2:50pm

Hallo, deine Zeit könntest du besser in die Einarbeitung investieren, anstatt was fertiges zu suchen, was man dann eh nicht kapiert. Hier im Forum gibt es reichlich gelöste Ajax fragen. Der ganze klump ist alles das selbe. Ob das nen Login ist ein Autocompleter oder das was du willst, ist alles das Selbe das Grundgerüst bleibt.

Falls du eine komplette AJAX Engine benutzen willst empfehle ich JQuery (unterstützt auch Formulare und an sich alles was man braucht)

Hier mal ein Beispiel für ein Autokompleter mit JQuery: http://www.dyve.net/jquery/?autocomplete

ChB

Trainee

Posts: 11

5

Monday, November 10th 2008, 6:55pm

Hallo!

Ich habe jetzt einiges ausprobiert.
Die PHP/MySQL-Komponente macht mir keine Probleme.
Probleme habe ich mit den JavaScript, bzw. AJAX-Teil.

Noch einmal ein wenig detaillierter ausgedrückt, was ich versuche:

Der Besucher hat 2 Select-Felder zur Auswahl.
In einem kann er ein Bundesland wählen, im anderen einen Ort.
Sobald er Bundesland und Ort ausgewählt hat, sollen die ersten Ergebnisse angezeigt werden (Vorname und Nachname).

Jetzt kann aber auch noch optional ein Nachname eingegeben werden.
Wenn der Besucher diese Möglichkeit wählt, sollen die Ergebnisse entsprechend gefiltert werden.

Wie muss da der JavaScript-Teil aussehen?

Vielen Dank,
ChB

JFoX

Professional

Posts: 535

6

Monday, November 10th 2008, 7:00pm

Quoted from "ChB"

nn der Besucher diese Möglichkeit wählt, sollen die Ergebnisse entsprechend gefiltert werden.

Das ergibt keinen Sinn

Ok wir wollen uns ja nicht an kleinigkeiten aufhängen. Zeig doch mal das was du schon gemacht hast. Dann können wir alle sehen wo es hängt.

ChB

Trainee

Posts: 11

7

Tuesday, November 11th 2008, 12:03am

EDIT 2: Hat sich erledigt, habe mein soeben gepostetes Problem selbst lösen können.

This post has been edited 2 times, last edit by "ChB" (Nov 11th 2008, 8:18am)

ChB

Trainee

Posts: 11

8

Tuesday, November 11th 2008, 3:15pm

Workaround für IE

Hallo,

ich bin nun schon recht weit gekommen. In Firefox funktioniert alles ganz ok.
Ich habe aber Probleme mit dem Workaround für den IE.
Was muss ich tun, damit meine voneinander abhängigen Formulare auch im IE angezeigt werden?

Mein JavsScript-Code

Source code

<script type="text/Javascript">
<!--
function sendRequest(url, ergebnis) {
	var req;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
			new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		//Kein AJAX Support
	}
 
	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById(ergebnis).innerHTML = req.responseText;
		}
	};
 
	req.open('get', url);
	req.send(null);  
}
//-->
</script>

Vielen Dank,
ChB

This post has been edited 1 times, last edit by "ChB" (Nov 11th 2008, 4:23pm)

JFoX

Professional

Posts: 535

9

Tuesday, November 11th 2008, 3:26pm

Hallo,

ich will dir ja nicht zu nah treten, aber ich glaube du hast die Funktionsweise von AJAX nicht richtig verstanden. Wenn du AJAX für IE und Gecko-Browser verwenden willst musst du das auch hinschreiben:

Hier mal etwas zu lesen: ajax hintergrundwissen.html
Und hier wie man alle Browser supportet: AJAX Tutorial

JavaScript Code

try{
                    req = new XMLHttpRequest();
                }
                catch (ms){
                    try{
                        req = new ActiveXObject("Msxml2.XMLHTTP");
                    } 
                    catch (nonms){
                        try{
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                        } 
                        catch (failed){
                            req = null;
                        }
                    }

EDIT:
Mit

	JavaScript Code
1	alert();

Kannst du ausgaben machen, sprich fang doch einfach mal ab ob dein AJAX angenommen wird oder nicht

Dein Code mit alert:

JavaScript Code

<script type="text/Javascript">
<!--
function sendRequest(url, ergebnis) {
	var req;
	try {
		req = window.XMLHttpRequest?new XMLHttpRequest(): 
			new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		alert("Kein AJAX");
	}
 
	req.onreadystatechange = function() {
		if ((req.readyState == 4) && (req.status == 200)) { 
			document.getElementById(ergebnis).innerHTML = req.responseText;
		}
	};
 
	req.open('get', url);
	req.send(null);  
}
//-->
</script>

so long
jd

This post has been edited 2 times, last edit by "JFoX" (Nov 11th 2008, 3:31pm)

ChB

Trainee

Posts: 11

10

Tuesday, November 11th 2008, 4:22pm

Hallo!

Was bringt der Alert, der macht ja nur ein Fenster auf, oder?

Mein Problem war die Kompatibilität von IE mit innerHTML.
Ich habe jetzt die selects in <div> eingebettet, so klappt es jetzt im IE.

LG,
ChB

Snowflake

Professional

Posts: 370

11

Tuesday, November 11th 2008, 5:11pm

Der alert ist das was das print oder echo bei php ist..Damit kannst du dir die Fehlersuche vereinfachen. Du siehst wo daten ankommen, und ab wann sie nicht mehr ankommen. so kannst du den fehlerradius verkleinern und dein fehler lösen.
natürlich kannst du alert auch ganz normal benutzten.

Das mit dem IE hat wohl nicht gelkappt, weil du nur für Firefox dein Ajaxrequest definiert hat.

Willst du das ganze einfacher haben, steig einfach auf ein framework um. Du sparst dir damit selber viel arbeit.
bei prototype und vielen anderen wird nämlich aus. "document.getElementById('test')" einfach ein "$('test')"
und das ajaxrequest besteht nur noch aus einer zeile. du könntest dir natürlich auch aus deinem jetzigen ajaxrequest eine funktion bauen geht natürlich auch.

ChB

Trainee

Posts: 11

12

Wednesday, November 12th 2008, 9:44am

Hallo,

so, jetzt sind sich IE und FF schon wieder uneinig:

Ich übergebe z.B. die Variable "s" vom Formular an ein PHP-Script. Dort gehts dann los mit:
$s = mysql_real_escape_string($s);

Wenn ich das so lasse, kommt IE damit klar. Der Firefox zeigt aber keine Umlaute in $s an.
Also habe ich $s = utf8_decode($s); eingebaut. Firefox ist damit zufrieden.
Jetzt zeigt mir aber plötzlich der IE die Umlaute nicht an.

Was mache ich da falsch? In allen Files habe ich charset=iso-8859-1 verwendet.

Vielen Dank,
ChB

wiked

Beginner

Posts: 10

13

Wednesday, November 12th 2008, 9:56am

Ich würd die Umwandlung der Umlaute nicht hier Lösen, sondern erst bei der Ausgabe der MySQL abrage und zwar mit htmlentities!

ChB

Trainee

Posts: 11

14

Thursday, November 13th 2008, 9:43pm

Hallo,

das mit den htmlentities hat nicht geklappt, aber damit kämpfe ich noch.

Ich habe eine andere Frage: Weiter oben habe ich schon meinen Code gepostet.

Meine 3 Formulare hören auf einander, wie sie sollen.
Also Formular 3 hört auf Formular 2 und das auf Formular 1.
Jetzt möchte ich aber, dass sich Formular 3 zurücksetzt, wenn Formular 1 geändert wird.
Wie bekomme ich das hin?

Vielen Dank,
ChB

Torben Brodt

Administrator

Posts: 8,454

15

Thursday, November 13th 2008, 11:17pm

Du musst die DIVs ineinander verschachteln.
Wenn du also ebene1 änderst, werden auch die anderen Formulare ersetzt.

HTML Code

<select onchane="doebene1()"></select>
<div class="ebene1">
	<select onchane="doebene2()"></select>
	<div class="ebene2">
		<select onchane="doebene3()"></select>
		<div class="ebene3">
		</div>
	</div>
</div>

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

ChB

Trainee

Posts: 11

16

Friday, November 14th 2008, 8:09am

Hallo D0nut,

das habe ich schon probiert, leider funktioniert das nicht.
Vielleicht, weil ich <div> VOR <select> einsetze?
Das muss ich aber machen, sonst klappts im IE nicht.

Der Einfachheit halber hier meine Test-Seite: www.mymed.at/test

Wenn man in allen Feldern etwas ausgewählt hat und nachträglich das Bundesland ändert, dann setzt sich derzeit nur das "Fachbereich"-Formular zurück. Das habe ich durch eine entsprechende Bedingung in der func1.php erreicht. Ich möchte aber, dass sich auch das Formular "PLZ/ORT" und der Ergebnisbereich mit den fertigen Adressen zurücksetzen.

Vielen Dank,
ChB

Lemmi

Professional

Posts: 651

17

Friday, November 14th 2008, 6:32pm

Quoted from "ChB"

Der Firefox zeigt aber keine Umlaute in $s an.

Hier mal ein Link zu einem Eintrag der Diskussion in einem der Wiki-Einträge:
http://www.easy-coding.de/wiki/html-ajax…sion.html#post1
Hatte vor einiger Zeit ein ganz ähnliches Problem, das bei dir vielleicht ähnliche Gründe hat. Man sollte auf jedenfall drüber nachdenken.

Torben Brodt

Administrator

Posts: 8,454

18

Saturday, November 15th 2008, 2:45pm

also um mal einen schnellen Workaround zu erläutern:
Bau die Funktion mal wie folgt um:

JavaScript Code

function sendRequest(url, ergebnis) {
	if(ergebnis == 'fachb') {
		document.getElementById('ergebnis').innerHTML = 'alter inhalt';
	}
	...

statt alterInhalt musst du dir die Defaulttemplates zwischenspeichern.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Coder Forum