Sweetallert funktioniert nicht im Formular

[petja]

Hallo Freunde des gepflegten Javascript,

gleich vorweg, ich habe von Javascript wenig bis keine Ahnung. Ich weiß auch nicht in welches Forum ich die Frage stellen soll. Gegoogelt habe ich heute den halben Tag und die Forum Suche hier hat auch nichts ergeben. Deshalb möchte ich Euch um Hilfe bitten.

Bisher bin ich eigentlich immer gut damit gefahren benötigte Codeschnipsel zu suchen und in meinen Seiten zu verarbeiten. Diesmal bin ich ratlos ich bekomme es einfach nicht hin. Es geht wie aus der Überschrift hervorgeht um Sweetalert, ich hoffe es ist dem einen oder anderen ein Begriff und kann mir helfen. Folgendes Problem tut sich auf.

Dieses Script funktioniert wenn ich den Button klicke kommt der Alarm wie es sein soll.

 <button class="transVar" name="delete">Löschen</button>

 $('.transVar').click(function () {
 swal({
 title: "Bist Du sicher?",
 text: "Die Datei kann nicht wieder hergestellt werden!",
 type: "warning",
 showCancelButton: true,
 confirmButtonColor: "#DD6B55",
 confirmButtonText: "Ja, löschen!",
 cancelButtonText: "Nein, abrechen!",
 closeOnConfirm: false,
 closeOnCancel: false },
 function (isConfirm) {
 if (isConfirm) {
 swal("Gelöscht!", "Die Datei wurde gelöscht.", "success");
 } else {
 swal("Abruch", "Die Datei ist gesichert :)", "error");
 }
 });
 });

 <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
 <script src="js/plugins/sweetalert/sweetalert.min.js"></script>

Das Script und das css werden geladen und liegen auch entsprechend auf dem Server.

Packe ich den Button in ein Formular und klicke dann darauf, kommt ganz kurz der Alarm und geht gleich wieder weg danach wird mein php Script ausgeführt ohne das ich irgendwas bestätigen konnte. Auch hier wird das Java Script und die dazugehörige css geladen.

<form action="#" method="post">
<button class="transVar" name="delete">Löschen</button>
</form>

Was mache ich falsch kann mir jemand helfen? Fehlt vielleicht ein onclick oder so etwas.

Liebe Grüße Petja

 

[bermany]

Versuch mal folgendes:

<button type="button" ...

Ich schätze, Dein Button löst einen Submit aus.

 

[petja]

Vielen Dank für die Antwort. Leider funktioniert es nicht. Jetzt wird der alert richtig angezeigt aber nachdem ok geben für Datei löschen wird das php Script nicht ausgeführt.
Grüße Petja

 

[kkapsner]

Das Problem ist, dass du mit dem <button> das Formular abschickst. Entweder fügst du ein type="button" ein (ja, das klingt überflüssig. Ist es aber nicht, da der Standardwert für type bei einem <button> eben "submit" ist...) oder öffnest dieses Sweetalert nicht im onclick, sondern im onsubmit des <form> und verhinderst im JS über EVENT.preventDefault() das Absenden des Formulars. Letzteres hat den Vorteil, dass das <form> dann auch bei deaktiviertem JS funktioniert.

PS: Im JS musst du dann natürlich dann noch das Formular wirklich absenden, sonst passiert ja gar nichts...
PPS: Du solltest deinen JS-Code auf jeden Fall sauber formatieren (ich meine jetzt die Einrückungne). So ist er etwas schwer zu lesen.
PPPS: action="#" ist unsinnig und überflüssig -> weg damit.

- - - Aktualisiert - - -

EDIT: oh... Antwort von bermany übersehen, da Seite nicht aktualisiert.

 

[petja]

AW: Sweetalert funktioniert nicht im Formular

Danke für die Antwort. in meinem php Script sieht die Action so aus:

action="<?php echo $_SERVER['PHP_SELF']; ?>"

Hier nochmal der Code eingerückt. Hab ich beim ersten Post wohl übersehen das es nicht übernommen wurde. Sorry!

$('.transVar').click(function () {
    swal({
        title: "Bist Du sicher?",
        text: "Die Datei kann nicht wieder hergestellt werden!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Ja, löschen!",
        cancelButtonText: "Nein, abrechen!",
        closeOnConfirm: false,
        closeOnCancel: false },
    function (isConfirm) {
        if (isConfirm) {
            swal("Gelöscht!", "Die Datei wurde gelöscht.", "success");
        }
            else {
                swal("Abruch", "Die Datei ist gesichert :)", "error");
            }
    });
});

Kannst Du mir das bitte etwas genauer erläutern.

PS: Im JS musst du dann natürlich dann noch das Formular wirklich absenden, sonst passiert ja gar nichts...

Ich habe echt kein Plan von Javascript. Ich bin froh wenn ich Onkel if und Tante else mit php befriedigen kann.

Grüße Petja

 

[bermany]

Das ist jetzt von mir nur eine Vermutung, aber nur weil eine Meldung am Bildschirm erscheint, kann ja auch nichts passieren.
Du musst dafür sorgen, dass der Browser eine Meldung an den Server schickt.

$('.transVar').click(function () {
    swal({
        title: "Bist Du sicher?",
        text: "Die Datei kann nicht wieder hergestellt werden!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Ja, löschen!",
        cancelButtonText: "Nein, abrechen!",
        closeOnConfirm: false,
        closeOnCancel: false },
    function (isConfirm) {
        if (isConfirm) {
// HIER FEHLT DER SUBMIT, z.B. formname.submit();
            swal("Gelöscht!", "Die Datei wurde gelöscht.", "success");
        }
            else {
                swal("Abruch", "Die Datei ist gesichert :)", "error");
            }
    });
});

Aber:

Wird der Submit ausgelöst, kommt die Meldung "Die Datei wurde gelöscht" nur für einen kurzen Moment, wenn überhaupt. Grund: PHP baut eine neue Seite auf.
Vermutlich wirst Du glücklicher, wenn Du den Löschbefehl mit AJAX an den Server schickst.

 

[kkapsner]

in meinem php Script sieht die Action so aus:

So ist es nur noch unnötig, denn action steht standardmäßig auf der aktuelle URL.

Sorry!

Kein Problem. Ist ja gut, wenn du es sowieso schon machst.

Kannst Du mir das bitte etwas genauer erläutern.

Nachdem der Nutzer "OK" geklickt hat, muss ja dem Browser gesagt werden, was er als nächstes machen soll. Wenn du dem <form> eine ID gibst, kannst du das Formular dann mit

document.getElementById("DIE_ID").submit()

absenden.

... aber nur, wenn du nicht das mit dem onsubmit gemacht hast, denn sonst musst du deine Logik ein bisschen ändern, da dann ja wieder das onsubmit-Event gefeuert würde (zusammen mit dem EVENT.preventDefault() und der alert).

 

[petja]

Vielen Dank für die Antworten,

ich habe nun den Javaschnipsel wie folgt angepasst.

$('.transVar').click(function () {
    swal({
        title: "Bist Du sicher?",
        text: "Die Datei kann nicht wieder hergestellt werden!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Ja, löschen!",
        cancelButtonText: "Nein, abrechen!",
        closeOnConfirm: false,
        closeOnCancel: false },
    function (isConfirm) {
        if (isConfirm) {
            document.getElementById("aufbauForm").submit();
        }
            else {
                swal("Abruch", "Die Datei ist gesichert :)", "error");
            }
    });
});

Nun kommt keine Meldung mehr nachdem man das OK zum löschen gegeben hat. Soweit so gut. Meinem Formular habe ich eine id verpasst und es sieht nun so aus:

<form method="post" id="aufbauForm">

den Button gebe ich auch seinen Type mit und zwar so:

<button type="button" class="transVar" name="delete">Löschen</button>

Leider wird das php Script weiterhin nicht ausgeführt. :-(

LG Petja

 

[kkapsner]

Hast du einen Link, wo wir uns das Live ansehen können?

PS: Welchen Browser verwendest du zum Testen?

 

[petja]

Hallo,

nein einen Link habe ich nicht weil es in einem geschützten Bereich ist. Ich könnte es aber selektieren um es zu zeigen. Getestet habe ich mit ie und Mozilla.

Grüße Petja

 

[mikdoe]

die stelle isolieren und ein fiddle machen wäre hilfreich.

 

[petja]

Ich habe mal versucht ein fiddle einzurichten. Ich hoffe das passt so weil da gefragt wird ob der gesamte Inhalt geladen werden soll. Mal probieren.

LG Petja

JS Fiddle Sweetalert

 

[mikdoe]

sehr gut. jetzt sag noch dazu was man machen muss um was zu sehen oder zu vermissen oder welchen unklaren fehler zu bekommen.

 

[petja]

Guten Morgen,
ok, dann will ich das mal noch kurz in Worte fassen.

Wenn man den Button "Löschen" drückt soll ein Datensatz aus einer SQL Datenbank gelöscht werden. Das php Script alleine funktioniert einwandfrei.

Nun wollte ich mit dem Sweetalert erst fragen ob es wirklich gelöscht werden soll. Wenn der Alert sich meldet sind da zwei Button. Einer mit "Nein abrechen" und einer mit "Ja, ich will löschen". Wenn man dann auf den Lösch Button klickt soll das php Script ausgeführt werden und der Eintrag gelöscht werden. Abrechen dürfte selbst erklärend sein und funktioniert auch wie es soll.

Grüße Peter

 

[mikdoe]

und wo genau hängt es? wie lautet die frage?

 

[petja]

Guten Morgen,

was kann ich tun damit wenn im Sweetalert der Button "Ja, ich will löschen" gedrückt wird mein php Script ausgeführt wird und der Datensatz dann gelöscht wird.

 

[mikdoe]

Das geht über ein Formular oder über Ajax. Wo findet man denn eine Doku zu diesem Sweetalert? Da muss es irgendwo ein Parameter onconfirm oder ähnlich geben.

 

[petja]

Hallo,
ja, ich habe ein Formular dafür so wie ich es im jsfiddle dargestellt habe. Vielleicht hilft das hier weiter oder das hier

LG Petja

 

[mikdoe]

du musst den code für swal einbinden. oder ist das bestandteil von bootstrap?

 

[petja]

Hallo nochmal,

ich hab es mal selektiert. Oben sieht man die Codes die ich eingebaut habe das erste ist der php Schipsel und unten drunter ist der Java Schnipsel. Unten sieht man das Formular. Es werden alle nötigen Scripte geladen.

Sweetalert

Hier gleich mal noch den gesamten Code der Seite

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sweetalert</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>
    <div id="wrapper">
            <div class="wrapper wrapper-content  animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox ">
                            <div class="ibox-title">
                                <h5>Sweet Alert</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="row text-left">
                                   <pre>
                                       //Prüfen ob und welches Formular gesendet wurde
                                           if (isset($_POST['delete'])) {
                                               $transVariable = $_POST["transVariable"];
                                               $transVariable = htmlspecialchars(trim($transVariable));
                                               $delete = mysqli_query($db, "
                                               DELETE FROM
                                                   translation
                                               WHERE
                                                   transVariable = '$transVariable'");
                                           }
                                   </pre>
                                   <pre>
                                   $('.langVar').click(function () {
                                       swal({
                                           title: "Sind Sie sicher?",
                                           text: "Der Datensatz kann nachdem löschen nicht wiederhergestellt werden. Es werden auch alle Übersetzungen zu diesem Aufbau gelöscht!",
                                           type: "warning",
                                           showCancelButton: true,
                                           confirmButtonColor: "#DD6B55",
                                           confirmButtonText: "Ja, ich will löschen!",
                                           cancelButtonText: "Nein, abrechen",
                                           closeOnConfirm: false,
                                           closeOnCancel: false },
                                       function (isConfirm) {
                                           if (isConfirm) {
                                               document.getElementById("aufbauForm").submit();
                                           } else {
                                                 swal("Abgebrochen", "Die Datei ist gesichert :-)", "error");
                                             }
                                       });
                                   });
                                    </pre>
                                    <div class="col-lg-6 h-100 p-lg">
                                        <form action="#" method="post" Id="aufbauForm">
                                            <input type="text" name="transVariable" value="Test">
                                            <button type="button" class="langVar" name="delete">Löschen</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div class="footer">
            <div class="pull-right">
                10GB of <strong>250GB</strong> Free.
            </div>
            <div>
                <strong>Copyright</strong> Example Company © 2014-2015
            </div>
        </div>
        </div>
        </div>
    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="js/inspinia.js"></script>
    <script src="js/plugins/pace/pace.min.js"></script>
    <!-- Sweet alert -->
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
$('.langVar').click(function () {
            swal({
                        title: "Sind Sie sicher?",
                        text: "Der Datensatz kann nachdem löschen nicht wiederhergestellt werden. Es werden auch alle Übersetzungen zu diesem Aufbau gelöscht!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Ja, ich will löschen!",
                        cancelButtonText: "Nein, abrechen",
                        closeOnConfirm: false,
                        closeOnCancel: false },
                    function (isConfirm) {
                        if (isConfirm) {
                            document.getElementById("aufbauForm").submit();
                        } else {
                            swal("Abgebrochen", "Die Datei ist gesichert :-)", "error");
                        }
                    });
        });
</script>
</body>
</html>

LG Petja