AJAX und MySQL Scriptvorlage

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

  • AJAX und MySQL Scriptvorlage

    Hallo ,

    folgendes Script w3schools.com/PHP/php_ajax_database.asp wolle ich auf einem 1und1 managed server testen, doch leider nach 10 Stunden Google leider noch nicht zum laufen gebracht.

    Tabelle mit Inhalten erstellt, Scripte 1zu1 übernommen Datenbankdaten eingetragen auch bei MYSQL5 von 1und1 nicht nur localhost sondern localhost:/tmp/mysql5.sock doch leider liefert die Ausgabe nicht die gewünschten Ergebnisse.

    die Seite: datacenter.adfinance.de/selector/

    Script1 getuser.php

    Quellcode

    1. <?php
    2. $q=$_GET["q"];
    3. // $con = mysql_connect('localhost', 'peter', 'abc123');
    4. $con = mysql_connect('localhost:/tmp/mysql5.sock', 'dboxxx', 'passxxx');
    5. if (!$con)
    6. {
    7. die('Could not connect: ' . mysql_error());
    8. }
    9. mysql_select_db("ajax_demo", $con);
    10. $sql="SELECT * FROM user WHERE id = '".$q."'";
    11. $result = mysql_query($sql);
    12. echo "<table border='1'>
    13. <tr>
    14. <th>Firstname</th>
    15. <th>Lastname</th>
    16. <th>Age</th>
    17. <th>Hometown</th>
    18. <th>Job</th>
    19. </tr>";
    20. while($row = mysql_fetch_array($result))
    21. {
    22. echo "<tr>";
    23. echo "<td>" . $row['FirstName'] . "</td>";
    24. echo "<td>" . $row['LastName'] . "</td>";
    25. echo "<td>" . $row['Age'] . "</td>";
    26. echo "<td>" . $row['Hometown'] . "</td>";
    27. echo "<td>" . $row['Job'] . "</td>";
    28. echo "</tr>";
    29. }
    30. echo "</table>";
    31. mysql_close($con);
    32. ?>
    Alles anzeigen


    Script2 selectuser.js

    Quellcode

    1. var xmlhttp;
    2. function showUser(str)
    3. {
    4. xmlhttp=GetXmlHttpObject();
    5. if (xmlhttp==null)
    6. {
    7. alert ("Browser does not support HTTP Request");
    8. return;
    9. }
    10. var url="getuser.php";
    11. url=url+"?q="+str;
    12. url=url+"&sid="+Math.random();
    13. xmlhttp.onreadystatechange=stateChanged;
    14. xmlhttp.open("GET",url,true);
    15. xmlhttp.send(null);
    16. }
    17. function stateChanged()
    18. {
    19. if (xmlhttp.readyState==4)
    20. {
    21. document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    22. }
    23. }
    24. function GetXmlHttpObject()
    25. {
    26. if (window.XMLHttpRequest)
    27. {
    28. // code for IE7+, Firefox, Chrome, Opera, Safari
    29. return new XMLHttpRequest();
    30. }
    31. if (window.ActiveXObject)
    32. {
    33. // code for IE6, IE5
    34. return new ActiveXObject("Microsoft.XMLHTTP");
    35. }
    36. return null;
    37. }
    Alles anzeigen


    Script3 index.html

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript" src="selectuser.js"></script>
    4. </head>
    5. <body>
    6. <form>
    7. Select a User:
    8. <select name="users" onchange="showUser(this.value)">
    9. <option value="1">Peter Griffin</option>
    10. <option value="2">Lois Griffin</option>
    11. <option value="3">Glenn Quagmire</option>
    12. <option value="4">Joseph Swanson</option>
    13. </select>
    14. </form>
    15. <br />
    16. <div id="txtHint"><b>Person info will be listed here.</b></div>
    17. </body>
    18. </html>
    Alles anzeigen


    mit der Datenbank wird anscheinend richtig verbunden, allerdings erhalte ich im Ergebnisfeld keine Ausgabe.

    Bin langsam mit meinem (kleinen) Latein am Ende

    Gruß Michael
  • Soweit ich das jetzt mit dem FIrebug Debugger nachverfolgen konnte, liegt der Fehler doch in deiner getuser.php. Diese sendet nichts zurück, wodurch xmlhttp.responseText leer bleibt.Konzentriere dich auf deine getuser.php und schaue mal wo dein fehler liegt mit echos oder einem debugger.
    So würde ich mal kontrollieren ob das ergebnis deines queries in zeile 16 überhaupt einen inhalt hat oder vielleicht keinen Treffer in der Datenbank ergeben hat.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.
  • Danke - Funzt: in der getuser.php Zeile 12 wurde die ajax_demo ausgewählt, was nicht ging , da die datenbank dbxxx ist und die tabelle die ajax_demo.

    auch schon weitergebaut: http://datacenter.adfinance.de/selector2/

    dadurch natürlich wieder ein nächstes Hindernis die Ergebnisliste welche mir das script aus der Datenbank liefert würde ich gerne flexibel sortieren lassen. dazu habe ich folgendes Script integriert : http://millstream.com.au/view/code/tablekit - das Ergebnis könnt ihr auf http://datacenter.adfinance.de/selector2/ sehen. zum Test habe ich eine zweite Tabelle eingefügt, auf der es einwandfrei funktioniert, nur mit der generierten hapert es. woran kann dies liegen?

    Gruß Michael

    die index.php

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    6. <meta http-equiv="Content-Script-Type" content="text/javascript">
    7. <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    8. <title>Beispiel</title>
    9. <script type="text/javascript" src="selectuser.js"></script>
    10. <script type="text/javascript" src="js/prototype.js"></script>
    11. <script type="text/javascript" src="js/fabtabulous.js"></script>
    12. <script type="text/javascript" src="js/tablekit.js"></script>
    13. </head>
    14. <body>
    15. <form>
    16. Ihr Alter:
    17. <select name="users" onChange="showUser(this.value)">
    18. <option value="">bitte wählen Sie Ihr Alter</option>
    19. <option value="10">10 Jahre</option>
    20. <option value="30" selected>30 Jahre</option>
    21. <option value="31">31 Jahre</option>
    22. <option value="32">32 Jahre</option>
    23. <option value="33">33 Jahre</option>
    24. <option value="34">34 Jahre</option>
    25. <option value="35">35 Jahre</option>
    26. <option value="36">36 Jahre</option>
    27. <option value="37">37 Jahre</option>
    28. </select>
    29. </form>
    30. <br />
    31. <div id="txtHint"><b>Die Tarifbeiträge werden nach der Altersauswahl hier angezeigt.</b></div>
    32. <br />
    33. <table class='sortable resizable'>
    34. <thead>
    35. <tr>
    36. <th id='adf_gesellschaft'>Gesellschaft</th>
    37. <th id='adf_tarif'>Tarif</th>
    38. <th id='adf_alter'>Alter</th>
    39. <th id='adf_beitrag'>Beitrag</th>
    40. <th class='sortfirstdesc' id='adf_leistungsstaerke'>Leistungsstaerke</th>
    41. </tr>
    42. </thead>
    43. <tfoot>
    44. <tr>
    45. <td>Gesellschaft</td>
    46. <td>Tarif</td>
    47. <td>Alter</td>
    48. <td>Beitrag</td>
    49. <td>Leistungsstaerke</td>
    50. </tr>
    51. </tfoot>
    52. <tbody>
    53. <tr>
    54. <td>B-Gesellschaft</td>
    55. <td>B-Tarif</td>
    56. <td>20</td>
    57. <td>15,00 &euro; </td>
    58. <td>888</td>
    59. </tr>
    60. <tr>
    61. <td>C-Gesellschaft</td>
    62. <td>C-Tarif</td>
    63. <td>30</td>
    64. <td>20,00</td>
    65. <td>777</td>
    66. </tr>
    67. <tr>
    68. <td>A-Gesellschaft</td>
    69. <td>A-Tarif</td>
    70. <td>10</td>
    71. <td>10,00 &euro;</td>
    72. <td>999</td>
    73. </tr>
    74. </tbody>
    75. </table>
    76. </body>
    77. </html>
    Alles anzeigen



    und die getuser.php

    Quellcode

    1. <?php
    2. include ("configuration.php");
    3. $q=$_GET["q"];
    4. // $con = mysql_connect('localhost', 'peter', 'abc123');
    5. $con = mysql_connect($host, $dbuser, $dbpass);
    6. if (!$con)
    7. {
    8. die('Could not connect: ' . mysql_error());
    9. }
    10. mysql_select_db($database, $con);
    11. $sql="SELECT * FROM $table WHERE adf_alter = '".$q."'";
    12. $result = mysql_query($sql);
    13. // Tabellen Überschriften und Beschriftungen in der Fußzeile
    14. echo "<table class='sortable editable resizable'>
    15. <thead>
    16. <tr>
    17. <th class='sortfirstdesc' id='adf_gesellschaft'>Gesellschaft</th>
    18. <th id='adf_tarif'>Tarif</th>
    19. <th id='adf_alter'>Alter</th>
    20. <th id='adf_beitrag'>Beitrag</th>
    21. <th id='adf_leistungsstaerke'>Leistungsstaerke</th>
    22. </tr>
    23. </thead>
    24. <tfoot>
    25. <tr>
    26. <td>Gesellschaft</td>
    27. <td>Tarif</td>
    28. <td>Alter</td>
    29. <td>Beitrag</td>
    30. <td>Leistungsstaerke</td>
    31. </tr>
    32. </tfoot>
    33. ";
    34. //
    35. // Inhalte in Tabelle einfügen
    36. while($row = mysql_fetch_array($result))
    37. {
    38. echo "<tbody>";
    39. echo "<tr>";
    40. echo "<td>" . $row['adf_gesellschaft'] . "</td>";
    41. echo "<td>" . $row['adf_tarif'] . "</td>";
    42. echo "<td>" . $row['adf_alter'] . "</td>";
    43. echo "<td>" . $row['adf_beitrag'] . "</td>";
    44. echo "<td>" . $row['adf_leistungsstaerke'] . "</td>";
    45. echo "</tr>";
    46. echo "</tbody>";
    47. }
    48. echo "</table>";
    49. echo "<script type='text/javascript' src='js/prototype.js'></script>";
    50. echo "<script type='text/javascript' src='js/fabtabulous.js'></script>";
    51. echo "<script type='text/javascript' src='js/tablekit.js'></script>";
    52. //
    53. mysql_close($con);
    54. ?>
    Alles anzeigen
  • Einen konkreten Fehler deinerseits konnte ich jetzt auch nicht finden. Ich würde darauf tippen, dass prototpye respektive tablekit nur am anfang die seite nach zu sortierenden Elementen scannt. Da du jedoch deine Tabelle jedoch erst später dynamisch hinzufügst, wird diese nicht mehr erkannt. Aber wie gesagt, nur eine Vermutung. Ich bin kein JS Guru und von JS-Frameworks habe ich auch keine Ahnung.
    EDIT:
    Eine andere Idee wäre es, wenn du die tabelle schon in dein dokument schreibst und mittels css auf invisible setzt. Dann kannst du die Daten mit Ajax nachladen und setzt die tabelle mittels DOM und CSS auf visible. Vielleicht funktioniert es dann. Dafür müsstest du aber die getuser.php so anpassen, dass sie nur noch den inhalt aus tbody zurückgibt.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Deadman44 ()

  • Deine Vermutung wird wohl stimmen. Das habe ich jetzt während meiner Recherche schon mehrfach gelesen. Die Option wäre das Nachladen des JS, wofür ich jetzt allerdings noch keine Lösung habe. Werde mal weiter suchen (so lernt man am besten) - oder jemand hat ne Lösung. :)

    Ansätze hätte ich ein paar: beim protoype das evalScripts als Lösungsoption, wobei hier nur der im response enthaltene JS-code ausgeführt wird - läd aber keine scripte nach
  • Hi,

    du kannst versuchen bei deiner Response einfach eval() zu nutzen ... also eval(response).


    Ansonsten kannst auch die Ajaxfuntkion von Prototype nutzen, dann brauchst du dir um die Verarbeitung der Response keine Gedanken mehr zu machen. (Sollte automatisch erkannt werden)
    api.prototypejs.org/ajax/ajax/request.html

    Bei meiner uche ist immer das evalScripts als Lösung verwendet worden, allerdings keine Ahnung wie ich das einbaue...... :(


    Das ist keine Funtkion die du einbauen kannst, sondern eine Eigenschaft der Ajax Funktion von PT.

    If you use evalScripts: true, any inline <script> block will be evaluated. This does not mean it will be evaluated in the global scope
  • Statusupdate: also ich hab jetzt in der selectuser.js folgendes geändert:

    Quellcode

    1. function stateChanged()
    2. {
    3. if (xmlhttp.readyState==4)
    4. {
    5. document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    6. TableKit.load('adf_tabelle1');
    7. }
    8. }


    also das TableKit.load('adf_tabelle1'); eingefügt, damit er nach dem request die Tabelle mit der ID adf_tabelle1 läd.

    Funktioniert soweit auch ganz gut - beim ersten mal :( und auch nur in der ersten Zeile der Tabelle. Wenn ich einen anderen Eintrag auswähle funktionierts gar nicht mehr.

    Woran kann dies liegen ?
  • naja.. TableKit ist einfach nicht dafür gedacht einen Container mehrfach zu beladen.
    Ein möglicher Workaround der mir einfällt ist einen zweiten DIV Container zu befüllen. Und die alte Tabelle anschließend zu löschen.

    Ich möchte nicht zu schnell ein Urteil übe TableKit fällen, aber auf den ersten Blick sieht es nicht nach AJAX aus.
    Die meisten Scripte schreiben zwar AJAX auf ihre Webseiten, arbeiten aber nur mit JavaScript - sortieren also nur das um, was in der Tabelle ist.

    Ein schönes Script für Mootools ist OmniGrid: omnisdata.com/omnigrid/
    Für Jquery ist es FlexiGrid: flexigrid.info/
    Für Prototype habe ich leider nichts gefunden.