Suchmaschine mit Ajax @ tutorials.de: Tutorials, Forum & Hilfe

nchristoph · 23.09.11 07:38

Hallo,

ich arbeite gerade an einer Suchmaschine mit PHP. Ich hab jetzt nach einem Tutorial Ajax hinzugefügt um die Ausgabe zu vereinfachen.

Leider funktioniert die Ausgabe nicht ganz so wie ich will.

Index.php

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Masslisten Suchmaschine</title>
<link href="suche.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function searchFor(suchbegriff){
            var xmlHttp = null;
            // Mozilla, Opera, Safari sowie Internet Explorer 7
            if (typeof XMLHttpRequest != 'undefined') {
                xmlHttp = new XMLHttpRequest();
            }
            if (!xmlHttp) {
                // Internet Explorer 6 und älter
                try {
                    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                    try {
                        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch(e) {
                        xmlHttp  = null;
                    }
                }
            }
            // Wenn das Objekt erfolgreich erzeugt wurde            
            if (xmlHttp) {
                var url = "suche.php";
                var params = "suchbegriff="+suchbegriff;
                
                xmlHttp.open("POST", url, true);
                
                //Headerinformationen für den POST Request
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlHttp.setRequestHeader("Content-length", params.length);
                xmlHttp.setRequestHeader("Connection", "close");                    
            
                xmlHttp.onreadystatechange = function () {
                    if (xmlHttp.readyState == 4) {
                        // Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
                        document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
                    }
                };                
                xmlHttp.send(params);
            }            
        }
    </script>
</head>
<body>
<div class="suchmaschine"><center><h1>Masslisten Suchmaschine</h1>
<br/>
<table style="width:400px;border:0;" >
  <tr>    
      <td height="23"><label for="search_term">
        <input  type="text" onkeyup="searchFor(this.value);" size="60" />
      </label></td>
        </tr>
</table>
<div class="header"><table>
<tr ><th class="position">Holzart</th><th class="starke">St&auml;rke</th><th class="klasse">Klasse</th><th class="trocken">Trockenheit</th><th class="partie">Partienummer</th><th class="link">Link</th></tr>  
<div id="ergebnis"></div>
</table></div></center>  
</center>
</div>
</body>
</html>

Search.php

PHP-Code:


<?php
    $server = "localhost";
    $benutzername = "root";
    $passwort = "";    
    
    $datenbank = "suchmaschine";

    // Server Verbindung herstellen
    mysql_connect($server,$benutzername,$passwort) or 
    die ("Keine Verbindung moeglich");
    
    // Datenbank Verbidung
    mysql_select_db($datenbank) or
    die ("Die Datenbank existiert nicht");

    $tabelle = "suchmaschine";

 
    if ($_POST["suchbegriff"])
    {
    $sql = "SELECT
                ID,
                Holzart,
                Klasse,
                Trockenheit,
                Partie,
                Kubik,
                Starke,
                Pfad
            FROM
                suchmaschine
            WHERE
                Holzart LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
                Klasse LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
                Trockenheit LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
                Partie LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
                Kubik LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
                Starke LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%'"; 
            
        $result = mysql_query($sql) OR die(mysql_error());
        if(mysql_num_rows($result)) { // gucken ob was im Query drinsteckt
            while($row = mysql_fetch_object($result)) 
            {
                echo ('<tr>');
                echo ('<td class="position">'.(utf8_decode($row->Holzart)).'</td>');
                echo ('<td class="starke">'.(utf8_decode($row->Starke)).'</td>');
                echo ('<td class="klasse">'.(utf8_decode($row->Klasse)).'</td>');
                echo ('<td class="trocken">'.(utf8_decode($row->Trockenheit)).'</td>');
                echo ('<td class="partie">'.(utf8_decode($row->Partie)).'</td>');
                echo ('<td class="link"><a href="'.(utf8_decode($row->Pfad)).'">'.(utf8_decode($row->Partie)).'</a></td>');
                echo ('</tr>');
            }
        }else{
                echo 'Suche ergab keine Treffer<br />';
        }
    }
?>

Wenn ich das ganze ohne Ajax mache, klappt die formatierte Ausgabe. Sobald ich Ajax benutze, gibt er mir die Suchergebnisse unformatiert und in einer Wurst aus.

Wie kann ich das richtig machen? Ich bin ein totaler Anfänger punko Ajax und Javascript.

mit verzweifelten Grüssen

***CPoly*** · 23.09.11 10:38

Ich nehme an, dass Problem mit deiner Ausgabe liegt daran, dass "#ergebnis" ein DIV ist und du in deinem echo aber Tabellen Zeilen ausgibst. Da fehlt das "<table></table>".

Du kannst dir die beiden Header übrigens sparen, die werden natürlich automatisch gesetzt. Wäre ja sonst ziemlich nervig.

Code javascript:

1 2	xmlHttp.setRequestHeader("Content-length", params.length); xmlHttp.setRequestHeader("Connection", "close");

nchristoph · 23.09.11 10:49

Den table Tag hab ich vor und nach dem Div gemacht. Wie könnte ich das anders lösen, als mit Table?

//Edit: Auch das Umplatzieren der Table Tags hab keine änderung gebracht. Im Quelltext wird die Tabelle auch nicht angezeigt.

//Edit2: Habs hingekriegt. Ich hab einfach den Div durch einen Table ersetzt. Funktioniert wie ein Glöckchen, die Formatierung noch nicht ganz aber das krieg ich auch noch hin

***CPoly*** · 23.09.11 10:55

Zitat von nchristoph

Den table Tag hab ich vor und nach dem Div gemacht.

Das ist dann aber kein gültiges HTML. Direkt unterhalb eines <table> Tags hat kein <div> etwas zu suchen.

Wirf das div raus, nenn die Tabelle stattdessen "ergebnis" (id) und jetzt musst du nur deine Überschriften jedes mal nochmal ausgeben. Also direkt vor der while Schleife

HTML-Code:

<div class="header"><table id="ergebnis"></table></div>

PHP-Code:


echo '<tr ><th class="position">Holzart</th><th class="starke">St&auml;rke</th><th class="klasse">Klasse</th><th class="trocken">Trockenheit</th><th class="partie">Partienummer</th><th class="link">Link</th></tr>';

Das hat auch den Vorteil, dass du alles auf der Server Seite hast. Angenommen es kommt eine weitere Spalte dazu, dann musst du nicht zusätzlich das HTML oder JavaScript ändern.

nchristoph · 23.09.11 10:59

Danke für die Hilfe, funktioniert wie geschmiert.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Ajax -> $(ajax) Response Text Leer oder undefined

Nach Ajax.Updater weiteres Ajax ausführen

Problem mit Firefox & Prototype (Ajax.Request & Ajax.Updater)

[PROTOYPE/AJAX] Probleme mit Ajax.PeriodicalUpdater

Eclipse ATF Ajax Toolkit Framework zur Entwicklung von Ajax Anwendungen

E-Mail:

Abonnieren Abbestellen