Ajax Inhalte mit Select nachladen und wieder zurücksetzen

  • Ajax Inhalte mit Select nachladen und wieder zurücksetzen

    Hallo!

    Vor ein paar Tagen hab ich zu meiner grossen Erleichterung den Code "Ajax Inhalte mit PHP & Select nachladen" im Coder Wiki gefunden. Also erst mal herzlichen Dank dafür.

    Klappt auch alles wunderbar, nur habe ich eine Frage zum Zurücksetzen.

    Hier erst mal mein Anwendungsbeispiel (Suchmaske für meine Bilderdatenbank): ich hab ein Select-Feld mit dem Aufnahmeort 1 (aus der Tabelle aufnahmeort1). Abhängig von der Auswahl dieser Liste wird ein neu eingeblendetes zweites Select-Feld mit den detaillierten Aufnahmeorten 2 geladen (z.B. Aufnahmeort 1 = Deutschland --> Aufnahmeorte 2 = Berlin, Dortmund, Köln...).

    Da es sich bei diesem Formular um die Suchmaske handelt, hab ich jetzt bei beiden Select-Feldern manuell noch eine Option "alle Aufnahmeorte" mit eingebunden.

    Nach diesem Roman komme ich nun endlich zu meinem Problem: Ich krieg's mit meinen mangelhaften Javascript-Kenntnissen leider nicht hin, dass das zweite Select-Feld wieder ausgeblendet wird, wenn im ersten Feld "alle Aufnahmeorte" gewählt wurde. Kann mir jemand bitte einen Tipp geben, wie ich das anstellen könnte? Das wäre sehr nett. :)

    Hier noch mein Code:

    Quellcode

    1. <html><head>
    2. <script type="text/Javascript">
    3. <!--
    4. function sendRequest() {
    5. try {
    6. req = window.XMLHttpRequest?new XMLHttpRequest():
    7. new ActiveXObject("Microsoft.XMLHTTP");
    8. } catch (e) {
    9. //Kein AJAX Support
    10. }
    12. req.onreadystatechange = handleResponse;
    13. id = document.getElementById('dropdown').value;
    14. req.open('get', 'func.php?s='+ id);
    15. req.send(null);
    16. }
    18. function handleResponse() {
    19. if ((req.readyState == 4) && (req.status == 200)) {
    20. document.getElementById('inhalt').innerHTML = req.responseText;
    21. }
    22. }
    23. //-->
    24. </script>
    25. </head>
    27. <body>
    28. <select id="dropdown" onChange="sendRequest()">
    29. <?
    30. include 'functions.inc'; // (DB-Verbindung)
    31. $result = mysql_query("SELECT aufnahmeort1ID,aufnahmeort1 FROM `aufnahmeort1`; ");
    33. while($row = mysql_fetch_object($result))
    34. {
    35. echo '<option value="'.$row->aufnahmeort1ID.'">'.$row->aufnahmeort1.'</option>';
    36. }
    37. ?>
    38. </select>
    39. <div id="inhalt"></div>
    40. </body>
    41. </html>
    Alles anzeigen


    und die func.php:

    Quellcode

    1. <?
    2. //Inhalte laden
    3. $result = mysql_query("SELECT aufnahmeort2ID, aufnahmeort2 FROM `aufnahmeort2` WHERE `aufnahmeort1F` = $_GET[s]; ");
    4. ?>
    5. <p>
    6. Aufnahmeort 2:
    7. <select name="aufnahmeort2" class="select240">
    8. <option value="0" selected>alle Aufnahmeorte</option>
    9. <?
    10. while($row = mysql_fetch_object($result))
    11. {
    12. echo '<option value="'.$row->aufnahmeort2ID.'">'.$row->aufnahmeort2.'</option>';
    13. }
    14. ?>
    15. </select>
    Alles anzeigen



    Herzlichen Dank!
    lg, michele[/quote]

  • hallo michele,

    die Option "alle Aufnahmeorte" müsste doch statt der func.php ins erste Select, oder?
    Je nachdem musst du dann den EventHandler onChange eine zusätzliche toggle Funktion einbinden

    Quellcode

    1. <select id="dropdown" onChange="sendRequest(); toggle('aufnahmeort2')">
    2. <option value="0" selected>alle Aufnahmeorte</option>
    3. <?
    4. include 'functions.inc'; // (DB-Verbindung)
    5. $result = mysql_query("SELECT aufnahmeort1ID,aufnahmeort1 FROM `aufnahmeort1`; ");
    7. while($row = mysql_fetch_object($result))
    8. {
    9. echo '<option value="'.$row->aufnahmeort1ID.'">'.$row->aufnahmeort1.'</option>';
    10. }
    11. ?>
    12. </select>
    14. <!-- AJAX Start //-->
    15. <select name="aufnahmeort2" class="select240" id="aufnahmeort2">
    16. ...
    17. </select>
    18. <!-- AJAX Ende //-->
    Alles anzeigen


    Die Toogle Funktion sähe so aus

    Quellcode

    1. function toggle(id) {
    2. if(document.getElementById('dropdown').value == 0)
    3. document.getElementById(id).style.display = 'none';
    4. else
    5. document.getElementById(id).style.display = 'block';
    7. }

  • hallo d0nUt

    vielen Dank für deine so prompte Antwort!

    Du hast natürlich Recht, die Option "alle Aufnahmeorte" gehört AUCH ins erste Select (beim zweiten brauch ich's aber auch). Ich hab im Eifer des Gefechts anscheinend nicht meine aktuellste Code-Version genommen.

    Deinen Tipp mit der Toggle-Funktion habe ich versucht einzubauen, leider bisher ohne Erfolg. Weder im Firefox noch im IE. Die ganze Sache hat sich dadurch sogar eher verschlechtert, weil es nun immer einen Moment dauert, bis das zweite Select-Feld eingeblendet und gefüllt wird.

    Was mache ich falsch?

    Hier nochmals der ganz richtige und aktuelle Code:

    box.php:

    Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <script language="javascript">
    5. <!--
    6. function sendRequest() {
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. req.onreadystatechange = handleResponse;
    15. id = document.getElementById('aufnahmeort').value;
    16. req.open('get', 'func.php?s='+ id);
    17. req.send(null);
    18. }
    20. function handleResponse() {
    21. if ((req.readyState == 4) && (req.status == 200)) {
    22. document.getElementById('inhalt').innerHTML = req.responseText;
    23. }
    24. }
    26. function toggle(id) {
    27. if(document.getElementById('dropdown').value == 0)
    28. document.getElementById(id).style.display = 'none';
    29. else
    30. document.getElementById(id).style.display = 'block';
    32. }
    33. //-->
    34. </script>
    35. </head>
    36. <body>
    38. <?
    39. include 'functions.inc';
    40. ?>
    42. Aufnahmeort 1:
    43. <select id="aufnahmeort" name="aufnahmeort1" class="select240" onChange="sendRequest(); toggle('aufnahmeort2')">
    44. <option value="0" selected>alle Aufnahmeorte</option>
    45. <?
    46. $result = mysql_query("SELECT aufnahmeort1ID,aufnahmeort1 FROM `aufnahmeort1`; ");
    48. while($row = mysql_fetch_object($result))
    49. {
    50. echo '<option value="'.$row->aufnahmeort1ID.'">'.$row->aufnahmeort1.'</option>';
    51. }
    52. ?>
    53. </select>
    54. <div id="inhalt"></div>
    Alles anzeigen


    func.php:

    Quellcode

    1. <?
    2. //Inhalte laden
    3. $result = mysql_query("SELECT aufnahmeort2ID, aufnahmeort2 FROM `aufnahmeort2` WHERE `aufnahmeort1F` = $_GET[s]; ");
    4. ?>
    5. <p>
    6. Aufnahmeort 2:
    7. <select name="aufnahmeort2" class="select240">
    8. <option value="0" selected>alle Aufnahmeorte</option>
    9. <?
    10. while($row = mysql_fetch_object($result))
    11. {
    12. echo '<option value="'.$row->aufnahmeort2ID.'">'.$row->aufnahmeort2.'</option>';
    13. }
    14. ?>
    15. </select>
    Alles anzeigen


    Wäre unheimlich froh um einen weiteren Tipp!

    Und noch eine kleine Frage am Rande: In deiner Antwort hast du das zweite Select zw. Ajax Start und Ajax Ende eingetragen. Bedeutet das, dass der Code für das zweite Select-Feld in der gleichen Datei stehen kann und nicht im includeten func.php stehen muss?

    Vielen Dank und lg
    Michele

  • nein, php ajax im html bereich geht nicht.
    ich hab in meiner antwort nur vergessen zu erwähnen, dass du das "id" im select ergänzen solltest.. hab dir hier nochmal die änderungen zusammengefasst (und die toggle auch wieder geändert)

    Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <script language="javascript">
    5. <!--
    6. function sendRequest() {
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. req.onreadystatechange = handleResponse;
    15. id = document.getElementById('aufnahmeort').value;
    16. if(id == 0) {
    17. document.getElementById('aufnahmeort2').style.display = 'none';
    18. } else {
    19. document.getElementById('aufnahmeort2').style.display = 'block';
    20. req.open('get', 'func.php?s='+ id);
    21. req.send(null);
    22. }
    23. }
    25. function handleResponse() {
    26. if ((req.readyState == 4) && (req.status == 200)) {
    27. document.getElementById('inhalt').innerHTML = req.responseText;
    28. }
    29. }
    30. //-->
    31. </script>
    32. </head>
    33. <body>
    Alles anzeigen



    Quellcode

    1. <?
    2. //Inhalte laden
    3. $result = mysql_query("SELECT aufnahmeort2ID, aufnahmeort2 FROM `aufnahmeort2` WHERE `aufnahmeort1F` = $_GET[s]; ");
    4. ?>
    5. <p>
    6. Aufnahmeort 2:
    7. <select name="aufnahmeort2" class="select240" id="aufnahmeort2">
    8. <option value="0" selected>alle Aufnahmeorte</option>
    9. <?
    10. while($row = mysql_fetch_object($result))
    11. {
    12. echo '<option value="'.$row->aufnahmeort2ID.'">'.$row->aufnahmeort2.'</option>';
    13. }
    14. ?>
    15. </select>
    Alles anzeigen

  • guten Morgäähn...

    Ich bin inzwischen alles nochmals durchgegangen und (ausnahmsweise) versteh ich sogar deinen Javascript-Code und bin der Laien-Meinung, dass das eigentlich funktionieren müsste. Nur tut es das leider nicht.
    Wenn ich deinen ersten Vorschlag umsetze, dann erscheint das zweite Select korrekt, aber es wird nicht ausgeblendet, wenn ich im ersten Select "alle Aufnahmeorte" wähle. Wenn ich deinen zweiten Vorschlag umsetze, erscheint das zweite Select gar nicht mehr. Gilt für FF und IE.

    Ich nerv wirklich nur ungern, aber vielleicht hast du noch den ultimativen dritten Vorschlag? *hoff*

    Daaaanke und lg
    michele

  • Ich hab's! :D War ja gar nicht so schwer, wenn man weiss, wie...

    Ist wahrscheinlich lausig programmiert, aber Hauptsache ist, dass es nun 1A klappt.

    Also nochmals danke, d0nUt für die Tipps.

    Hier noch mein aktueller Code:

    Quellcode

    1. <html>
    2. <head>
    3. <title></title>
    4. <script language="javascript">
    5. function setVisibility() {
    6. var ort = document.myForm.aufnahmeort1.selectedIndex;
    7. if (ort == 0) {
    8. inhalt.style.display = 'none';
    9. } else {
    10. inhalt.style.display = 'block';
    11. }
    12. }
    14. function sendRequest() {
    15. try {
    16. req = window.XMLHttpRequest?new XMLHttpRequest():
    17. new ActiveXObject("Microsoft.XMLHTTP");
    18. } catch (e) {
    19. //Kein AJAX Support
    20. }
    22. req.onreadystatechange = handleResponse;
    23. id = document.getElementById('aufnahmeort1').value;
    24. req.open('get', 'func.php?s='+ id);
    25. req.send(null);
    26. }
    28. function handleResponse() {
    29. if ((req.readyState == 4) && (req.status == 200)) {
    30. document.getElementById('inhalt').innerHTML = req.responseText;
    31. }
    32. }
    33. </script>
    34. </head>
    35. <body>
    37. <?
    38. include 'functions.inc';
    39. ?>
    41. <form name="myForm">
    42. Aufnahmeort 1:
    43. <select id="aufnahmeort1" name="aufnahmeort1" class="select240" onChange="setVisibility(); sendRequest()">
    44. <option value="0" selected>alle Aufnahmeorte</option>
    45. <?
    46. $result = mysql_query("SELECT aufnahmeort1ID,aufnahmeort1 FROM `aufnahmeort1`; ");
    48. while($row = mysql_fetch_object($result))
    49. {
    50. echo '<option value="'.$row->aufnahmeort1ID.'">'.$row->aufnahmeort1.'</option>';
    51. }
    52. ?>
    53. </select>
    54. <div id="inhalt"></div>
    55. </form>
    56. </body>
    57. </html>
    Alles anzeigen


    am func.php hat sich nix geändert.

    lg, michele

  • variable übergeben

    hallo :)

    lange ist's her, seit ich dieses posting geschrieben habe. meine bilderdatenbank lag während des sommers brach, aber jetzt bin ich wieder voll daran ... und musste feststellen, dass ich mit diesem ajax-select-formular immer noch auf kriegsfuss stehe *grummel*. mein problem ist, dass der wert, der vom benutzer in der zweiten selectbox gewählt wird, im firefox nicht als variable übergeben wird. im ie gehts, wie ich zu meiner grossen verwirrung gerade festgestellt habe. :?: aber der firefox tut bei der auswertung der formulareingaben so, als ob in der zweiten dropdown-liste nichts ausgewählt worden wäre.

    mit den folgenden zeilen checke ich, ob die variable übergeben wurde:

    Quellcode

    1. if (!empty($_POST["search_aufnahmeort2"]))
    2. { $aufnahmeort2F = $_POST["search_aufnahmeort2"]; }
    3. else { $aufnahmeort2F = 0; }


    hab's nach dem lesen der ajax tipps auch mit $_REQUEST statt $_POST versucht, klappt aber auch nicht. meine variable $aufnahmeort2F hat immer den wert 0 (im firefox)...

    hat vielleicht jemand einen tipp, woran es liegen könnte, dass mein script (code siehe weiter oben) im ie klappt, im ff aber nicht?

    menno, ich bekomm noch graue haare, bis das alles läuft... ;)

    vielen vielen dank für alle tipps!
    lg, michele

  • hallo d0nUt

    vielen dank für deine antwort und die beiden tipps. ich hab's geändert, hat aber nicht geholfen. da mein problem anscheinend irgend eine spitzfindigkeit im html, js oder php code ist (besonders bei js blick ich überhaupt nicht durch...), poste ich nun mal alles genau so, wie ich's bei mir habe:

    formular:

    Quellcode

    1. <?
    2. include "includes/functions.inc"; // enthält u.a. Verbindung zur Datenbank!
    3. $query_ort = "select aufnahmeort1ID, aufnahmeort1 from aufnahmeort1 order by aufnahmeort1";
    4. $result_ort = safe_query($query_ort);
    5. ?>
    6. <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    7. <html>
    8. <head>
    9. <title>Bilder-Datenbank</title>
    10. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    11. <link rel="stylesheet" href="includes/stil.css" type="text/css" />
    12. <script type="text/javascript" src="includes/script.js"> </script>
    13. </head>
    15. <body>
    16. <table>
    17. <tr>
    18. <td>
    19. <form name="fsearch" method="post" action="index.php">
    20. <tr>
    21. <td>
    22. <table>
    23. <tr>
    24. <td>
    25. <table>
    26. <tr>
    27. <td>
    28. <select id="search_aufnahmeort1" name="search_aufnahmeort1" class="select210" onChange="setVisibility(); sendRequest_ort()">
    29. <option value="0" selected>alle Aufnahmeorte</option>
    30. <?
    31. while($row = mysql_fetch_object($result_ort))
    32. {
    33. echo '<option value="'.$row->aufnahmeort1ID.'">'.$row->aufnahmeort1.'</option>';
    34. }
    35. ?>
    36. </select>
    37. &nbsp;
    38. <div id="inhalt_ort"></div>
    39. </td>
    40. </tr>
    41. </table>
    42. </td>
    43. </tr>
    44. </table>
    45. </td>
    46. </tr>
    47. <tr>
    48. <td>
    49. <table>
    50. <tr>
    51. <td><input type="submit" name="search_go" class="button" value="Suchen ..."></td>
    52. <td><input type="reset" name="search_reset" class="button" value="Zur&uuml;cksetzen"></td>
    53. </tr>
    54. </table>
    55. </td>
    56. </tr>
    57. </form>
    58. </td>
    59. </tr>
    60. </table>
    61. </body>
    62. </html>
    Alles anzeigen


    (bitte nicht wundern wegen den vielen tabellen-tags... das formular ist ziemlich komplex und ich hab hier alles gelöscht, was nix mit meinem problem zu tun hat...)

    script.js:

    Quellcode

    1. <!--
    3. function setVisibility() {
    4. var date = document.fsearch.search_datumart.selectedIndex;
    5. if (date == 0) {
    6. layer1.style.display = 'none';
    7. layer2.style.display = 'none';
    8. } else if (date == 1) {
    9. layer1.style.display = 'inline';
    10. layer2.style.display = 'none';
    11. } else if (date == 2) {
    12. layer1.style.display = 'inline';
    13. layer2.style.display = 'none';
    14. } else if (date == 3) {
    15. layer1.style.display = 'inline';
    16. layer2.style.display = 'none';
    17. } else if (date == 4) {
    18. layer1.style.display = 'inline';
    19. layer2.style.display = 'inline';
    20. } else {
    21. layer1.style.display = 'none';
    22. layer2.style.display = 'none';
    23. }
    25. var ort = document.fsearch.search_aufnahmeort1.selectedIndex;
    26. var inhalt_ort = document.getElementById('inhalt_ort');
    27. if (ort == 0) {
    28. inhalt_ort.style.display = 'none';
    29. } else {
    30. inhalt_ort.style.display = 'inline';
    31. }
    32. }
    34. function sendRequest_ort() {
    35. try {
    36. req = window.XMLHttpRequest?new XMLHttpRequest():
    37. new ActiveXObject("Microsoft.XMLHTTP");
    38. } catch (e) {
    39. //Kein AJAX Support
    40. }
    42. req.onreadystatechange = handleResponse_ort;
    43. id = document.getElementById('search_aufnahmeort1').value;
    44. req.open('get', 'includes/search_ajax_ort.php?s='+ id);
    45. req.send(null);
    46. }
    48. function handleResponse_ort() {
    49. if ((req.readyState == 4) && (req.status == 200)) {
    50. document.getElementById('inhalt_ort').innerHTML = req.responseText;
    51. }
    52. }
    54. // End --->
    Alles anzeigen


    und dann noch search_ajax_ort.php:

    Quellcode

    1. <?
    2. $dbuser = '...';
    3. $dbpass = '...';
    4. $dbname = '...';
    5. $dbhost = 'localhost';
    6. mysql_connect($dbhost,$dbuser,$dbpass);
    7. mysql_select_db($dbname);
    9. //Inhalte laden
    10. $query_ort2 = "select aufnahmeort2ID, aufnahmeort2 from aufnahmeort2 where aufnahmeort1F = $_GET[s] order by aufnahmeort2";
    11. $result_ort2 = mysql_query($query_ort2);
    12. ?>
    13. <select name="search_aufnahmeort2" class="select210">
    14. <option value="0" selected>alle Aufnahmeorte</option>
    15. <?
    16. while($row = mysql_fetch_object($result_ort2))
    17. {
    18. $ort2 = str_replace("ä", "&auml;", $row->aufnahmeort2);
    19. $ort2 = str_replace("ö", "&ouml;", $ort2);
    20. $ort2 = str_replace("ü", "&uuml;", $ort2);
    21. echo '<option value="'.$row->aufnahmeort2ID.'">'.$ort2.'</option>';
    22. }
    23. ?>
    24. </select>
    Alles anzeigen


    im internet explorer funktioniert's nach den änderungen immer noch einwandfrei, im firefox bleibt die variable $_POST["search_aufnahmeort2"] leer...

    falls du dir das nochmals anschauen könntest, wär das genial!
    lg, michèle

  • vorweg

    search_ajax_ort.php -> #10 ($query_ort2)
    bitte änder das mal in

    Quellcode

    1. $query_ort2 = "select aufnahmeort2ID, aufnahmeort2 from aufnahmeort2 where aufnahmeort1F = ".mysql_escape_string($_GET[s])." order by aufnahmeort2";


    Ist das wirklich alles an code?
    Ich verstehe nicht, wo du die variablennamen layer1, layer2 her hast.
    Öffne doch mal mit extras > Fehler Konsole (oder auch Debugger) den Fehlerlog und teile uns die genaue Fehlermeldung mit - die sind meistens recht aussagekräftig.

    Wo hast du überhaupt die $_POST["search_aufnahmeort2"] ? die search_ajax_ort.php wird mit GET beliefert. Und wenn du das Formular submittest, dann schickt es ja nur an index.php - hat also gar nichts mit AJAX zu tun...2

  • hi d0nUt

    ich hab's! :D nachdem ich nun stundenlang das original-script mit meinem code verglichen und ausprobiert hab, hab ich bemerkt, dass es ein einfaches html-problem war... ich hatte den form-tag innerhalb eines table-tags. :oops: menno... das hatten wir hier im forum doch schon mal. genau das selbe problem. ich hab's gelesen und bei mir eigentlich gecheckt, aber ich hatte diesen table-tag übersehen, weil der in nem include drin ist. naja. eben :oops:

    noch kurz zu deinen fragen:
    nein, war natürlich nicht alles an code. das ist ein riesen formular, das konnte ich ja nicht gut als ganzes hier posten. die variablen layer1, layer2, etc. werden in einem anderen formular-bereich verwendet, den ich hier nicht gepostet hatte.

    und im formular hab ich ein hidden feld namens status. wenn das formular abgeschickt wird, erhält die variable status den wert 3 und wird im index.php per if-schleife und include an meine form-check-datei weitergeleitet.

    das mit dem mysql_escape_string hab ich übrigens eingefügt. dann krieg ich in meinem formular aber die folgende warnung:
    Notice: Use of undefined constant s - assumed 's' in D:\Web\web\Bilderdatenbank\includes\search_ajax_ort.php on line 11

    ohne funktioniert jetzt aber alles wunderbar.

    also nochmals danke!
    lg, michele