Ergebnis 1 bis 7 von 7
  1. #1
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    Angry Form Submit mit Ajax und anschließendem jQuery

    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');
                }
            });
        });

  2. #2
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Form Submit mit Ajax und anschließendem jQuery

    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

  3. #3
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    AW: Form Submit mit Ajax und anschließendem jQuery

    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?

  4. #4
    Avatar von terra75
    terra75 ist offline Doppel-As
    registriert
    19-08-2015
    Beiträge
    116

    AW: Form Submit mit Ajax und anschließendem jQuery

    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-Code:
    $('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

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: Form Submit mit Ajax und anschließendem jQuery

    Zitat Zitat von terra75 Beitrag anzeigen
    du könntest mit on change ständig dein Input Feld abfragen. Bei jeder Eingabe eines Zeichens würde dann dein PHP aufgerufen.
    Das ist leider falsch. onchange feuert nur, wenn man das <input> dann verlässt. Das "input"-Event feuert bei jeder Eingabe.

  6. #6
    Avatar von terra75
    terra75 ist offline Doppel-As
    registriert
    19-08-2015
    Beiträge
    116

    AW: Form Submit mit Ajax und anschließendem jQuery

    Arg .. stimmt.

    Mit .keyup(function() { kann es aber gehen.

    Terra

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.685

    AW: Form Submit mit Ajax und anschließendem jQuery

    keyup feuert nicht, wenn man mit der Maus etwas einfügt... wie gesagt: input

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 06-12-2012, 23:01
  2. Probleme mit form.submit()
    Von LittlePritt im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 18-12-2010, 18:09
  3. this.form.submit() + Post
    Von Farmy im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 03-12-2009, 15:22
  4. [jQuery] ajax function to submit form and livevalidation
    Von strictvegetaria im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 20-01-2009, 12:48
  5. Countdown mit anschließendem Link
    Von Alex_21 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 03-05-2007, 21:00

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •