CODEWITHSUNDEEP
javascriptjquerybootbox
user3354539
user3354539

Reputation: 1245

Replace JavaScript confirm alert with bootbox.js confirm

I am not quite understanding how to implement bootbox.js to replace my standard javascript confirm alert popups and need some assistance. I have read some threads and the docs, but just cannot quite get it right.

I currently have this button/link that holds the record number in my template:

<a href="{% url overseas_experience_details_duplicate overseas_experience_detail.id %}" onclick="if(confirmDuplicate())showProgressAnimation();else return false;">{% trans "Duplicate" %}</a>

this calls the current js function that I want to replace with bootbox.js:

function confirmDuplicate() {
    return confirm("Are you sure?");
}

If the OK option is checked, the record is duplicated (with the show progress animation displaying while the record is duplicated). If the CANCEL option is selected, then nothing happens.

I have used the following code to implement the bootbox alert, but I am not sure how to return the bootbox OK confirmation which will then duplicate the record.

bootbox.js

function confirmDuplicate() {
    bootbox.confirm("Are you sure?", function(result) {
    if (result == true) {

        // not too sure what to insert here to return the bootbox confirm();

    }
});

Some valid suggestions would be appreciated

UPDATE TO QUESTION

I now have the bootbox confirm pop up displaying, but I cannot return the "true" or "false" confirmation result. Here is my newer code:

function confirmDuplicate() {
    bootbox.confirm({
        callback: function(result) {
            if (result) {
                return result;
            }
        }
    }
}

I am frustrated that I cannot return the result to duplicate the record.

Any help would be great.

Upvotes: 1

Views: 6707

Answers (3)

Muhammad Bilal
Muhammad Bilal

Reputation: 1152

function isConfirm(message, elem) {

    bootbox.confirm(message, function (result) {
        if (result)
            window.location.href = elem;
    });

    return false;
}
<a href='@Url.Action("DeleteAction", "Admin", new { id = Model.ActionObj.id })' onclick="javascript: return isConfrm('Are you sure you want to delete this action?', this)">  Delete </a>

use this for function:

function isConfirm(message, elem) {
    bootbox.confirm(message, function (result) {
        if (result)
            window.location.href = elem;
    });

    return false;
}

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

Continuing from my comment to your question, here's a non-obstrusive jquery version:

$('.your-link-class').on('click', function(e) {
   e.preventDefault(); //this would be equivalent to the return false in your code
   var self = this;
   bootbox.confirm("Are you sure?", function(result) {
       if (result) {
           // Here you have access to the jquery object of your link with $(self)
           // and you can do stuff like, for example:
           var clone = $(self).clone();
           clone.insertAfter($(self));
       }
    });
});

And a demo (not: in the demo I'm using traditional prompts instead because I don't have loaded the bootbox source):

Upvotes: 0

gog
gog

Reputation: 11347

Try something like this:

<a href="whatever" onclick="return myConfirm(this.href)">....

myConfirm = function(url) {
    bootbox.confirm("sure?", function(okay) {
        if(okay)
             location.href = url;
    });
    return false;
}

You cannot obtain bootbox.confirm results immediately, therefore return false from the handler to prevent the link from being followed and carry out the required action in the callback function.

Upvotes: 3

Related Questions