AJAX in mehreren Ebenen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • AJAX in mehreren Ebenen

    Ich habe ein Problem:

    Ich habe ein script geschrieben in Dem man mit einer Scrolldownmenüe einen Termin auswählt aus einer Datenbank, dann möchte ich im 2. Schritt ein Terminbezogenes formular öffnen in welchem man Daten ändern kann welche dann wieder in die Datenbank gespeichert werden sollen.
    Das Formulr wird wie gewünscht angezeigt allerdings weiß ich nicht wie man es dazubringt auf änderungen zu reagieren wenn ich als event handler onchange alert angebe geht der alert, wenn ich allerdings eine AJAX-Funktion angebe wird diese nicht ausgeführt ich nehmen an weil das Formular nicht im eigentlichen Quelltext der Seite steht sondern per AJAX in ein DIV nachgeladen wird.

    Hat jemand eine Ahnung wie ich dieses Problem lösen kann?

    Gruß Norge

  • Hallo

    hier mein Code ich hoffe ihr könnt mir helfen:

    meine AJAX-Seite

    Quellcode

    1. <html><head>
    2. <title>Test mit AJaX</title>
    4. <script type="text/Javascript">
    5. <!--
    6. function createXMLHttpRequest() {
    8. var ua;
    10. if(window.XMLHttpRequest) {
    11. try {
    12. ua = new XMLHttpRequest();
    13. } catch(e) {
    14. ua = false;
    15. }
    16. } else if(window.ActiveXObject) {
    17. try {
    18. ua = new ActiveXObject("Microsoft.XMLHTTP");
    19. } catch(e) {
    20. ua = false;
    21. }
    22. }
    23. return ua;
    24. }
    26. var req = createXMLHttpRequest();
    28. function sendRequest() {
    29. id = document.getElementById('dropdown').value;
    30. req.open('get', 'func.php?s='+ id);
    31. req.onreadystatechange = handleResponse;
    32. req.send(null);
    33. }
    34. function sendRequest2() {
    35. id = document.getElementById('dropdown').value;
    36. req.open('get', 'func.php?n=1&s='+ id);
    37. req.onreadystatechange = handleResponse;
    38. req.send(null);
    39. }
    40. function sendRequest3() {
    41. id = document.getElementById('dropdown').value;
    42. req.open('get', 'func.php?n=2&s='+ id);
    43. req.onreadystatechange = handleResponse;
    44. req.send(null);
    45. }
    46. function sendRequest4() {
    47. id = document.getElementById('dropdown').value;
    48. req.open('get', 'func.php?n=2&s='+ id);
    49. req.onreadystatechange = handleResponse;
    50. req.send(null);
    51. }
    52. function sendRequest5() {
    53. alert(geht);
    54. }
    55. function handleResponse() {
    57. if(req.readyState == 4){
    58. document.getElementById('inhalt').innerHTML = req.responseText;
    59. }
    60. else
    61. document.getElementById(div).innerHTML = 'Lade Inhalt...';
    62. alert("loading" + ajax.readyState);
    64. }
    65. //-->
    66. </script>
    68. </head>
    69. <body>
    71. <p />Wählen Sie einen Eintrag aus um den Inhalt zu laden
    72. <form name="Test" action="">
    73. <input type="button" value="last" onclick="sendRequest3()">
    75. <p /><select id="dropdown" onChange="sendRequest()">
    77. <?
    78. include './include/db.php.inc'; // Hier die Verbindung zur Datenbank herstellen
    80. $result = mysql_query("SELECT id, CONCAT(
    81. CASE DATE_FORMAT(datum,'%w')
    82. WHEN 0 THEN 'Sonntag'
    83. WHEN 1 THEN 'Montag'
    84. WHEN 2 THEN 'Dienstag'
    85. WHEN 3 THEN 'Mittwoch'
    86. WHEN 4 THEN 'Donnerstag'
    87. WHEN 5 THEN 'Freitag'
    88. WHEN 6 THEN 'Samstag'
    89. ELSE 'was anderes'
    90. END,
    91. DATE_FORMAT(datum, ', %e '),
    92. CASE DATE_FORMAT(datum,'%c')
    93. WHEN 1 THEN 'Januar'
    94. WHEN 2 THEN 'Februar'
    95. WHEN 3 THEN 'M&auml;rz'
    96. WHEN 4 THEN 'April'
    97. WHEN 5 THEN 'Mai'
    98. WHEN 6 THEN 'Juni'
    99. WHEN 7 THEN 'Juli'
    100. WHEN 8 THEN 'August'
    101. WHEN 9 THEN 'September'
    102. WHEN 10 THEN 'Oktober'
    103. WHEN 11 THEN 'November'
    104. WHEN 12 THEN 'Dezember'
    105. ELSE 'was anderes'
    106. END,
    107. DATE_FORMAT(datum, ' %Y %k:%i')) as 'ausgdatum' FROM `gottesdienste` ORDER BY datum ");
    108. while($row = mysql_fetch_object($result))
    109. {
    110. echo '<option value="'.$row->id.'">'.$row->ausgdatum.'</option>';
    111. }
    112. ?>
    113. </select>
    114. <form name="Test" action="">
    115. <input type="button" value="next" onclick="sendRequest2()">
    116. </form>
    118. <div id="inhalt"></div>
    120. </body></html>
    Alles anzeigen

    meine func.php

    Quellcode

    1. <?
    2. session_start();
    3. //sleep(2);
    4. $gottid=$_GET[s];
    5. include './include/db.php.inc';
    6. if ($_GET[n]==2) {
    8. $result = mysql_query("SELECT datum,id FROM gottesdienste WHERE id='$_SESSION[gottid]' ");
    9. $row = mysql_fetch_array($result);
    10. $newdate=$row[datum];
    11. $result = mysql_query("SELECT datum,id FROM gottesdienste WHERE datum <'$newdate' ORDER BY `datum` DESC LIMIT 1 ");
    12. $row = mysql_fetch_array($result);
    13. $gottid=$row[id];
    15. }
    16. if ($_GET[n]==1) {
    18. $result = mysql_query("SELECT datum,id FROM gottesdienste WHERE id=$_SESSION[gottid] ");
    19. $row = mysql_fetch_array($result);
    20. $newdate=$row[datum];
    21. $result = mysql_query("SELECT datum,id FROM gottesdienste WHERE datum > '$newdate' ORDER BY `datum` LIMIT 1 ");
    22. $row = mysql_fetch_array($result);
    23. $gottid=$row[id];
    25. }
    27. $result = mysql_query("SELECT *, CONCAT(
    28. CASE DATE_FORMAT(datum,'%w')
    29. WHEN 0 THEN 'Sonntag'
    30. WHEN 1 THEN 'Montag'
    31. WHEN 2 THEN 'Dienstag'
    32. WHEN 3 THEN 'Mittwoch'
    33. WHEN 4 THEN 'Donnerstag'
    34. WHEN 5 THEN 'Freitag'
    35. WHEN 6 THEN 'Samstag'
    36. ELSE 'was anderes'
    37. END,
    38. DATE_FORMAT(datum, ', %e '),
    39. CASE DATE_FORMAT(datum,'%c')
    40. WHEN 1 THEN 'Januar'
    41. WHEN 2 THEN 'Februar'
    42. WHEN 3 THEN 'M&auml;rz'
    43. WHEN 4 THEN 'April'
    44. WHEN 5 THEN 'Mai'
    45. WHEN 6 THEN 'Juni'
    46. WHEN 7 THEN 'Juli'
    47. WHEN 8 THEN 'August'
    48. WHEN 9 THEN 'September'
    49. WHEN 10 THEN 'October'
    50. WHEN 11 THEN 'November'
    51. WHEN 12 THEN 'Dezember'
    52. ELSE 'was anderes'
    53. END,
    54. DATE_FORMAT(datum, ' %Y %k:%i')) as 'ausgdatum' FROM gottesdienste WHERE id=$gottid ");
    55. /*while($row = mysql_fetch_object($result))
    56. {
    57. echo '<p /><b>'.$row->besonderes.' '.$row->ausgdatum.'</b><br />' ;
    58. }*/
    59. $row = mysql_fetch_array($result);
    60. $_SESSION[gottid]=$row[id];
    61. echo '<p /><b>'.$row[besonderes].' '.$row[ausgdatum].'</b><br />' ;
    63. echo '
    64. <script src="./js.js" type="text/javascript">
    65. </script>
    66. ';
    68. //Ausgabe der zu Ministrierenden Ministranten
    69. $result = mysql_query("SELECT * FROM gottesdienste,mini_gottesdienste,ministranten WHERE mini_gottesdienste.mini_id=ministranten.id AND gottesdienste.id=mini_gottesdienste.gd_id AND gottesdienste.id=$gottid; ");
    70. while($row = mysql_fetch_object($result))
    71. {
    72. echo $row->vorname. '<input type="checkbox" name="$row->ministranten.id" value="1" onchange="sendRequest5()"> da <input type="checkbox" name="$row->ministranten.id" value="1" onchange="sendRequest5()"> op <br>' ;
    73. }
    75. ?>
    Alles anzeigen


    Vielen Dank für eure Bemühungen

    Gruß Norge

  • versuchs mal mit dem code

    Quellcode

    1. <html><head>
    2. <title>Test mit AJaX</title>
    4. <script type="text/Javascript">
    5. <!--
    6. function sendRequest(n) {
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. var id = document.getElementById('dropdown').value;
    15. req.onreadystatechange = handleResponse;
    16. req.open("GET", 'func.php?n='+ n +'&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. }
    25. //-->
    26. </script>
    28. </head>
    29. <body>
    31. <p />Wählen Sie einen Eintrag aus um den Inhalt zu laden
    32. <form name="Test" action="">
    33. <input type="button" value="last" onclick="sendRequest(2)">
    35. <p /><select id="dropdown" onChange="sendRequest('')">
    37. <?
    38. include './include/db.php.inc'; // Hier die Verbindung zur Datenbank herstellen
    40. $result = mysql_query("SELECT id, CONCAT(
    41. CASE DATE_FORMAT(datum,'%w')
    42. WHEN 0 THEN 'Sonntag'
    43. WHEN 1 THEN 'Montag'
    44. WHEN 2 THEN 'Dienstag'
    45. WHEN 3 THEN 'Mittwoch'
    46. WHEN 4 THEN 'Donnerstag'
    47. WHEN 5 THEN 'Freitag'
    48. WHEN 6 THEN 'Samstag'
    49. ELSE 'was anderes'
    50. END,
    51. DATE_FORMAT(datum, ', %e '),
    52. CASE DATE_FORMAT(datum,'%c')
    53. WHEN 1 THEN 'Januar'
    54. WHEN 2 THEN 'Februar'
    55. WHEN 3 THEN 'M&auml;rz'
    56. WHEN 4 THEN 'April'
    57. WHEN 5 THEN 'Mai'
    58. WHEN 6 THEN 'Juni'
    59. WHEN 7 THEN 'Juli'
    60. WHEN 8 THEN 'August'
    61. WHEN 9 THEN 'September'
    62. WHEN 10 THEN 'Oktober'
    63. WHEN 11 THEN 'November'
    64. WHEN 12 THEN 'Dezember'
    65. ELSE 'was anderes'
    66. END,
    67. DATE_FORMAT(datum, ' %Y %k:%i')) as 'ausgdatum' FROM `gottesdienste` ORDER BY datum ");
    68. while($row = mysql_fetch_object($result))
    69. {
    70. echo '<option value="'.$row->id.'">'.$row->ausgdatum.'</option>';
    71. }
    72. ?>
    73. </select>
    74. <form name="Test" action="">
    75. <input type="button" value="next" onclick="sendRequest(1)">
    76. </form>
    78. <div id="inhalt"></div>
    80. </body></html>
    Alles anzeigen


    und überprüf mal ob deine func.php funktioniert (also keine mysql errors)

  • Ich hatte mehrere Fehler in der func.php, und durch die strukturierung im Javasctiptcode wurde das erst richtig auffällig. Allerdings habe ich noch eine Frage ich lasse ja als erstes ein Scrolldown Menü anzeigen mit den Daten ich habe mir dann noch weiter und zurück buttons gebaut kann man das scrolldown-menü mit ändern wenn man das datum mit dieesn Buttons geändert hat?

    Gruß Norge

  • klar geht das..

    machst einfach statt dem p ein div um das element
    also statt

    Quellcode

    1. <p /><select id="dropdown" onChange="sendRequest('')">
    2. [...]
    3. while($row = mysql_fetch_object($result))
    4. {
    5. echo '<option value="'.$row->id.'">'.$row->ausgdatum.'</option>';
    6. }
    7. ?>
    8. </select>


    so

    Quellcode

    1. <div id="div_dropdown"><select id="dropdown" onChange="sendRequest('')">
    2. [...]
    3. while($row = mysql_fetch_object($result))
    4. {
    5. echo '<option value="'.$row->id.'">'.$row->ausgdatum.'</option>';
    6. }
    7. ?>
    8. </select></div>


    falls statisch, kannst du dann einfach die handleResponse Methode erweitern

    Quellcode

    1. function handleResponse() {
    2. if ((req.readyState == 4) && (req.status == 200)) {
    3. document.getElementById('inhalt').innerHTML = req.responseText;
    4. document.getElementById('div_dropdown).innerHTML = "wurde geklickt";
    5. }
    6. }


    oder eben indem du bei deiner AJAX Antwort mehrere Inhalte lieferst
    siehe dazu [coderwiki]HowTos/Ajax-Inhalte-mit-PHP-nachladen[/coderwiki]

    du könntest z.B. folgende ausgabe basteln
    inhalt||inhalt für erstes div||div_dropdown||inhalt für 2tes div


    inhalt wird mit inhalt für erstes div befüllt
    und div_dropdown mit inhalt für 2tes div

  • Hallo irgendwie bin ich wie von Blindheit geschlagen, um mir das mit den mehreren AJAX Antworten mal anzusehen habe ich mir mal das beispiel: Ajax Inhalte mit PHP nachladen angesehen aber ich bringe es nicht zum laufen obwohl ich es 1:1 kopiert habe. Ich habe mal etwas rumprobiert und glaube ,dass das Problem beim ausgeben in das entsprechende DIV liegt funktioniert das Beispiel bei dir?

    Gruß Norge

  • Hallo ich hab es bisher in firefox und im IE ausprobiert und es ging bei beiden nicht.

    Ich habe es auch aus dem WIKI kopiert und dann noch die Zeilenzahlen gelösch die daneben standen und dann hochgeladen.

    EDIT: zum nachvollziehen ajax.fabi.ws/formular.php und wenn du auf das Verzeichnis gehst kannst du dier die Dteien nochmals abgespeiert als *.txt ansehen, ob ssie sich von deinen unterscheiden.

    Gruß Norge