ajax suche: resultate formatieren ?!

  • ajax suche: resultate formatieren ?!

    Guten Tag,

    Ich beschäftige mich seit kurzer zeit mit ajax und co. Habe also noch nicht so viel Ahnung. Bin nun daran einen Einstieg zu finden.

    Dazu habe ich mir vorgenommen eine einfache Kundenverwaltung zu erstellen.

    Die kunden sind in einer sql-datenbank gespeichert.

    Nun möchte ich eine suchfunktion integrieren. dabei haperts zur zeit etwas.

    habe mal aus verschiedenen beispielen etwas zusammengebastelt.

    hier meine livesearch.php:

    Quellcode

    1. <?
    2. header("Content-type: text/xml;charset=ISO8859-1");
    3. require("connect.php");
    5. echo "<?xml version='1.0' encoding='utf-8' ?>";
    6. ?>
    9. <ul class='LSRes'>
    11. <?
    12. function sucheFirma($q2){
    13. $res = mysql_query("SELECT * FROM ec_KUNDE WHERE FIRMA LIKE '". $q2 ."%'; ");
    14. while($row = mysql_fetch_object($res)) {
    15. echo "<li class='LSRow'> » $row->FIRMA</li>";
    16. }
    17. }
    19. if($_GET['q'] == "init"){
    20. $res = mysql_query("SELECT * FROM ec_KUNDE ");
    21. while($row = mysql_fetch_object($res)) {
    22. echo "<li class='LSRow'> » $row->FIRMA</li>";
    23. }
    24. }
    26. switch($_GET['f'])
    27. {
    28. case "1": sucheFirma($_GET['q']);
    29. break;
    31. }
    33. ?>
    34. </ul>
    Alles anzeigen

    die suche funktioniert wunderbar und die resultate werden angezeigt.

    nur mein problem ist, dass ich die resultate nicht formatieren kann, bzw. nicht dorthin bekomme, wo ich sie gerne haben möchte.

    ich habe eine tabelle in der ich dann die ergebnisse anzeigen möchte.
    die tabelle sieht so aus:

    Quellcode

    1. <table id="myTable" class="kundenTabelle">
    2. <thead>
    3. <tr bgcolor="silver">
    4. <td> <strong>Firma</strong> </td>
    5. <td> <strong>Name</strong> </td>
    6. <td> <strong>Vorname</strong> </td>
    7. <td> <strong>Adresse</strong> </td>
    8. <td> <strong>Plz</strong> </td>
    9. <td> <strong>Ort</strong> </td>
    10. <td width="80px" align="right" style="border-right: 0px "> <strong>Aktion</strong>
    11. </td>
    12. </tr>
    13. </thead>
    14. <tbody class="scrollingContent">
    16. <!-- hier sollten die Resultate erscheinen ! -->
    18. </tobdy>
    19. </table>
    Alles anzeigen


    möchte nun gerne jede zeile die bei der suchanfrage gefunden wird, an die tabelle anhängen. und zwar in der form:
    <tr><td>$Firma</td><td>$Name</td>........usw.....</tr>

    wenn ich die ergebnisse per innerHTML einem div zuweise, funktioniert alles wunderbar mit der <ul><li>...</li></ul> struktur.

    kann mir einer weiterhelfen, wie ich meine ergebnisse der tabelle anfügen kann ?

    ich wäre für jeden tipp sehr dankbar ! ich hoffe ihr konntet meinen erklärungen folgen. Ansonsten bitte einfach nachfragen !

    schönes wochenende und vielen dank !

  • Hi,

    wenn du gültiges XML zurückgibst und responseXML verwendest, dann kannst du mit replace_child() arbeiten. Und so, z.B. das tbody austauschen.

    Ein ganz einfacher Weg, wäre schlichtweg die ganze Tabelle zu ersetzen.

    Ein weiterer Ansatz ist es mit JSON zu arbeiten und sich mit den DOM Baum selbst aufzubauen.

    Hier noch ein Link zum DOM Scripting:
    http://yatil.de/Artikel/interaktive-tabelle-mit-dom-scripting

  • Hi,

    herzlichen dank für deine schnelle antwort !

    ich verwende als basis folgende .js datei, welche ich leicht auf meine bedürfnisse angepasst habe:
    http://blog.bitflux.ch/livesearch.js

    müsste ich dann also anstatt "sh.innerHTML = liveSearchReq.responseText;" folgendes schreiben: "sh.innerHTML = liveSearchReq.responseXML;" ?

    kenne mich leider mit xml nicht aus. wäre es denn gültig wenn ich dort gleich die ganzen html-tags rausschreibe ? ungefähr so:

    Quellcode

    1. <?
    2. header("Content-type: text/xml;charset=ISO8859-1");
    3. require("connect.php");
    5. echo "<?xml version='1.0' encoding='utf-8' ?>";
    6. ?>
    9. <?
    10. function sucheFirma($q2){
    11. $res = mysql_query("SELECT * FROM ec_KUNDE WHERE FIRMA LIKE '". $q2 ."%'; ");
    12. while($row = mysql_fetch_object($res)) {
    13. echo "<tr><td> » $row->FIRMA</td> <td> » $row->NAME</td> /* ... usw.... */</tr>";
    14. }
    15. }
    19. if($_GET['q'] == "init"){
    20. $res = mysql_query("SELECT * FROM ec_KUNDE ");
    21. while($row = mysql_fetch_object($res)) {
    22. echo "<tr><td> » $row->FIRMA</td> <td> » $row->NAME</td> /* ... usw.... */</tr>";
    23. }
    24. }
    26. switch($_GET['f'])
    27. {
    28. case "1": sucheFirma($_GET['q']);
    29. break;
    31. }
    33. ?>
    Alles anzeigen


    glaube das mit der ganzen tabelle zu erstzen wäre nicht möglich, denn ich verwende folgendes script, damit man die tabelle sortieren kann:
    http://www.dhtmlgoodies.com/index.html?showDownload=true&whichScript=table_widget

    ok, vielen dank ! ich werde mir das mal genauer ansehen !

    freundliche grüsse !

  • ja, sieht mit nach gültigem XML aus.
    aber statt der innerHTML Zuweisung müsste man eben mit replaceChild arbeiten.

    Ich denke aber, dass du dein tableWidget sowieso nach jedem AjaxAufruf nochmal neu initialisieren musst.

    Quellcode

    1. function liveSearchProcessReqChange() {
    2. if (liveSearchReq.readyState == 4) {
    3. //....
    5. sh.innerHTML = liveSearchReq.responseText;
    6. initTableWidget('myTable',500,250,Array('S','N',false,'N','S'));
    7. }
    8. }


    Deiner widget_tableDiv könntest du dann eine ID verpassen und direkt austauschen.

  • ok, danke !

    habe das mal so gemacht:

    Quellcode

    1. var te = document.createTextNode (liveSearchReq.responseXML);
    2. //sh.innerHTML = liveSearchReq.responseXML;
    3. document.getElementById("test").replaceChild(te, document.getElementById("test").firstChild);


    Funktioniert leider nicht. Im FireFox steht da, wo der Text sein sollte: "[object XMLDocument]"

    und wenn ich so mache:

    Quellcode

    1. var te = document.createTextNode (liveSearchReq.responseText);
    2. //sh.innerHTML = liveSearchReq.responseXML;
    3. document.getElementById("test").replaceChild(te, document.getElementById("test").firstChild);


    dann wird zwar das resultat angezeigt, jedoch inklusive aller html-tags !


    wie meinst du das genau ? das mit der id und austauschen ?

    das ich anstatt nur den <tbody> bereich die ganze tabelle per replaceChild() ersetze und danach das initTableWidget(...) aufrufe ?

  • Ich habe mir das bitflux Script nochmal angeschaut. Dass ist zwar gut, aber eben auf die Bedürfnisse der Bitflux Seite angepasst.
    Es ist also ein riesen Aufwand es so zu ändern, dass man Zeilen statt Aufzählungslisten benutzen kann.

    Schau dir mal meine HowTos zu JQUERY und Scriptaculous an. Damit hast du wesentlich mehr Möglichkeiten:
    * [coderwiki]HowTos/Ajax-Autocomplete-jQuery[/coderwiki]
    * [coderwiki]HowTos/Ajax-Autocomplete-scriptaculous[/coderwiki]