kostenloser Webspace werbefrei: lima-city


aus PHP-Datei nach-Laden und Werte übergeben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kreditwunsch

    kreditwunsch hat kostenlosen Webspace.

    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)



  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. karlsve

    Moderator Kostenloser Webspace von karlsve

    karlsve hat kostenlosen Webspace.

    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
  4. Autor dieses Themas

    kreditwunsch

    kreditwunsch hat kostenlosen Webspace.

    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
  5. technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    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.
  6. Autor dieses Themas

    kreditwunsch

    kreditwunsch hat kostenlosen Webspace.

    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 ?

  7. technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    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.
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!