Dynamische Auswahlliste aus einer Tabelle

[sceiler]

Guten Abend zusammen,

vorab, ich weiß, dass diese Frage x male durchgekaut wurde und ich habe auch schon Lösungen und Guides dazu gelesen (hier und hier und hier)
Beides sehr interessante Artikel und gutes Vid, welches mir jedoch in dieser Form nicht weiterhelfen.

Mein "Problem" ist folgendes:

Die Datenbank mit der ich arbeiten muss bzw. auf die das Tool zugreift ist leider nicht normalisiert und ich habe auch nicht die Erlaubnis/Möglichkeiten dies zu ändern.
Ich möchte folgendes machen: Tabelle "Firma" (ID, Firmenname, Mitarbeitername, ...,) z.B. (1, Google, Peter Lustig, ...,) oder (123, SAP, Max Meier,...,) usw.

Natürlich ist die DB viel größer denn sie enthält noch andere Daten aber nur diese Tabelle ist wichtig für mein Vorhaben.

Aus dieser einen Datenbank Tabelle sollen die Daten ausgelsen werden und in einer HTML Tabelle in Form von Drop Down Menüs dargestellt werden, wobei nach Auswahl einer Firma nur noch diese Mitarbeiter angezeigt werden sollen. -> Verkettete Auswahlliste also. Durch Recherche weiß ich dass ich das alle mit Javascript oder Ajax machen kann (Daten dynamisch holen nach eingabe/input durch user). Mir helft jedoch dieses Wissen und auch die Lektüre von o.g. Links hat mich nicht weiter gebracht.

Auszug aus meinem Code:

finduser.php

echo '  
<div id="Inhalt">  
<form action="finduser.php" method="post" name="finduser">  
<table>';  
echo '	<tr>  
<td>Company</td>  
<td><select name="selectcompany" size="1" onChange="window.load_users()">';  
while ($row = mysql_fetch_assoc($query_get_company))  
 {  
	echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';  
 }  
echo '	</select>  
</td>  
</tr>';  
echo '		<tr>  
<td>User</td>  
<td><div id="content">(Empty)</div>';  
echo '			</td>  
</tr>';

In die div id=content sollen dann die entsprechende Mitarbeiter als Drop Down Menü angezeigt werden bzw zur Auswahl stehen.

Soweit ich das verstanden hat sind die einzelne Schritte:
Auswahl der Firma. Durch die Auswahl wird eine javascript/ajax Abfrage mit der ID der Firma an die DB gemacht. Danach muss ich die Werte wie oben mit while() als Drop Down Menü ausgeben.

Kann mir jemand ganz einfach schritt für schritt Erklären wie ich die Firmen ID an javascript/ajax übergebe, eine Abfrage an die DB mit dieser mache und das Ergebnis ausgebe?

[suit]

Kann mir jemand ganz einfach schritt für schritt Erklären wie ich die Firmen ID an javascript/ajax übergebe, eine Abfrage an die DB mit dieser mache und das Ergebnis ausgebe?

Beim Auswählen eines Werts (click/change-Event in der Auswahlliste - am besten nutzt du dafür ein Framework wie jQuery, welches das abstrahiert) nimmst du dieses und rufst die derzeige seite nochmal auf mit finduser.php?id=wert

finduser.php ist ein Affenformular - wenn id gesetzt ist, wird das 2. dropdown entsprechend der ID befüllt.

Im Prinzip musst du also zuerst dein Affenformular bauen und dann diesen zwischenrequest durch Ajax abkürzen indem du nur die Werteliste lieferst (z.B. als JSON oder XML) und dann ins DOM einbaust.

[sceiler]

Prinzipiell hätte ich es genauso gemacht wie du es schreibst, d.h. so:
<a href="finduser.php?ID='.$row['id']"><img src="images/bla.png">

Das kann ich hier aber nicht machen, weil noch andere Werte ausgewählt bzw. eingegeben werden. Die Auswahl der Firma und deren Mitarbeiter erfolgt weiter unten und wenn ich es so machen würde, würden die vorher eingegebenen Werte gelöscht werden. ja, ich könnte zwar diese mitübergeben, aber das will ich nicht. Ich möchte dass die Auswahlliste quasi nach Auswahl der Firma aufpopt.

[suit]

Das kann ich hier aber nicht machen, weil noch andere Werte ausgewählt bzw. eingegeben werden.

Das ist Unsinn.

Die Auswahl der Firma und deren Mitarbeiter erfolgt weiter unten und wenn ich es so machen würde, würden die vorher eingegebenen Werte gelöscht werden.

Warum sollten die gelöscht werdfen?

ja, ich könnte zwar diese mitübergeben, aber das will ich nicht.

Warum nicht? Affenformulare sind Essentiell für die Benutzerinteraktion - meinst du irgendwer hat die Motivation bei einem Fehler alles neu einzugeben?

Ich möchte dass die Auswahlliste quasi nach Auswahl der Firma aufpopt.

Das ist der 2. Schritt - mach zuerst deine Hausaufgaben, dann können wir weiterreden - du kannst nicht das Pferd von hinten aufzäumen.

[Rudi Ratgeber]

Guten Abend,

ich denke, dein Ansatz ist unklar.

Du brauchst in deinem Formular zwei <select> - im ersten sind die Firmen bei Auslieferung der HTML-Seite, die zweite ist leer.

Nun wählst du eine Firma und sendest per Ajax die Firmen-ID an ein Extra-PHP-Programm. Das gibt dir den zweiten <select> mit den Mitarbeiter-Namen zurück, das du per Javascript in die bereits vorhandene Seite einbaust.

Das Extra- PHP-Programm testest du durch Eingabe der URL im Browser:
http://example.com/mitarbeiter.php?firma_id=25

Als Ergebnis solltest du eine gültige select-Box bekommen mit den Mitarbeitern.

Kann mir jemand ganz einfach schritt für schritt Erklären wie ich die Firmen ID an javascript/ajax übergebe, eine Abfrage an die DB mit dieser mache und das Ergebnis ausgebe?

Hmm, erstmal hier Kontakt herstellen, bevor ich stundenlang Kot eintippe ;-)

Rudi

[suit]

Das Extra- PHP-Programm testest du durch Eingabe der URL im Browser:
http://example.com/mitarbeiter.php?firma_id=25

Nein, nicht extra - dasselbe Script wie ich schon schrieb. Das hat den Vorteil, dass man es ohne JavaScript dann auch verwenden kann (eben als Affenformular) und eben dann dort eine Verzweigung für die Ajax-Antwort einbauen kann um den Code nicht mehrfach warten zu müssen.

Als Ergebnis solltest du eine gültige select-Box bekommen mit den Mitarbeitern.

Als Ergebnis sollte entweder ein vollständiges Formular oder eine Liste der möglichen Werte daherkommen - die Ajax-Antwort unnötig mit HTML zuzumüllen ist nicht sinn der Sache.

[sceiler]

Danke, durch deine Antwort bin ich auf die Idee gekommen allgemeiner im Netzt zu suchen und bin dann auf das hier gestoßen:
http://coursesweb.net/ajax/ajax-post-php

Ich hoffe damit bekomm ich es hin.

[suit]

Ich hoffe damit bekomm ich es hin.

Es ist für dein Problem nicht relevant ob der Request mit POST ode GET gestellt wird.

[sceiler]

Es ist für dein Problem nicht relevant ob der Request mit POST ode GET gestellt wird.

Darum geht es doch nicht. Es geht darum das ich die Auswahlliste von den Mitarbeitern dynamisch zu der ausgewählten Firma haben möchte ohne zwischendurch die Auswahl der Firma per submit zu überprüfen, an die DB zu schicken und das Ergebnis wieder im Formular ausgebe. Der Aufwand ist meines erachtens viel größer, als wenn man es mit javascript machen würde.

[suit]

Darum geht es doch nicht. Es geht darum das ich die Auswahlliste von den Mitarbeitern dynamisch zu der ausgewählten Firma haben möchte ohne zwischendurch die Auswahl der Firma per submit zu überprüfen, an die DB zu schicken und das Ergebnis wieder im Formular ausgebe.

Ob du jetzt ein Formular per Submit-Button absendest oder per Ajax einen XHR rausjagst - es ist und bleibt ein HTTP-Request den der Server verarbeitet und zurücksendet (in dem Fall dein Script).

Der Aufwand ist meines erachtens viel größer, als wenn man es mit javascript machen würde.

Dir fehlt offenbar das nötige Grundlagenwissen um das zu beurteilen zu können, das geht klar aus der Frage und deinen bisherigen Codeschnipseln hervor - aber wenn du meinst, es wäre einfacher zuerst mit JavaScript herumzufrickeln und dann erst die Grundfunktion herzustellen: viel Spaß dabei.

Ich habe übrigens bisher nicht auf die (mittlerweile Scheunentorgroßen) Kontextwechselfehler bzw. Sicherheitslücken hingewiesen (sonst heissts wieder, es wird nur alles andere bemängelt, aber das Problem nicht gelöst) - aber es ist einfach an der Zeit.

Kontextwechsel

Diesen Artikel liest du in eigenem Interesse so lange, bis du folgenden Comic verstehst:

Exploits of a Mom

[sceiler]

Den Artikel kenne ich.

Ich habe es nunmal so gelernt das ganze File in <?php ?> zu setzen und per echo html Befehle auszugeben. Für mich persönlich ist die Variante auch einfacher zu verstehen als wenn man immer wieder php tags öffnen und schließen muss. Aber das ist nur meine Meinung.

Nebenbei bemerkt ist mir bereits deine vorgeschlagene Variante bekannt. Es ist halt meiner Meinung nach nervig und umständlich für den User, wenn er immer per submit button eine Firma auswählt, die Seite daraufhin neulädt und dann festzustellen dass der Mitarbeiter den er sucht gar nicht in dieser Firma ist. Daraufhin sucht er eine andere Firma und das Spiel beginnt von vorne.

Deshalb möchte ich es ja mit einer dynamisch verketteten Auswahlliste machen, die im Hintergrund sich die Daten aus der DB holt.

[Der Martin]

Hallo,

Den Artikel kenne ich.
Ich habe es nunmal so gelernt das ganze File in <?php ?> zu setzen und per echo html Befehle auszugeben.

darum geht es doch gar nicht (abgesehen davon, dass es in HTML keine Befehle gibt). Es geht darum, die Ausgabe so aufzubereiten, dass sie im Zielkontext korrekt interpretiert wird und keine unerwünschten Nebenwirkungen hat.

Nebenbei bemerkt ist mir bereits deine vorgeschlagene Variante bekannt. Es ist halt meiner Meinung nach nervig und umständlich für den User, wenn er immer per submit button eine Firma auswählt, die Seite daraufhin neulädt und dann festzustellen dass der Mitarbeiter den er sucht gar nicht in dieser Firma ist. Daraufhin sucht er eine andere Firma und das Spiel beginnt von vorne.

Du hast noch nicht verstanden, was wir dir sagen wollen. Die "umständliche" Lösung, die du beschreibst, sollte die Basislösung sein - ein Fallback, der immer funktioniert, auch wenn Javascript nicht zur Verfügung steht. Sobald aber JS verfügbar ist, kann man so die Handhabung entsprechend komfortabel machen.

Deshalb möchte ich es ja mit einer dynamisch verketteten Auswahlliste machen, die im Hintergrund sich die Daten aus der DB holt.

Ja. Und ob dieses Holen der Daten "im Hintergrund" oder mit einem offen sichtbaren Submit erfolgt, der Aufwand ist der gleiche. Allerdings hättest du mit der AJAX-only-Variante den Nachteil, dass das Formular ohne JS gar nicht nutzbar ist, im anderen Fall wäre es immerhin benutzbar, wenn auch mit Komforteinbußen.

So long,
 Martin

[sceiler]

Du hast noch nicht verstanden, was wir dir sagen wollen. Die "umständliche" Lösung, die du beschreibst, sollte die Basislösung sein - ein Fallback, der immer funktioniert, auch wenn Javascript nicht zur Verfügung steht. Sobald aber JS verfügbar ist, kann man so die Handhabung entsprechend komfortabel machen.

Also mache ich jetzt die Methode mittels Submit Button, seite neuladen, Eingaben speichern und danach widme ich mich der javascript Methode...

[sceiler]

Momentan sieht es bei mir so aus:

finduser.php // Ist die Form wo alle Eingaben etc. getätigt werden

  
echo '		  
<tr>  
	<td>Supplier</td>'; ?>  
	<td><div id="txt2"><select name="selectsupplier" size="1" onChange="ajaxrequest("get_users_from_db.php", "content")">  
	<?php  
	while ($row = mysql_fetch_assoc($query_get_supplier))  
		{  
			echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';  
		}  
echo '  
			</select></div>  
	</td>  
<tr>';  
echo '  
<tr>  
	<td>User</td>  
	<td><div id="content"></div>';  
echo '  
	</td>  
</tr>';  
		  
?>

Die Funktion ajaxrequest() übergibt als 1. Parameter die .php Seite wo die ID verarbeitet werden soll und der 2. Wert gibt den Ort an, wo die 2. Auswahlliste mit den Mitarbeitern hin soll.

getuser.js

// create the XMLHttpRequest object, according browser  
function get_XmlHttp() {  
  // create the variable that will contain the instance of the XMLHttpRequest object (initially with null value)  
  var xmlHttp = null;  
  
  if(window.XMLHttpRequest) {		// for Forefox, IE7+, Opera, Safari, ...  
    xmlHttp = new XMLHttpRequest();  
  }  
  else if(window.ActiveXObject) {	// for Internet Explorer 5 or 6  
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  }  
  
  return xmlHttp;  
}  
  
// sends data to a php file, via POST, and displays the received answer  
function ajaxrequest(php_file, tagID) {  
  var request =  get_XmlHttp();		// call the function for the XMLHttpRequest instance  
  
  // create pairs index=value with data that must be sent to server  
  var  the_data = document.getElementById('txt2').innerHTML;  
  
  request.open("POST", php_file, true);			// set the request  
  
  // adds  a header to tell the PHP script to recognize the data as is sent via POST  
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
  request.send(the_data);		// calls the send() method with datas as parameter  
  
  // Check request status  
  // If the response is received completely, will be transferred to the HTML tag with tagID  
  request.onreadystatechange = function() {  
    if (request.readyState == 4) {  
      document.getElementById(tagID).innerHTML = request.responseText;  
    }  
  }  
}

get_users_from_db.php

<?php  
	include ("functions.php");  
	dbconnect();  
	  
	$id = $_POST['selectcompany'];  
	$query = mysql_query("SELECT id, contactName  
							FROM company  
							WHERE id = '$id'");  
	  
	while ($row = mysql_fetch_assoc($query))  
		{  
			echo '<option value="'.$row['id'].'">'.$row['contactName'].'</option>';  
		}  
?>

Es läuft auch alles augenscheinlich, also keine Fehlermeldungen. Jedoch bekomme ich keine Auswahlliste mit Mitarbeitern angezeigt.
Hast du vllt eine Idee wieso?