aus PHP-Datei nach-Laden und Werte übergeben
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abfrage
anpassen
auswahl
code
datei
datum
eingabe
element
ergebnis
feld
formular
hintergrund
instanz
lade
laden
nachladen
null
option
url
verstehen
-
Hallo
ich möchte nach Event eine PHP-Datei laden "im Hintergrund nach-Laden"
und dessen Inhalt an die aufrufende Seite zurückgeben ? (ohne Browser reLoad)
im Detail geht es darum:
je nach Auswahl in einem ersten DropDown-Feld (Formular)
sollen die Auswahl-Elemente für ein zweites DropDown-Feld dynamish geladen werden
(die Elementa für das zweite DropDown-Feld können sich jederzeit ändern,
daher sollen diese - um "aktuelll" zu sein - aus MySQL kommen)
also brauch ich einen Code, der bei Auswahl in DropDown-Feld 1 (onChange?)
eine PHP-Datei im Hintergrund aufruft, und das Ergebnis in DropDown-Feld 2 schreibt.
habe dazu Beispiele mit jQuery .load() gefunden, aber die sind alle mit .click(function()
$("#auswahl1").click(function(){ $("#auswahl2").load("nachladen.php"); });
... wie mache ich sowas bei onChange aus einem DropDown-Feld?
und wie übergebe ich die Auswahl aus Feld1 an die zu ladende Datei (als GET)
so dass der Wert für die .php Datei verfügbar ist (für MySQL WHERE Abfrage)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo kreditwunsch,
das von dir angestrebte ist unter dem Namen AJAX zu finden.
Da du in deinem Codebeispiel anscheinend jQuery nutzt würde ich dir diese Seite empfehlen:
http://api.jquery.com/category/ajax/
Dort ist eigentlich so gut wie alles nötige zu finden und ich wünsche dir viel Glück auf deinem Weg zum Ziel.
MfG,
karlsve -
Danke
also doch jquery ... eigentlich wäre mir eine Lösung ohne jQuery lieber
das waren eben die meisten Beispiele, die ich beim Googeln gefunden hatte
Wenn jQuery,
dann bekomme ich die Daten aus nachladen.php wohl so in das zweite DropDown
function updateSelect() { jQuery.ajax({ url: 'nachladen.php', dataType: 'json', success: function(retval) { if (retval == 'error') { alert('Fehler: PHP-Skript lieferte keine passenden Daten'); } else { jQuery.each(retval, function(key, value) { var nr = (key + 1); jQuery('#auswahl2').append('<option value="' + value.wert + '">' + nr + ' - ' + value.name + '</option>'); }); } } }); }
die Datei 'nachladen.php' erzeugt im Falle eines Fehlers den String: 'error'
ansonsten einen JSON Code:
[ { "wert":"x", "name":"Bezeichnung1" }, { "wert":"y", "name":"Bezeichnung2" }, { "wert":"z", "name":"Bezeichnung3" } ]
sollte dann innerhalb id="auswahl2" erzeugen: (nur das zwischen <select ...> und </select>)
<br> Auswahl2: <select id="auswahl2" name="wahl2"> <option value="x">1 - Bezeichnung1</option> <option value="y">2 - Bezeichnung2</option> <option value="z">3 - Bezeichnung3</option> </select>
das ganze Formular sieht so aus: (vorher)
<form name="form1" method="post" action=""> <br> Auswahl1: <select id="auswahl1" name="wahl1" onChange="updateSelect();"> <option value="0">... bitte auswählen</option> <option value="a">Aaaaa</option> <option value="b">Bbbbb</option> <option value="c">Ccccc</option> </select> <br> <br> Auswahl2: <select id="auswahl2" name="wahl2"> </select> <br> <br> OK: <input type="submit" name="senden" value="Abschicken"> </form>
Wie kann ich jetzt bei updateSelect() den Wert übergeben
aus dem DropDown ( id="auswahl1" name="wahl1" )
so dass die nachladen.php mit diesem Wert als Parameter aufgerufen wird
also
bei Wechel zu Aaaaa ---> nachladen.php?wahl1=a
bei Wechel zu Bbbbb ---> nachladen.php?wahl1=b
bei Wechel zu Ccccc ---> nachladen.php?wahl1=c
... und wenn "... bitte auswählen" gewählt ist, dann zweites DropDown "leeren"
... und Absenden nur möglich, wenn beide DropDowns ausgewählt wurden ...
oh weh ... ich hab mir das einfacher vorgestellt ..... ^O^
Beitrag zuletzt geändert: 22.3.2012 14:20:37 von kreditwunsch -
also, eine Lösung ohne jQuery geht schon, das ist sogar gar nicht mal so schwer.
du musst das ganze in dem Fall mit AJAX machen, wenn du keinen Reload haben willst, denn der reaload würde ja die bisher eingetragenen Values wieder löschen.
also baust du zunächst mal eine Instanz auf:
ajax.js
// XMLHttpRequest-Instanz erstellen // ... für Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xmlHttp = false; } } // ... für Mozilla, Opera und Safari if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); }
den Code da oben musst du nicht ganz verstehen. Das teil baut einfach nur ein ActiveX-Steuerelement auf, dass dann daten zum Server Schickt und auf eine Antwort wartet.
Nachdem du dann die Instanz aufgebaut hast, kannst du einen Get-respons senden:
function add_data_add_documents(num, copy){ //Daten einfügen für Ordner if(document.getElementById("ID").value){ //Ladestatus ausgeben NeuerEintrag = new Option('Lade...', '', false, true); document.getElementById("ID").options[document.getElementById("ID").length] = NeuerEintrag; //Daten laden if (xmlHttp) { xmlHttp.open('GET', 'DEIN_PFAD/DEINE_DATEI.php?value='+document.getElementById("ID").value, true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { eval(xmlHttp.responseText); } }; xmlHttp.send(null); } }else{ //Ladestatus wieder entfernen bzw. Listenfeld auf 0 setzen document.getElementById("ID").length = 0; } }
Damit Prüfst du quasi ob zuvor etwas ausgefüllt wurde und wenn ja, dann lädt er DEINE_DATEI.php in der dann dein gewünschter Code steht.
der Codeteil ist allerdings verallgemeinert, weil ich auch soewas ähnliches habe.
bei mir wird eine Zahl in ein Textfeld eingegeben und bei einem Oncange wird das Value dieses textfeldes ausgelesen und in die Dropdownbox eird ein Ladestatus eingefügt, sofern sich etwas geändert hat. wird nichts ausgewählt, wird das Dropown wieder auf 0 gesetzt.
Deine php-Datei könnte nun so aussehen:
header('Content-Type: text/javascript; charset=UTF-8'); //Prüfen ob sich das Value geändert hat if($secct != isset($_SESSION['objnrcange']) ? $_SESSION['objnrcange']: 'Lade'){ echo 'document.getElementById("ID").length = 0;'; } //Prüfen ob ct gesetzt ist if ($ct == 'show_data') { //Prüfen ob secct ausgefüllt wurde if (!empty($secct)) { //Anfang der Ausgabevariablen als array echo ' NeuerEintrag = new Option(\'\', \'\', false, false); document.getElementById("user'. $_GET['num'] .'").options[document.getElementById("user'. $_GET['num'] .'").length] = NeuerEintrag;'; //Daten abfragen $abfrage = "SELECT * FROM user WHERE objnr = '" . $secct . "' ORDER BY last_name, first_name"; $ergebnis = mysql_query($abfrage); while ($row = mysql_fetch_object($ergebnis)) { //Value prüfen als JavaScript echo ' if ((copy == 2 || copy == 4) && document.getElementById("user"+calccopy).value == '.$row->id.') { NeuerEintrag = new Option(\'' . $row->last_name . ', ' . $row->first_name . '\', \'' . $row->id . '\', false, true); document.getElementById("user'. $_GET['num'] .'").options[document.getElementById("user'. $_GET['num'] .'").length] = NeuerEintrag; } else { NeuerEintrag = new Option(\'' . $row->last_name . ', ' . $row->first_name . '\', \'' . $row->id . '\', false, false); document.getElementById("user'. $_GET['num'] .'").options[document.getElementById("user'. $_GET['num'] .'").length] = NeuerEintrag; }'; } } else { //Keine Eingabe getätigt, also Inhalt löschen echo 'document.getElementById("user'. $_GET['num'] .'").options[document.getElementById("dir'. $_GET['num'] .'").length] = null;'; } } $_SESSION['objnrcange'] = $secct;
In der PHP-datei wird dann Quasi eine JS-Datei generiert, die in der vorherigen JS-Datei dank eval auch ausgeführt wird.
Das ist aber nur beispielhaft, das ganze musst du dann natürlich noch auf deine Bedürfnisse anpassen. -
ohje, das sieht ja noch komplzierter aus als mit jQuery
werde mal versuchen das an mein Formular anzupassen
parallel suche ich immernoch danach, wie ich für den Qjuery Code
den ausgewählten Wert aus der DropDown1 an die Funktion updateSelect() übergeben kann
damit ich es etwa so machen kann
function updateSelect(eingabe) { jQuery.ajax({ url: 'nachladen.php?wahl1=' +eingabe, dataType: 'json', // ... usw ...
PS: in Deinem PHP Code muss doch oben, nach header() noch rein
session_start();
sonst läuft ja gar keine Session um die dann (ganz unten) zu belegen ?!
.. aber das ist noch das geringste Problem (für mich den Code so zu verstehen, damit ich in anpassen kann)
z.B.:
document.getElementById("user'. $_GET['num'] .'").options[document.getElementById("user'. $_GET['num'] .'").length] = NeuerEintrag;';
holt das die Länge (length = count) aus einem DOM Element wi z.B:
<select id="user1><option id="user1" .. .></option></select>
???
muss also jedes <option> Element eine eigene ID haben ?
-
also, sie session wird bei mir in ner anderen Datei gestartet, damit ich das nicht ständig noch zusätzlich überall reinschreiben muss... und das count ist ne vordefinierte Variable, die du aber nicht brauchst... lenght holt alleine schon die Anzahl der Values ab.
die abfrage
(copy == 2 || copy == 4) && document.getElementById("user"+calccopy).value == '.$row->id.'
prüft bei mir lediglich, wann etwas kopiert werden soll, das brauchst du also nicht.
du kannst die ganze If-Anweisung mit
NeuerEintrag = new Option(\'ANZEIGE\', \'VALUE\', false, false); document.getElementById("ID").options[document.getElementById("ID").length] = NeuerEintrag;
ersetzen... also in der php-datei, die eine JS-Datei erzeugt.
Da wo quasi das erste Mal ein neuer Eintrag erzeugt wird, wird nur ein leeres Feld erzeugt, damit nicht sofort etwas ausgefüllt ist.
damit du das script verstehst, was das genau macht, geh mal auf meinen Space und logg dich da ein
User: admintest
PW: test
Objektnummer: 1
und geh da mal auf Dokumente hinzufügen... dann kannst du da bei Objektnummer z.B. eine 1 eingeben und er generiert dann die Selectboxen und leert sie auch wieder, wenn das Value gelöscht wird oder die Objektnummer nicht existiert. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
