jQuery UI Tabs und Formulare

[MAPtheMOP]

Ich habe mittels jQuery UI auf einer Seite Tabs erzeugt. Einer davon lädt als Inhalt mittels Ajax Request eine zweite Seite. In dieser habe ich ein Formular, das POST-Daten versendet.
Leider wird beim Absenden des Formulars nur die eingebundene Seite im Browser geöffnet und somit die erste Seite verlassen.
Ich möchte, dass der Besucher auf der ersten Seite bleibt und das Formular nur innerhalb des Tabs ausgewertet wird.

Ideen?

 

[threadi]

Schick das Formular per AJAX ab.

 

[MAPtheMOP]

Schon probiert, selber Effekt. Sobald die zweite Seite irgendwie das Ziel einer Anfrage ist, wird sie geöffnet. Ist die erste Seite das Ziel, passiert nix, da die zweite Seite die POST-Daten nie erhält.

 

[threadi]

Dann hast Du den Request falsch definiert. Wenn Du das Formular mit onsubmit mit einer JavaScript-Funktion per AJAX abschicken lässt, musst Du auch den tatsächlichen Versand unterdrücken. Beispiel für diesen return-Wert:

<form action="#" onsubmit="return false;">

 

[MAPtheMOP]

Ne, das wird natürlich mit jQuery bearbeitet:

<script type="text/javascript">
                $(document).ready(function() {
                    $('input[name=kommentar_submit]').click(function () {
                        var komm = $('textarea[name=kommentar_text]').val();
                        $('textarea[name=kommentar_text]').attr('disabled', 'true');
                        $('.loading_icon').show();
                        $.ajax({
                            url: 'form.php', 
                            type: 'POST', 
                            data: {'kommentar_text':komm}, 
                            success: function (reqCode) {
                                if (reqCode==1) {
                                    $('.form').fadeOut('slow');
                                    $('.done').fadeIn('slow');
                                } else{
                                    alert('Fehler beim Abschicken des Formulares.');
                                }
                            }
                        });
                        return false;
                    });
                });
            </script>

 

[threadi]

Das hängt aber an einem input-Feld, nicht am Form. Vlt. ist das das Problem wieso das Formular abgeschickt wird? Schau mal mit Firebug nach, ob ein AJAX-Request ausgelöst wird und was überhaupt passiert beim Anklicken.

 

[MAPtheMOP]

Ich will ja das Formular absenden!
Es geht eigentlich nur darum, wie dann damit umgegangen wird. Bei allen bisher probierten Lösungen "löst" sich die Formularseite aus ihrem Tab und wird dann komplett alleine im Browser angezeigt.
Das soll aber so nicht sein. Der Besucher soll weiterhin (oder zur Not auch wieder) die erste Seite mit den Tabs sehen und das Absenden des Formulars soll ausschließlich Innerhalb des Tabs passieren.
Die Meldung "Formular abgesendet!" soll also nach dem Absenden den Inhalt des Tabs ersetzen und nicht die komplette Seite mit allen Tabs.

 

[threadi]

Nochmal der Code ohne jQuery der für dich relevant wäre:

<form action="#" method="post" onsubmit="return sendForm();">
<input type="text" name="feld1" id="feld1" value="" />
<input type="submit" name="senden" value="Abschicken" />
</form>
<div id="rueckgabe"></div>

function sendForm() {
 var http = null;
 var values = "feld1=" + document.getElementById("feld1").value;
 if (window.XMLHttpRequest) {
   http = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
   http = new ActiveXObject("Microsoft.XMLHTTP");
 }
 if (http != null) {
   http.open("POST", "speichereFormular.php", true);
   http.onreadystatechange = ausgeben;
   http.setRequestHeader(
      "Content-Type",
      "application/x-www-form-urlencoded");
   http.send(values);
 }
 if (http.readyState == 4) {
      document.getElementById("rueckgabe").innerHTML = http.responseText;
   }
 return false;
}

Wenn "speichereFormular.php" dann "ok" zurückgibt, wirst Du nach dem Abschicken des Formulars nicht die Seite wechseln sondern in dem <div> darunter "ok" stehen sehen. Auf diese Weise kannst Du die Werte aus den Feldern per AJAX an den Server schicken, ohne dass irgendeine neue Seite oder irgendein Browserfenster neu geöffnet wird.

Wenn bei dir das nicht passiert, dann hast Du noch irgendetwas anders. Was das ist kann man ohne Link aber nur raten.

 

[MAPtheMOP]

Ich habe nun ein wenig herumprobiert und bin inzwischen soweit, dass meine Formularseite tatsächlich nur im Tab neu geladen/gesendet wird.
Für deine Lösung danke ich dir herzlich!
Einzige Fehlfunktion: $_POST ist nach dem Absenden offenbar leer, so dass auch keine entsprechende Ausgabe geliefert wird. Aber dieses Problem scheint mir momentan leichter lösbar, als mein eigentliches Problem.
Daumen hoch und Gruß aus deiner Heimatstadt! ;)

 

[threadi]

$_POST muss in speichereFormular.php einen Wert haben, wenn die Datei aufgerufen wird. Schließlich werden die Daten per POST an die Datei übertragen.

Wenn Du nicht deinen Code zeigst, den Du verwendest, kann man dir nicht wirklich helfen.

 

[MAPtheMOP]

Danke, aber ich konnte das Problem bereits beheben.
Du hast mir aber sehr geholfen. ;)