jquery dialogue: confirmer le clic sur un bouton soumettre

Je suis en train de faire une boîte de dialogue de confirmation à l'aide de jquery, mais la forme n'obtient pas soumis à tous, c'est ce que j'ai:

    <script type="text/javascript">
    var currentForm;
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,
            buttons: {
                'Delete all items': function() {
                    currentForm.submit();
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });

    function ask() {
        currentForm = $(this).closest('form');
        $("#dialog-confirm").dialog('open');
    }
</script>
<form ... >
    <input type="submit" value="delete" onclick="ask();return false;" />
</form>

OriginalL'auteur Omu | 2010-05-21

  1. 18

    Vous avez besoin d'avoir votre boîte de dialogue bouton soumettre le <form>, comme ceci:

                   'Delete all items': function() {
                  $(this).dialog('close');
                  $("#myForm").submit();
                }

    Le reste de votre code est correct, mais il est actuellement seulement la fermeture de la boîte de dialogue et revenir, vous devez soumettre le formulaire. Aussi, il est préférable de le faire en tant que gestionnaire de clic, au lieu de onclick, comme ceci (mis à jour pour les commentaires):

        var currentForm;
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,
            buttons: {
                'Delete all items': function() {
                    $(this).dialog('close');
                    currentForm.submit();
                },
                'Cancel': function() {
                    $(this).dialog('close');
                }
            }
        });
        $(".delete").click(function() {
          currentForm = $(this).closest('form');
          $("#dialog-confirm").dialog('open');
          return false;
        });
    });

    Ensuite, il suffit de donner votre <input> une classe de delete, comme ceci:

    <input class="delete" type="submit" value="delete" />
    le problème est que j'ai beaucoup de formes, chacune avec un bouton supprimer à l'intérieur de ça, c'est juste un caché d'entrée <input type="hidden" name='id' value='the id to be delted' /> qui fait la différence entre ces formes
    Vous pouvez stocker un "currentForm = $(this).closest('form') dans la fonction de clic quand elle s'ouvre, puis il suffit d'appeler currentForm.submit() dans le bouton supprimer du gestionnaire, aucun Id nécessaire...et il suffit de changer le supprimer cliquez sur gestionnaire à utiliser une classe ou un attribut du sélecteur.
    Je voulais dire avec la réponse de l'approche 🙂 Ce que vous avez de ne pas travailler ensemble. La réponse est mis à jour, nous l'espérons montrer exactement ce que je veux dire.
    Omu - assurez-vous que vous avez return false dans le gestionnaire de clic comme la réponse ne!
    Doh, de ma faute, n'avait même pas voir le modifier, merci pour améliorer pour les futures googlers 🙂

    OriginalL'auteur Nick Craver

  2. 5

    Si vous utilisez jQuery, puis faire correctement et d'éviter le Javascript en ligne:

    $(function (){
  $("form").submit(function (){
    //return false if you don't want this to be submitted
    //maybe do a
    //return ask();
    //but with the code provided it doesn't seem
    //to work like that - ask() is not returning anything at all!
  });
});

    OriginalL'auteur Seb

  3. 0

    Cela a fonctionné pour moi:

     $(function () {
    $("#accordion").accordion({
        heightStyle: "content"
    });

    function confirmDialog(title, message, success) {
        var confirmdialog = $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '</h6></div>')
            .dialog({
                modal: true,
                title: title,
                zIndex: 10000,
                autoOpen: false,
                width: 'auto',
                resizable: false,
                buttons: {
                    Yes: function () {
                        success();
                        $(this).dialog("close");
                    },
                    No: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    $(this).remove();
                }
            });

        return confirmdialog.dialog("open");
    }

    $('form').on('submit', function (e) {
        e.preventDefault();
        var form = this;

        confirmDialog('Confirm', 'Are you sure?', function () {
            form.submit();
        });
    });
});

    Référence: http://jsfiddle.net/pmw57/67Ge2/

    OriginalL'auteur JoshYates1980