Boobtbox dialog closes when clicked and the page refreshes

Question

I recently change the code of a page that I had in a html page to an aspx one because I needed to implement a master page. The code and the function worked perfectly fine in the htmlpage but since I had changed it to the aspx page the bootbox dialog stop working properly, as soon as I click on it, it closes immediately and refreshes the page. These are the scripts that Im using.

    <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/popper.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootbox.js"></script>

Here are some of the functions of the page:

function disableTool(Herramientaid) {
            bootbox.confirm({
                message: "¿Estas seguro que deseas eliminar este herramienta?",
                buttons: {
                    confirm: {
                        label: 'Si',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: 'No',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if (result) {
                        sendRequest('DisableTool', { "Herramientaid": Herramientaid },
                            function (response) {
                                if (response[0] == 'OK') {
                                    gettool();
                                    bootbox.alert('La herramienta se ha eliminado');
                                }
                                else {
                                    bootbox.alert('Error! ' + response[0]);
                                }
                            });
                    }
                }
            });
        }

        function UpdateTool(ToolControl) {
            var Herramientaid = $(ToolControl).parent().parent().find('td').eq(0).html();
            var NombreH = $(ToolControl).parent().parent().find('td').eq(1).html();
            var Adminid = $(ToolControl).parent().parent().find('td').eq(2).html();
            var HDesc = $(ToolControl).parent().parent().find('td').eq(3).html();
            bootbox.dialog({
                title: "Actualizar herramientas",
                message: '<div class="row">  ' +
                    '<div class="col-md-12"> ' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-3 control-label" for="txNombreH">Nombre:</label> ' +
                    '<div class="col-md-9"> ' +
                    '<input type="text" id="txNombreH" class="form-control" placeholder="Nombre" value=""' + NombreH + '/>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-3 control-label" for="txAdminid">ID del Administrador:</label> ' +
                    '<div class="col-md-9"> ' +
                    '<input type="text" id="txAdminid" class="form-control" placeholder="Administrador ID" value=""' + Adminid + '/>' +
                    '</div>' +
                    '</div>' +
                    '<div class="form-group"> ' +
                    '<label class="col-md-3 control-label" for="txHDesc">Descripcion de la herramienta:</label> ' +
                    '<div class="col-md-9"> ' +
                    '<input type="text" id="txHDesc" class="form-control" placeholder="Descripcion" value=""' + HDesc + '/>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
                buttons: {
                    No: {
                        label: "No",
                        className: "btn-danger",
                        callback: function () {

                        }
                    },
                    Yes: {
                        label: "Si",
                        className: "btn-success",
                        callback: function () {
                            var newNombreH = $('#txNombreH').val();
                            var newAdminid = $('#txAdminid').val();
                            var newHDesc = $('#txHDesc').val();
                            sendRequest('UpdateTool', {
                                "Herramientaid": Herramientaid, "NombreH": newNombreH, "Adminid": newAdminid, "HDesc": newHDesc
                            },
                                function (response) {
                                    if (response[0] == 'OK') {
                                        gettool();
                                        bootbox.alert('Se ha configurado la herramienta');
                                    }
                                    else {
                                        UpdateTool(ToolControl);
                                        bootbox.alert('Error! ' + response[0]);
                                    }
                                }
                            )
                        }
                    }
                }
            });
        }

Answer 1

I had this same issue today, updating to latest and greatest bootbox didn't help. I eventually tracked down that the button click for "Close", "Ok", even "Esc" was triggering the submission of the form event.

I've had to add a propagation catcher after calling my dialog:

$(".dialog-class-name").on('hidden.bs.modal', function (e) {
   e.preventDefault();
   e.stopPropagation();
});

It feels hacky, but it doesn't involve editing the actual library, and it does work....