[JavaScript] PHP Code per Javascript steuern

[Silent]

hallo!

Ich habe einen PHP Code der aus 2 teilen besteht!
nun möchte ich das teil 1 beim aufrufen der Datei gestartet wird und teil 2 erste wenn ich bei einer onClick action!

folgender Code

<form action="<? $PHP_SELF ?>" method="GET">

<?php
#####################TEIL1###########################################
include "_open_vers.php";
$res = mysql_query("select * from pdaten", $link);
$count =  mysql_num_fields($res);

echo "<select size=\"1\" name=\"bed\">";
for ($i=0; $i<$count; $i++) {
echo "<option value=\"".mysql_field_name($res, $i) ."\">".mysql_field_name($res, $i) . "</option>";
}
echo "</select>";
echo " <input type=\"submit\" value=\"Send\">";
#################TEIL2##############################################
$sql = "SELECT * FROM `personendaten0000` DISTINC group by $_GET[bed]";
$result = mysql_query($sql);

echo "<select size=\"1\" name=\"bed2\">";
while ($row = mysql_fetch_object($result))
 {
echo "<option value=\"".$row->$_GET[bed] ."\">".$row->$_GET[bed] . "</option>";
 }
echo " </select>";


echo "</form>";
 ?>

jetzt soll eben jedesmal wenn ich im ersten pulldown was anklicke teil 2 ausgeführt werden!

ich will keine fertig code sondern nur einen Lösungshinweis bzw. mit welcher funktion man das am besten lösen könnte!

ich hoffe ihr versteht mich und könnte mir weiterhelfen!


thx

[asp2php]

du lädst die Seite neu bei onChange-Event des Select-Box oder bei Betätigen des send-Buttons, etwa so

if (!isset($_GET['bed'])) { // 1. Teil
   ...
   echo "<select .... onChange=\"this.form.submit();\" ...>";
   ...
} else { // 2. Teil
   ...
} 

[Silent]

hmh danke, das kommt schon fast hin!

Das Problem ist er soll mir nur den code ab teil 2 ausführen weil ich den teil 1 auch noch brauche!

daher beim ersten mal bis zu teil1 bei onChange
Teil1 (mit den vorher ausgewählten Werten)
+
Teil 2

komme ich da mit der selben logik hin oder muss ich was anderes verwenden?

[asp2php]

seufz ...

dann nimm if ... else ... raus und prüfe nur mit if (isset...) beim 2. Teil

[Silent]

passt ich habe jetzt noch ein hidden feld eingefügt auf das er abfragt!
jetzt funktioniert!


thx

[Godfrey]

Anknüpfend an dieses Problem habe ich eine weitere Frage.

Ich habe auf einer Seite zwei Selectboxen wobei der Inhalte der zweiten Box von der Auswahl der ersten abhängig ist. Die Boxen werden mit den Funktionen:
1. Box

function kategorie_select($default, $select_name = "kategorie")
{
.....

        $style_select = '<select name="' . $select_name . '">';
        for($i = 0; $i < count($this_kategoriedata); $i++)
        {
            $selected = ( ( $i + 1 ) == $default ) ? ' selected="selected"' : '';
            $style_select .= '<option value="' . ( $i + 1 ) . '"' . $selected . '>' 
. $this_kategoriedata[$i][0] . '</option>';
        }
        $style_select .= "</select>";
    }

    return $style_select;
} 

2. Box:

function subkat_select($default, $kategorie, $select_name = "subkat")
{
...
        $style_select = '<select name="' . $select_name . '">';
        for($i = 0; $i < count($this_kategoriedata); $i++)
        {
            if ( $this_kategoriedata[$i][0] == $kategorie )
            {
                $selected = ( ( $i + 1 ) == $default ) ? ' selected="selected"' : '';
                $style_select .= '<option value="' . ( $i + 1 ) . '"' . $selected . '>' 
. $this_kategoriedata[$i][1] . '</option>';
            }
        }
        $style_select .= "</select>";
    }

    return $style_select;
} 

Beim Start der Page werden die Defaultwerte genommen. Wird aber die Auswahl in der ersten Box geändert muss sich der Inhalt der zweiten Box dementsprechend "anpassen". Gibt es mit Javascript noch eine andere Möglichkeit den Inhalt der zweiten Box zu ändern ohne die Seite per Request neu zu laden? Ich möchte dazu natürlich auch die PHP-Funktion verwenden.

[wahsaga]

http://www.php-resource.de/forum/sho...threadid=32355

[Godfrey]

Danke @wahsaga

das hatte ich auch gefunden und mir schon angeschaut. Aber das ist eigentlich genau das was ich nicht will, alles in JS-Variablen füllen. Die Befüllung der Boxen geschieht aus der DB und eben je nach Auswahl der ersten Box soll er die Daten für die zweite Box holen.

Scheint als würde ich das doch mit einem Reload der Seite machen müssen um die zweite Box richtig zu füllen. Ich wollte eigentlich nur einen Neuaufbau der Seite verhindern.

[wahsaga]

Wenn du Daten vom Server holen willst, ohne die Seite neu zu laden - dafür gibt es das XMLHTTPRequest-Objekt, vulgo "AJAX".

[Godfrey]

Ah OK, Danke, dann muss ich mir da mal Informationen drüber holen. Damit hatte ich bisher noch nichts zu tun.

[Godfrey]

Hallo,

hab mich mal schlau gemacht über AJAX und auch sehr viel gefunden was ich brauchen kann. Der Code ist auch schon fast fertig, leider hänge ich jetzt bei einer Kleinigkeit im JS. Den Code habe ich von einem Beispiel das sehr gut auch den Weg zeigte zwischen Client-Server-Client. Leider scheint da aber ein Fehler drin zu sein. Ob von mir oder aus dem Beispiel kann ich nicht sagen, da ich den Javacode nur an einer Stelle ergänzt habe um einen Wert gleich zu selektieren. Ich habs aber schon vorher ohne meine Änderung getestet und da gings auch nicht.

Der Code im JS:

var options = "";
var first;

function loadOptions(url, id) {
    if (window.XMLHttpRequest) {
        var xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttp.open("GET", url, true);

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                first = true;
                _xmlFileLoaded(xmlHttp.respon************ML, id);
            }
            else {
                alert ("Fehler bei der Kommunikation mit dem Server:\n" + xmlHttp.statusText);
            }
        }
    };
    window.setTimeout(function () {xmlHttp.send(null);}, 10);
}

function _addOption(xmlNode) {
    var value = xmlNode.getAttribute("value");
    var title = xmlNode.getAttribute("title");

    if ( first ) {
        first = false;
        options += "<option value=\"" + value + "\" selected=\"selected\">" + title + "</option>\n"
    }
    else {
        options += "<option value=\"" + value + "\">" + title + "</option>\n"
    }
}

function _xmlFileLoaded(xmlDoc, id) {
    options = "";
    var childrenExit = false;

    if( xmlDoc != null && xmlDoc.documentElement != null) {
        var root = xmlDoc.documentElement;
        var cs = root.childNodes;
        var l = cs.length;
        for (var i = 0; i < l; i++) {
            if (cs[i].tagName == "option") {
                childrenExit = true;
                _addOption(cs[i]);
            }
        }

        if (!childrenExit) {
            alert ("no elements found");
        }
        else {
            document.getElementById(id).innerHTML = options;
alert ("OPTIONS: " + options + "id: " + id);
        }
    }
} 

Ich bekomme die Daten richtig vom Server, die "option" wird auch richtig befüllt, ebenso stimmt die ID für den Select (Lasse ich mir mit alert anzeigen). Leider bekomme ich es irgendwie nicht hin, dass die option auch in den Select eingefügt werden. Der Code gibt mir nur den Select ohne die Option aus.

[Godfrey]

Hat den wirklich niemand eine Idee was an meinem Script falsch sein könnte? Ich habe schon mehreres versucht, leider führt nichts zum Ergebniss. Beim ersten Aufruf der Seite werden die beiden Boxen mit Startwerten belegt. Diese werden nach dem Ändern von Box eins in Box zwei auch gelöscht.

[wahsaga]

http://de.selfhtml.org/javascript/ob...#neue_elemente

[Godfrey]

Danke wahsaga, habe jetzt eine funktionierende Lösung, hab mich dabei auch noch durch mehrere Foren, Seiten etc. gekämpft. Ich füge die Lösung an falls es jemand brauchen kann.

function loadOptions(url, id) {
    if (window.XMLHttpRequest) {
        var xmlHttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttp.open("GET", url, true);

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                _clearTopicList(id);
                _xmlFileLoaded(xmlHttp.respon************ML, id);
            }
            else {
                alert ("Fehler bei der Kommunikation mit dem Server:\n" + xmlHttp.statusText);
            }
        }
    };
    window.setTimeout(function () {xmlHttp.send(null);}, 10);
}

function _clearTopicList(id) {
    var select = document.getElementById(id);
    while (select.length > 0) {
        select.remove(0);
    }
}

function _addOption(select, value, content) {
    var opt;
    var myText = document.createTextNode(content);
    opt = document.createElement("option");
    opt.value = value;
    opt.appendChild(myText);
    select.appendChild(opt);
}

function _xmlFileLoaded(xmlDoc, id) {
    var childrenExit = false;
    var select = document.getElementById(id);

    if( xmlDoc != null && xmlDoc.documentElement != null) {
        var items = xmlDoc.documentElement;
        var cs = items.childNodes;
        var l = cs.length;

        for (var i = 0; i < l; i++) {
            childrenExit = true;
            _addOption(select, cs[i].getAttribute("value"), cs[i].getAttribute("title"));
        }

        if (!childrenExit) {
            _addOption(select, 1, "-- keine Daten vorhanden --");
//            alert ("Keine Elemente gefunden");
        }
    }
    else {
        alert ("Keine Daten erhalten.");
    }
} 

Die Funktion verarbeitet eine XML-Datei die zwei Werte übergibt. Aufgerufen wird die Funktion loadOptions der die URL der php-Datei übergeben wird aus der die Werte geladen werden, id ist die id der Selectbox. Bei mir macht das eine Klasse, wenn diese jemand haben möchte kann ich die gerne auch abgeben.