web-dev-qa-db-fra.com

Bootbox Confirm Dialog problèmes

Malheureusement, la doc Bootbox ( http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-Twitter-bootstrap ) n'enseigne pas comment appeler la boîte de dialogue de confirmation. Comme il est dans la fenêtre du document apparaît toujours lorsque la page est chargée, ce qui ne va pas devrait apparaître lorsqu'il est appelé en cliquant sur un bouton de suppression. C'est le code qui a essayé sans succès.

// show "false" does not work, the confirm window is showing when page is loaded.
$(function () {
bootbox.confirm("Confirm delete?", "No", "Yes", function(result) {
show: false
});     
});

// need show the confirm window when the user click in a button, how to call the confirm window?

<td><a class="icon-trash" onclick="bootbox.confirm();" href="{% url 'del_setor' setor.id %}" title="Delete"></a></td>

Comment configurer cette boîte de démarrage pour qu'elle n'apparaisse que lorsque le bouton de suppression est cliqué? Merci!

EDIT-SOLUTION:

$(function () {
$("a#confirm").click(function(e) {
    e.preventDefault();
    var location = $(this).attr('href');
    bootbox.confirm("Confirm exclusion?", "No", "Yes", function(confirmed) {
        if(confirmed) {
        window.location.replace(location);
        }
    });
});     
});

Maintenant, la suppression fonctionne lorsque je clique sur "oui". J'ai demandé aux développeurs du plug-in de placer l'échantillon complet dans la documentation, afin que les utilisateurs n'aient pas besoin de créer de messages sur la manière de supprimer l'objet " oui "est cliqué. Cordialement.

jquerytwitter-bootstrapbootbox
13
LinuxMan

Vous pouvez vérifier la source sur le lien "Confirmer" sous "Utilisation de base" sur cette page: http://bootboxjs.com/

Voici un extrait:

$("a.confirm").click(function(e) {
    e.preventDefault();
    bootbox.confirm("Are you sure?", function(confirmed) {
        console.log("Confirmed: "+confirmed);
    });
});

En supposant que jQuery soit disponible dans l'interface utilisateur sur laquelle vous travaillez, j'éviterais d'utiliser un attribut onClick dans vos balises d'ancrage. Juste mes deux cents.

6
jstam

J'avais besoin de ça aussi, mais j'ai changé quelques petites choses ... Jetez un coup d'oeil ...

Ajoutez cette fonction à votre fonction globale "jQuery Ready" comme ceci:

$(document).on("click", "[data-toggle=\"confirm\"]", function (e) {
    e.preventDefault();
    var lHref = $(this).attr('href');
    var lText = this.attributes.getNamedItem("data-title") ? this.attributes.getNamedItem("data-title").value : "Are you sure?"; // If data-title is not set use default text
    bootbox.confirm(lText, function (confirmed) {
        if (confirmed) {
            //window.location.replace(lHref); // similar behavior as an HTTP redirect (DOESN'T increment browser history)
            window.location.href = lHref; // similar behavior as clicking on a link (Increments browser history)
        }
    });
});

Et ajoutez simplement quelques "attributs de données" à votre bouton ou à ce lien:

<a class="btn btn-xs btn-default" data-toggle="confirm" data-title="Do you really want to delete the record 123?" href="/Controller/Delete/123"><span class="fa fa-remove"></span> </a>

Alors ... De cette façon, vous pouvez avoir une question personnalisée .. C'est beaucoup plus intuitif pour vos utilisateurs ...

As-tu aimé?!

Voir la démo: jsfiddle

3
Rodolpho Brock
$(document).on("click", ".confirm-modal", function(e) {
    e.preventDefault();
    bootbox.confirm("Are You sure?", function(result) {
        if(result) {
            top.location.href = e.target.href;
        }
    });
});
0
mdco