Bootbox Confirm Dialog problems

Question

Unfortunately, the doc Bootbox ( http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap ) not teach how to call the confirm dialog. As it is in the doc window always appears when the page is loaded, what is wrong, should appear when called by clicking on a delete button. This is the code that tried unsuccessfully.

// 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>

How do I set this bootbox to appear only when the delete button is clicked? Thanks!

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

Now, the deletion works when i click in "yes". I asked the developers of the plugin to put the full sample in the doc, so users do not need to create posts about how to remove the object when "yes" is clicked. Regards.

Answer 1

You may want to check the source on the "Confirm" link under "Basic Usage" on this page: http://bootboxjs.com/

Here's a snippet:

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

Assuming jQuery is available in the UI you're working on, I'd avoid using an onClick attribute in your anchor tags. Just my two cents.

Answer 2

I needed that too, but I changed a little few things... Take a look...

Add this function into your global "jQuery Ready" function like that:

$(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)
        }
    });
});

And just add some "data-* attributes" to your button or link like that:

<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>

So... This way you can have a personalized question.. This is much more intuitive for your users...

Did you liked?!

See demo: jsfiddle

Answer 3

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