Question

I am trying to add in bootbox.js to a test page.

Currently, when I include the href tag in the hyperlink that triggers the bootbox, the href is triggered regardless of what confirm button I click (Cancel or OK).

How do I include the href tag into the bootbox js code to be triggered only when the user selects the OK confirm option? I have tried several attempts, but to no avail.

Here is the hyperlink with the href tag:

<a id="id_customized_details_duplicate" href="{% url customized_details_duplicate customized_detail.id %}">Duplicate</a>

Here is my bookbox js code:

    $(document).ready(function(){
        $('#id_customized_details_duplicate').on('click', function(){
            bootbox.confirm("Are you sure?", function(result) {
                if (result) {
                    //include the href duplication link here?;
                    //showProgressAnimation();
                    alert('OK SELECTED');
                } else {
                    alert('CANCEL SELECTED');
                }
            });
        });
    });
Was it helpful?

Solution

Try this way, prevent the default action of the anchor tag & add window redirection call with respective href location within the bootbox confirmation handler(when 'OK' option clicked).

 $(document).ready(function(){
    $('#id_customized_details_duplicate').on('click', function(event){
                   event.preventDefault();
        bootbox.confirm("Are you sure?", function(result) {
            if (result) {
                 //include the href duplication link here?;
                 window.location = $(this).attr("href");

                //showProgressAnimation();
                alert('OK SELECTED');
            } else {
                alert('CANCEL SELECTED');
            }
        });
    });
});

LIVE DEMO: http://jsfiddle.net/dreamweiver/9he30z4y/255/

Happy Coding :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top