Triggering method in callback function of Bootbox.js

Question

I have a small problem guys, i am working on a small spring project, in my controller i have a delete method, which i call from my jsp page

<a  onclick="return confirm('Are you sure ?');" href="${deleteUser}" >delete</a>

and this work flawlessly, how ever its using ugly default confirm dialog and i wanted to spice things up a bit. So i found bootbox.js, and played a bit with it.

And while i can get dialog to show i can not find a single explanation on how to call method in callback function of my bootbox.js.

I added all dependencies and this script

  <script>
    $(document).on("click", ".alert", function(e) {
        bootbox.confirm({
            message: "Are you sure you want to delete this Account?",
            buttons: {
                confirm: {
                    label: 'Yes',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'No',
                    className: 'btn-danger'
                }
            },
            callback: function (result) {
               if(result==true){
                 href="${deleteUser}
               }
            }
        });
    });
</script>

also i changed my link to :

<a  class="alert" >delete</a>

And thats it, dialog shows up, i choose option but nothing happens, i know im doing something wrong, but every option i tried appeared to take me away further from right answer, could anyone edit a second part of my code so i can grasp how this actually works.

Thank you all in advance

Answer 1

I found a solution to my problem,

goes as following :

 <script>
$(document).on("click", "#alert", function(e) {
     var addressValue = $(this).attr("href");
    e.preventDefault();

    bootbox.confirm({
        message: "Are you sure you want to delete this Account?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {

                if(result==true){

                      window.location = addressValue;


                }

        }

    });
});

important is to use var addressValue = $(this).attr("href"); to get a value of clicked href, use e.preventDefault(); to stop default action, and later in callback function call addressValue if the result== true.

I tested and it works good. Cheers

Answer 2

Since Bootbox can't block the execution thread, you have to prevent the link from executing it's request. There are two ways: add a preventDefault, or return false from the click event:

$(document).on("click", ".alert", function(e) {

    // do this...
    e.preventDefault();

    bootbox.confirm({
        message: "Are you sure you want to delete this Account?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
           if(result==true){
             href="${deleteUser}"
           }
        }
    });

    // ... OR this (you don't need both)
    return false;
});

Once you have that, you would use an AJAX call to perform the action the link normally would have:

$(document).on("click", ".alert", function(e) {

    // do this...
    e.preventDefault();

    bootbox.confirm({
        message: "Are you sure you want to delete this Account?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
            if(result) {
                var url = "${deleteUser}";

                $.post(url)
                    .done(function(response, status, jqxhr){
                        // post successful - do something?
                    })
                    .fail(function(jqxhr, status, error){
                        // post failed
                    });
            }
        }
    });

    // ... OR this (you don't need both)
    return false;
});

I'm assuming ${deleteUser} generates a URL that your backend can decompose to get the data it needs to delete the correct record; if not, you'd want to add a data object to the $.post function.