SQL-Query ausführen nach Eingabe in Textfeld @ tutorials.de: Tutorials, Forum & Hilfe

Rigoo · 09.01.12 23:26

Hallo zusammen,

vermutlich ist mein Anliegen (als JS/Ajax-Anfänger) sehr speziell, aber vielleicht findet sich ja jemand, der eine (einfache?) Lösung dafür hat.

Ausgangspunkt:

Eine Tabelle mit 2 Spalten. In der linken Zelle ein Eingabefeld, in das der Nutzer eine Eingabe tätigt, in der rechten Zelle soll später die Ausgabe erfolgen.

Beispiel:

Code :

<table>
    <tr>
        <td><input type="text" value="Benutzereingabe" /></td>
        <td>Hier erfolgt die Ausgabe</td>
    </tr>
</table>

Was soll genau passieren?

Gibt der Nutzer im Textfeld einen Inhalt ein, soll in der rechten Zelle eine Ausgabe erfolgen. Genauergesagt soll also "live" ein SQL-Query ausgeführt werden und in der rechten Zelle (je nach Benutzereingabe) ein Bild ausgegeben werden - quasi eine Suchfunktion und das Bild wird direkt rechts ausgegeben.

Wärend der Eingabe wäre es ganz toll, wenn eine "Laden"-Grafik angezeigt wird, aber eben nur, sofern eine Eingabe erfolgt (da es mehrere Zeilen mit Eingabefeldern gibt, später werden die Eingaben anderweitig weiterverarbeitet). Sofern nichts gefunden wird (nach X Sekunden Lade-Grafik) sollte ein Hinweis "nichts gefunden" angezeigt werden.

Das SQL-Query ist nicht das Problem, mein Problem ist lediglich die Umsetzung mit JS/Ajax, das bei Eingabe im <input>-Feld automatisch ein SQL-Query ausgeführt wird und eine entsprechende Ausgabe in der nebenstehenden Zelle generiert.

Vielleicht hat ja jemand eine Lösung.

Danke und Grüße,
Rigoo

***tombe*** · 10.01.12 10:19

Ich kann dir nur teilweise helfen weil ich (leider) von Ajax keine Ahnung habe. Aber um die Aktion auszulösen musst du dem Textfeld das onkeyup- bzw. onkeypress-Ereignis zuweisen.

Näheres dazu findest du hier.

String · 10.01.12 12:54

<input type="text" value="Benutzereingabe" onkeyup="AJAX();" />

Wie genau Ajax funktioniert findest du z.B. hier:
http://ajax.frozenfox.at/ajax_002.html

paD

Rigoo · 10.01.12 19:04

Hallo zusammen,

danke für die Antworten.

Mittlerweile habe ich mich etwas durch die Ajax-Welt gekämpft und schon einen "Teilerfolg" verbuchen können

Leider aber nur einen Teilerfolg...

Er liest nun die entsprechenden Daten aus der (Test)Datenbank aus und gibt mir den Namen sowie den Dateiname auch korrekt aus, siehe mein Beispiel (ID 1-4 kann eingegeben werden).

Folgendes steht noch auf meinem Zettel:

- Nach Eingabe im Textfeld sollte es eine Zeitverzögerung geben, bis die .php-Datei ausgeführt und der Inhalt ausgegeben wird (so lange soll weiter die Ladegrafik angezeigt werden). (bereits gelöst und unten im Code angepasst)
- Entfernt man seine Eingabe wieder, bleibt der Inhalt derzeit leer, hier sollte wieder die Ladegrafik angezeigt werden

Ich glaube, das wars erstmal - vielleicht kann mir hier ja noch jemand zur Hand gehen oder sogar sagen, was unten totaler Käse ist und/oder wie man das ganze besser machen kann.

Hier einmal mein bisheriger Stand:

ajax.html:

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" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <title>Ajax Test</title>
    <meta http-equiv="content-language" content="de" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="ajax.js"></script>
</head>
 
<body>
 
<h2>Ajax Test</h2>
 
<form name="ajaxform">
 
 
<form name="ajaxform">
    <table cellpadding="2" border="1">
        <tr>
            <th colspan="4">Vier Suchfelder…</th>
        </tr>
        <tr>
            <td width="25%" align="center" style="height:100px;">
                <div id="ausgabe">
                    <br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
                    <span style="font-size:10px;">Warte auf Eingabe</span>
                </div>
            </td>
            <td width="25%" align="center">
                <div id="ausgabe">
                    <br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
                    <span style="font-size:10px;">Warte auf Eingabe</span>
                </div>
            </td>
            <td width="25%" align="center">
                <div id="ausgabe">
                    <br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
                    <span style="font-size:10px;">Warte auf Eingabe</span>
                </div>
            </td>
            <td width="25%" align="center">
                <div id="ausgabe">
                    <br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
                    <span style="font-size:10px;">Warte auf Eingabe</span>
                </div>
            </td>
        </tr>
        <tr>
            <td width="25%" align="center">
                <input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
            </td>
            <td width="25%" align="center">
                <input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
            </td>
            <td width="25%" align="center">
                <input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
            </td>
            <td width="25%" align="center">
                <input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
            </td>
        </tr>
    </table>
</form>
 
 
</form>
 
</body>
</html>

ajax.php:

Code :

<?php
 
include('db_conf.inc.php');
 
if (isset($_GET['eingabe']) && $_GET['eingabe'] != "") {
 
    $abfrage = "SELECT id,name FROM bilder WHERE id = '".mysql_real_escape_string($_GET['eingabe'])."' AND ausgabe = 1";
    $ergebnis = mysql_query($abfrage) or die;
    $row = mysql_fetch_array($ergebnis);
 
    $abfrage2 = "SELECT dateiname FROM dateinamen WHERE bild_id = $row[id]";
    $ergebnis2 = mysql_query($abfrage2) or die;
    $row2 = mysql_fetch_array($ergebnis2);
 
    if ($row) {
        echo 'Name: '.$row['name'].'<br />';
        echo 'Bild: <img src="images/'.$row2['dateiname'].'" />';
    }
    else {
        echo 'Nichts gefunden...';
    }
 
}
 
else {
    echo'<br />
<img src="images/ajax-loader.gif" /><br /><br />
<span style="font-size:10px;">Warte auf Eingabe</span>';
}
 
?>

ajax.js:

Code :

var timeout = null;
 
function bsuche() {
    if (timeout) {  
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
        bgo('eingabe','ausgabe');
    }, 500);
}
 
 
function getHTTPObject(){
    if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
    else if (window.XMLHttpRequest) return new XMLHttpRequest();
    else {
        alert("Your browser does not support AJAX.");
        return null;
    }
}
 
 
function setOutput(){
    if(httpObject.readyState == 4){
        document.getElementById(tagId).innerHTML = httpObject.responseText;
    }
}
 
 
function bgo(arg, inTagId){
    httpObject = getHTTPObject();
    tagId = inTagId;
    if (httpObject != null) {
        httpObject.open("GET", "ajax.php?" + arg + "=" + document.getElementById('eingabe').value, true);
        httpObject.send(null);
        httpObject.onreadystatechange = setOutput;
    }
}
 
var httpObject = null;

***tombe*** · 11.01.12 08:09

Ändere mal in der "ajax.php" den IF-Block so ab, dann wird die Ladegrafik angezeigt wenn kein Suchbegriff eingegeben wurde bzw. dieser wieder gelöscht wird:

PHP-Code:


if (isset($_GET['eingabe']) && $_GET['eingabe'] != "") {

    // hier der Code der ausgeführt wird wenn ein gültiger Suchbegriff übergeben wird

} else{

    // und dieser Code wenn kein Suchbegriff übergeben wird

    echo 'Bild: <img src="bilder/ajax-loader.gif" />';

}

Was du aber auch noch machen solltest ist den übegebenen GET-Wert z.B. mit mysql_real_escape_string prüfen.

Außerdem dürfte die "id" ja eindeutig sein, dann kannst du ans Ende der Abfrage auch noch ein "LIMIT 1" machen.

Was ich nicht verstehe, ist der Sinn der Verzögerung. Jeder ist doch froh wenn er möglichst schnell das Ergebnis bekommt. Warum verzögerst du die Anzeige?

Rigoo · 11.01.12 10:20

Oh man: Danke, tombe! Manchmal sieht man den Wald vor lauter Bäumen nicht bzw. denkt einfach zu kompliziert!

Die GET-Werte werden natürlich noch vor SQL-Injections geschützt, aber danke für den Hinweis!

Zur Wartezeit:

Mein Hintergedanke war/ist, das ich vermeiden wollte, das man bei Eingabe von "13" schon das Ergebnis von "1" angezeigt bekommt, wärend man die Eingabe noch nicht abgeschlossen hat (nur Beispielhaft). Ob sich das später "live" durchsetzt oder ich das ganze doch ohne Verzögerung nutze muss ich dann mal schauen.

Rigoo · 12.01.12 12:07

Nun habe ich doch noch etwas, was ich bisher nicht bedacht habe in meinen Tests:

Ich habe später mehrere Eingabefelder und entsprechend auch mehrere (gleich viele) Ausgabe-DIVs. Diese würde ich dann natürlich alle entsprechend benennen: eingabe1, eingabe2, ... sowie ausgabe1, ausgabe2, ...

Nur: Wie bringe ich dem .js-Code bei, das es mehrere geben kann, ohne für jede ID eine neue Funktion anzulegen !?

***tombe*** · 12.01.12 15:16

Verstehe es mal wieder nicht so genau aber vielleicht hilft die als Parameter für den Funktionsaufruf die Angabe "this.id".

Damit übergibst du dann immer die ID des Objekts welche die Funktion aufruft. Innerhalb der Funktion kannst du ja dann wieder mit getElementById darauf zugreifen.

Rigoo · 12.01.12 18:41

Derzeit ist es ja so, das ich die Elemente "eingabe" und "ausgabe" nutze und entsprechend in meinem .js-Code verwende. Nun - im "live Betrieb" sollen aber mehrere "eingabe" und "ausgabe" elemente vorhanden sein, entsprechend setze ich die Namen also "eingabe1", "eingabe2", ... und "ausgabe1", "ausgabe2", ... mit fortlaufenden Nummern.

Danke für den Ansatz, aber kannst du dir ggf. einmal meinen .js-Code oben ansehen und mir verraten, wie ich diesen entsprechend anpasse? Javascript ist leider absolut nicht meine Welt

Rigoo · 12.01.12 20:52

Zur Vollständigkeithalber habe ich mein Beispiel von oben aktualisiert und oben auch den Code (aktueller Stand) eingefügt.

Ggf. kann mir ja jemand auf die Sprünge helfen, so das ich mehrere Felder (es werden am Ende mehr als 4 sein) nutze kann...

Edit: Und noch etwas, da steh ich scheinbar gerade auf dem Schlauch: Ich habe mittlerweile das ganze etwas weiter entwickelt und zwei Datenbankabfragen eingebunden. Wenn nichts gefunden wurde, sollte die Abfrage eigentlich ein "Nichts gefunden..." (siehe else) ausgeben, was aber nicht passiert (was an der zweiten Datenbankabfrage liegt, entferne ich diese, wird die Meldung wieder angezeigt). Ich glaube ich sehe gerade den Wald wieder vor lauter Bäumen nicht...

Edit2: OK, letzteres Problem habe ich gelöst, die zweite Abfrage gehört natürlich in die if-Schleife.

***tombe*** · 13.01.12 09:03

Willst du jetzt quasi gleichzeitig mehrere Abfragen starten?

Also in Feld 1 einen Wert eingeben, in Feld 2 einen anderen Wert eingeben, ... und in Feld xy nochmal einen Wert eingeben und dann sollen alle Ergebnisse angezeigt werden.

Oder sollen in den Feldern verschiedene Parameter für die Abfrage eingegeben werden?

Rigoo · 13.01.12 09:04

Der Endnutzer soll später in jedes Feld einen Wert eintragen können (also unterschiedliche) und im jeweiligen Feld darüber soll das entsprechende Ergebnis angezeigt werden - also identisch zum ersten Feld (was ja schon funktioniert). Die Abfrage selbst (in der Datenbank) bleibt für alle Felder identisch.

***tombe*** · 14.01.12 09:07

Um nicht zu viel Text hier reinzuschreiben, hänge ich dir mal die Dateien als ZIP hier dran.

Du kannst jetzt in jedes der Textfelder einen Wert eingeben und du bekommst das entsprechende Ergebnis geliefert.

Da ich in Sachen Ajax aber selber noch blutiger Anfänger bin habe ich mir den Code auch zusammengesucht und nur angepasst. Von der Funktion sollte es dir aber klar sein.

**chmee** · 14.01.12 10:02

Eine Sache : Ich würd die Überprüfung, ob überhaupt die SQL-DB abgefragt werden soll, in JS implementieren. Einfach nur, um unnötige Datenbewegungen zu vermeiden.

Ladezeichen? in JS.
keine Eingabe? in JS.
erste Überprüfung zwecks Injection? in JS.

mfg chmee

Rigoo · 14.01.12 11:28

DANKE, tombe! Das scheint prima zu funktionieren, werde später mal etwas weiter damit rumtesten...

@chmee:

Hat das wirklich größere Vorteile? Ich habe bisher immer versucht so wenig wie Möglich (nur so viel wie nötig) in JS umzusetzen. Es kann natürlich sein, das du recht hast - aufgrund meiner bescheidenen JS "Künste" wäre das aber für mich glaube ich ohnehin nicht umsetzbar und später einfach zu pflegen.

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

Nach Eingabe in Textfeld Mysql abfrage und ausgabe

JTextField-Eingabe soll erst nach kompletter Eingabe überprüft werden

Aktualisierung von Textfeld nach Eingabe in einem Anderen

Im Query etwas ausgeben auf Eingabe

formularfeld-eingabe nach eingabe sofort verarbeiten?

E-Mail:

Abonnieren Abbestellen