[PHP/JavaScript] dynamische <Select><Option> Felder aus Datenbank onCklick ändern

[Wechhe]

Moin

Ich habe da ein Problem, zudem es zwar mithilfe von google allerhand Antworten gibt, aber keinen passt so richtig oder funktioniert.

Ich habe auf einer Seite zwei und manchmal sogar drei Auswahlfelder der Form

<form action="select.htm">
  <p>
    <select name="Test1" style="width: 150px; text-align: center;" size="10">
	<option value="P101">EINS</option>
	<option value="P102">ZWEI</option>
	<option value="P103">DREI</option>
	<option value="P104" >VIER</option>
	</select>
  </p>
</form>

Die Daten im ersten Auswahlfeld, also EINS, ZWEI, DREI, VIER usw werden im ersten Feld aus der Datenbank ausgelesen.
Nun soll folgendes funktionieren:
Wenn ich eins dieser Daten auswähle, sollen im zweiten Auswahlfeld daneben in Abhängigkeit von der ersten Auswahl weitere Auswahlmöglichkeiten erscheinen, die ebendalls aus der Datenbank abgefragt werden. (SELECT ... FROM ... WHERE Bedingung2= Auswahl 1)
Und wenn ich dann etwas anderes auswähle im ersten Feld, sollen sich die Daten im zweiten Feld natürlich verändern, in dem eine neue Anfrage gesendet wird.

Wie mache ich das?

 

[geodreieck24]

Wie sehen denn deine Fähigkeiten in PHP und JavaScript aus? Leider ist die Lösung deines Problems nicht ganz trivial, also gewisse Grundkenntnisse zumindest in PHP sollten schon da sein.

Du hast zwei Möglichkeiten:

1. Eine Lösung nur mit PHP:
   Du zeigts auf der ersten Seite nur die erste Liste an. Der Nutzer wählt dann einen Eintrag und schickt das Formular ab, wobei ja seine Auswahl ein den Server übertragen wird.
   Dein PHP Skript frägt jetzt die nächste Ebene an Auswahlmöglichkeiten ab und gibt diese zusätzlich zum ersten Level wieder als html-Seite zurück usw.
   
   
2. Eine Lösung mit PHP und JavaScript:
   Dabei wird eine js-Funktion aufgerufen, wenn der Nutzer einen Eintrag auswählt, die dann im Hintergrund per AJAX eine neue Liste von deinem Server abruft und diese als HTML ausgibt.

Optimal wäre natürlich eine Kombination aus beiden Lösungen, dh. wenn ein Nutzer kein js aktiviert hat, funktioniert das Formular trotzdem noch. Das bedeutet, dass das js nur als ein Komfortfeature agiert (so handhabe ich das immer).

 

[Wechhe]

Erstmal vielen Dank für deine Antwort.

Vergessen zu erwähnen habe ich noch, dass es auf dem IE8 laufen muss (bald 9)

Meine PHP Kentnisse - naja, ich fange sozusagen gerade an mit PHP, habe aber C/C++ und Java Kentnisse, bin also dem Programmieren nicht ganz fern.

Zur Lösung 1:

Du meinst, dass mit dem Abschicken des Formulars die Seite neu geladen wird?
Das wäre sicher die einfachste Lösung, die aber nicht so schön aussieht, wenn sich nach der Auswahl ständig die Seite neu läd. Alternativ fällt mir dazu ein, dass man mit Frames arbeiten kann, sodass sich nur das Frame neuläd. Das sollte ja auch gehen oder?

Lösung 2:

Das erscheint mir am sinnvollsten. Über AJAX habe ich mal was gelesen, das scheint ja toll zu sein. Ich lese mir das mal richtig durch und schau mal, ob ich damit was anfangen kann. Hast du (oder jemand anderes) eine Empfehlung für eine gute AJAX Seite, mit Beispielen und vielleicht ein paar fertigen Scripts?

 

[Rain]

http://jquery.com/ --> Ajax nett verpackt in einer Art eigenen Programmiersprache (Javascript Library)

 

[Mr. Snoot]

In der check.php kannst du eine DB-Abfrage einbauen; hab beispielhaft einfach mal feste Werte vorgegeben.

 

[Wechhe]

Vielen Dank für eure Antworten.

Mr Snoot,

leider funktioniert bei deinem Quellcode nicht, dass er nach Auswahl die neuen Optionen übernimmt. Ich kann den Fehler nicht finden - das Auswahlmenü bleibt leer.

Hast du eine Idee, woran das liegt?

 

[geodreieck24]

Also bei mir funktioniert das Skript von Mr. Snoot problemlos.
Was sagt denn die js Fehlerkonsole?
Abgesehen davon würde ich trotzdem zuerst eine Lösung nur mit PHP entwickeln und diese dann nachträglich mit einem js vereinfachen, sonst schließt du ja alle Nutzer aus, die js deaktiviert haben.

 

[Wechhe]

Das ist kein Problem, da Javascript immer an ist bei den Benutzern dieser Seite.
Ich habe keine js Fehlerkonsole, ich speichere Fortschritte immer ab und aktualisiere den Browser, bis es geht...

Es muss auf dem IE8 laufen, den ich dazu auch benutze und ich stelle gerade fest, dass es auf dem FF 5 läuft....

Es muss also am IE8 liegen.

 

[geodreieck24]

Hm, hab mir das mal kurz angesehen und liegt wohl hieran: http://support.microsoft.com/kb/276228/en-us
Achja, drück mal in IE F12, zumindest im IE9 kommt da ne ganz nette Developer-Konsole.

Auf jeden Fall weiß ich jetzt wieder, warum ich den Internet Explorer so gern hab..

 

[Mr. Snoot]

Hm, der IE übernimmt die option-Tags nicht, sondern nur den Text dazwischen. Vielleicht weiß ja ein JS-Guru warum.

 

[Wechhe]

Hm, das ist ja wirklich ärgerlich. Ich habe schon mehrfach wegen des Internet Explorers einen innerlichen Schreikrampf bekommen...

Welche, bzw zu welchem Zeitpunkt übernimmt der IE die <option> Tags nicht?
Ich verstehe gerade nämlich nicht, was genau nicht funktioniert.

Ist es sicher, dass es dieser innerHTML Fehler ist? Der ist immerhin schon 8 Jahre in der Knowledgebase...

Ergänzung (29. Juni 2011)

Ich habe das zu änderne Formular der Form in einem DIV Container


Nebenbei: Es handelt sich hierbei um eine Auswahlliste ohne Dropdown, also anders als bei Mr.Snoot im Beispiel.
Da das ganze auf anderen Seiten auch mit Tabellen funktionieren soll, was aber mit dem InternetExplorer aber nicht funktionieren wird, dachte ich mir, dass ich vielleicht einfach bei Änderung den gesamten DIV Container verändere. Ich kann mir ja in Javascript eine Funktion schreiben, die bei Aufruf entsprechenden Code erzeugt und in Abhängigkeit der Auswahl eine Datenbankabfrage macht, und die Daten aus der DB in diesen Code mit einfügt und das alles als DIV-Container an die innerHTML(DIV-Container) übergibt.
Würde das für meinen Fall und für den Fall mit Tabellen funktionieren?

Edit 16:00 Uhr

Quellcode entfernt, da eh falsch und unübersichtlich. Falls den jemand braucht, weil er das gleiche Problem lösen muss, kann er mir eine Nachricht schreiben.

 

[geodreieck24]

Hm, das ist ja wirklich ärgerlich. Ich habe schon mehrfach wegen des Internet Explorers einen innerlichen Schreikrampf bekommen...

So gehts mir auch immer.

Welche, bzw zu welchem Zeitpunkt übernimmt der IE die <option> Tags nicht?
Ich verstehe gerade nämlich nicht, was genau nicht funktioniert.

Ist es sicher, dass es dieser innerHTML Fehler ist? Der ist immerhin schon 8 Jahre in der Knowledgebase...

Das kannst du ganz einfach testen, das steht sogar auf der Microsoft Seite.

Nebenbei: Es handelt sich hierbei um eine Auswahlliste ohne Dropdown, also anders als bei Mr.Snoot im Beispiel.

Das spielt keine Rolle, ist im Endeffekt das gleiche.

Da das ganze auf anderen Seiten auch mit Tabellen funktionieren soll, was aber mit dem InternetExplorer aber nicht funktionieren wird, dachte ich mir, dass ich vielleicht einfach bei Änderung den gesamten DIV Container verändere. Ich kann mir ja in Javascript eine Funktion schreiben, die bei Aufruf entsprechenden Code erzeugt und in Abhängigkeit der Auswahl eine Datenbankabfrage macht, und die Daten aus der DB in diesen Code mit einfügt und das alles als DIV-Container an die innerHTML(DIV-Container) übergibt.
Würde das für meinen Fall und für den Fall mit Tabellen funktionieren?

Ja, so sollte das funktionieren.

Hier nochmal den Code, der anscheinend noch andere Fehler beinhaltet:

Hinter writeOption($query, 'T5') im php code fehlt ein Semikolon. Sonst schaut das ganze doch schon gut aus. Was funktioniert denn noch nicht?

 

[Wechhe]

Soooooooo *JUBEL*

Dank dieser wunderbaren Vorlage und euren Tipps habe ich alle Fehler gefunden. Vielen Dank nochmals!
Es waren noch einige Fehler dabei...

Das AJAX Script ruft nun eine JS Funktion auf, die einen ganzen DIV Container erzeugt und das funktioniert auch wunderbar.

Nun muss ich die ganzen Dateien nur noch sinnvoll organisieren, damit alle anderen .php Dateien darauf zugreifen können und ich nicht tausende Bib.-Dateien habe.

Ich mache einfach mal weiter und schau mal, was mich noch so erwartet - bei weiteren Problemen behalte ich mir vor, eure Hilfe erneut zu ersuchen

Allerdings habe ich noch nicht herausgefunden, inwiefern mir diese Entwicklerkonsole weiterhilft.

 

[Wechhe]

Da bin ich schonwieder!

Ich habe nun folgendes Problem:

Ich habe eine select Box, in die Daten aus der Datenbank geladen werden. Beim Auswählen eines Elementes aus dieser Liste wird dann dynamisch in ein zweites Auswahlfeld Elemente geladen. Das funktioniert bis hierhin.
Nun will ich aber in der zweiten Select-Box etwas auswählen, woraufhin sich auf der Seite innerhalb eines bestehenden DIVs eine Tabelle aufbaut mit Daten aus der Datenbank.
Beim Klicken auf ein Element aus der zweiten Box kommt folgender Fehler:

Meldung: Objekt erforderlich
Zeile: 90
Zeichen: 3
Code: 0
URI: ....ajax.js

Auszug aus der ajax.js
Zeile 90 ist var auswahl(document.getElementByID(id).value; - dritte Zeile hier

function auswahl(id, ausgabe)
{
  var auswahl = document.getElementById(id).value;

  with (new Ajax())
  {
    method = "POST";
    
    //Jede Abfrageart erhaelt eine eigene PHP Datei mit den speziellen Abfragen
    
    if(ausgabe == 'ltTabellen')
    {
      url = 'serientabelle.php';
    }
    else if(ausgabe == 'ausgabe')
    {
      url = 'ajaxquery.php';
    }
    
    params = "auswahl="+auswahl;

    onSuccess = successHandler;
    onError = errorHandler;
    doRequest();
  }

  //Den Text in die Seite einfuegen
  function successHandler(txt,xml)
  {
    document.getElementById(ausgabe).innerHTML=txt;
  }

  //Fehler
  function errorHandler(msg)
  {
    document.getElementById(ausgabe).innerHTML=msg;
  }
}

Die ajax.js wurde an einer Stelle geändert, es wird nun abgefragt, welches das zu verändernde Element ist und dann die entsprechende PHP geladen.

Der Code, der die ajax.js aufruft, wird dynamisch durch die Auswahl aus der ersten Selectbox erstellt aus der ajaxquery.php:

<?php
function writeDivOption($query, $id)
{
	if (!mssql_num_rows($query)) 
	{	
		$divausgabe = "<form action=\"select.htm\"> <p><select style=\"width: 80px;\" size=\"10\"><option>Keine Daten</option> <option>verfuegbar</option></select></p></form>";
		return $divausgabe;
	} 
	else 
	{
		$divausgabe = "<form action=\"select.htm\"> <p><select style=\"width: 80px;\" size=\"10\"onChange=\"auswahl(id, 'ltTabellen')\">";
		for ($i = 0; $i < mssql_num_rows($query); ++$i) 
		{
			$res[$i] = mssql_result($query, $i, $id);
			$divausgabe .= "<option value=\"$res[$i]\">$res[$i]</option>";
		}
		$divausgabe .= "</select></p></form>";
		return $divausgabe;
	}
}

if(isset($_POST['auswahl']))
{
	$auswahl = $_POST['auswahl'];
	$query = mssql_query("SELECT DISTINCT LT_T5 as T5 FROM tbl_LT WHERE LT_BR='$auswahl'");
	echo writeDivOption($query, 'T5');
}
?>

EDIT:

Es liegt daran, dass document.getElementById(id).value NULL ist. Wieso wird der Wert nicht korrekt ausgelesen?

 

[geodreieck24]

Folgender HTML-Code wird unter anderem durch dein zweites Skript erstellt:

<select style="width: 80px;" size="10" onChange="auswahl(id, 'ltTabellen')">

In deinem onChange handler übergibst du die id des Elements, allerdings hat das Element gar keine id!
Also zB:

<select id="auswahl2" style="width: 80px;" size="10" onChange="auswahl(id, 'ltTabellen')">

 

[Wechhe]

Oh, wie blöd ist das denn...

Danke!

Nun kämpfe ich mit den Umlauten, die werden nicht ordentlich aus der Datenbank ausgelesen.
MS Server 2000 und PHP v. 5.2.9

Bei mysql gibt es ja glaube ich einen Befehl, um alle character und names in der Datenbank in UTF8 umzuwandeln. Bei MSSQL ist das irgendwie anders.

 

[geodreieck24]

Grundsätzlich musst du dafür sorgen, dass die komplette Verarbeitungskette den gleichen Zeichensatz verwendet. D.h. wenn die Daten in der Datenbank als ISO-8859-1/ISO-8859-15/utf-8 vorliegen, muss die Seite, die die Zeichen beinhaltet, auch als ISO-8859-1/ISO-8859-15/utf-8 deklariert sein. Das geht entweder über einen html-header-Tag oder über einen http header, wobei letzteres zu bevorzugen ist, zB:

header('Content-Type: text/html; charset=UTF-8');

Da was du wahrscheinlich bei MySQL meinst, ist der query SET NAMES utf8. Das sorgt dafür, dass alle abgefragten Daten als UTF-8 zurückgegeben werden (geltend für diese eine Datenbankverbindung), ganz egal, wie sie gespeichert sind.
Meines Wissens gibt es so etwas bei MsSQL leider nicht.

 

[Wechhe]

Genau diesen mysql Befehl meine ich. Dann muss ich die MS Datenbank wahrscheinlich per Hand einstellen, die Frage ist, ob der PHP Treiber da mitspielt.

Ich mache jetzt erstmal Wochenende und mache nächste Woche weiter.
Danke und schönes Wochenende