Form Submit mit Ajax und anschließendem jQuery

J

JonasLoerken

New member
Hey,

ich stehe derzeit vor einem, für mich, riesigen Problem, was ich einfach nicht gelöst bekomme.

Ich habe auf meiner Seite eine Suchfuntkion intergiert, welche eine Datenbank-Tabelle durchsucht. Dafür habe ich eine simple HTML-Form in verbindung mit einem PHP Script erstellt, welches auf der gleichen Seiten liegt wie das Formular. Soweit kein Problem. Das PHP Script sorgt dafür, dass die Suchergebnisse in einem unsichtbaren div dargestellt werden. Nun zum Problem: Dieses div soll nach dem erfolgreichen absenden des Formulares angezeigt werde, wie eine art Pop-Up nur eben als div.

Wenn ich das Formular nun standardmäßig absenden, lädt die Seite natürlich neu und das div öffnet sich nicht, da durch das refreshen mein jQuery-Code neu geladen wird bzw. der Abschnitt der für das öffnen des divs zuständig ist nicht geladen wird. Noch einmal zur erklärung: nach dem absenden des Formulares öffnet sich das div für ungefähr 0,5s - 1s bis die Seite neu lädt und das div natürlich wieder "hidden" ist.

Nun habe ich mich ein wenig schlau gemacht und die Lösung erschien Anfangs relativ simpel: Ajax. Nun aber das eigentliche Problem. Die Formular-Absendung mit Ajax an die aktuelle Seite funktioniert. Auch die unetrdrückung des refreshs und das öffnen des divs ist kein Problem. Das eigentliche Problem liegt bei der Darstellung der Suchergebnisse. Dadurch, dass kein refresh vorhanden ist, können die Suchergenisse nicht aus der MySQL-Datenbank an die PHP-echos weitergegeben werden. Bedeutet: Das div öffnet sich zwar, zeigt aber nichts an.

Was löse ich das am besten? Zur veranschaulichung findet ihr unten meinen Quellcode:

Code: 
<form id="suchForm" method="post" action="http://headonline.de/teamsite/index.php?article_id=1">
    <input type="text" id="suche" name="suche" placeholder="Suchen"/>
    <input type="submit" style="display:none"/>
</form>

Code: 
<?php
    if ( $_SERVER["REQUEST_METHOD"] == 'POST' ) {

    $suche = $_POST['suche'];
        
    if (!empty($suche)) {    
  
    $sql = new rex_sql;

    $sql->debugsql = 0;

    $sql->setQuery("SELECT * FROM rex_projekte WHERE projektname LIKE '%$suche%' OR projektnummer_hw LIKE '%$suche%' OR projektnummer_k LIKE '%$suche%'");

    if ($sql->getRows() >= 1) {
    for($i = 1; $i <= $sql->getRows(); $i++, $sql->next())
    {
        $projektname_suche = $sql->getValue("projektname");
        
        $suche_projekt_ausgabe .= '<span>'.$projektname_suche.'</span>';   // Dieses Span wird später noch per echo in dem hidden div ausgegeben
        
    }  
    }
    }   
    }        
    ?>

Code: 
var frm = $('#suchForm');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });
    });
 
ich würd das komplett in ajax machen wenn du es eh schon nutzt, lager die php aus.
mit den submit übermittelst du (ohne refresh) die daten an die php und lässt dir das ergebnis zurückgeben (die Liste oder was auch immer), ballerst die in dein div Container und fadest es ein oder was auch immer du dann vor hast
 
Gut, das ist schon mal ein Anfang. Aber wie bekomme ich die Daten aus der nun EXTERNEN PHP-Datei ohne meine HTML-Seite zu refreshen?
 
Hi,

du könntest mit on change ständig dein Input Feld abfragen. Bei jeder Eingabe eines Zeichens würde dann dein PHP aufgerufen.

PHP: 
$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

Kann man dann später verfeinern, in dem man erst nach der 3. Stelle anfängt, das PHP aufzurufen. Ist aber nur ein Beispiel.

Gruß,
Terra
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben