bootbox.confirm opens and closes immediately when in ajax loaded div

Question

I am using bootbox which I downloaded from http://bootboxjs.com/ . user_update.php is loaded in a div in users.php with ajax. In user_update.php I have a JavaScript function validateForm() , and below in the same document I have the form which calls this function like so:

<form name= "updateForm" onsubmit="return validateForm()" role="form-horizontal" method="post" action="index.php">

The function bootbox.alert works just fine.

When I use bootbox.confirm I see the dialog opening and closing within a few tenths of a second.

if (roleid != prevroleid) {
    bootbox.confirm("Are you sure?", function (result) {
        if (result) {
            console.log("User confirmed dialog");
        } else {
            console.log("User declined dialog");
        }
    });
}

When I test the same function in a div that is not loaded in a div with ajax, then bootbox.confirm works as expected.

EDITED
this is the ajax call:

$(document).on("click", ".gebruiker", function (e) {
    e.preventDefault();
    //var url = "user_update.php";
    //$("#details").load(url)
    var idnr = $(this).attr('idnr');

    $.ajax({
        type: "get",
        url: "view/user_update.php",
        data: {
            variable1: idnr
        },
        success: function (data) {
            //do stuff after the AJAX calls successfully completes
            $('#details').html(data);

        }
    });
});

this is the div it gets loaded in:

<div id="details" class="col-md-6">         
</div>

added at 16:43
ValidateFormcode as requested:

<script>
    function validateForm()
    {
        var fullname = $('#fullname').val();
        var username = $('#username').val();
        var role = document.getElementById("role");
        var roleid = role.options[role.selectedIndex].value;

        var password1 = $('#password1').val();
        var password2 = $('#password2').val();
        var prevroleid = $('#prevroleid').val();
      
      
        if (roleid != prevroleid) {
bootbox.confirm("Are you sure?", function (result) {
    if (result) {
        console.log("User confirmed dialog");
    } else {
        console.log("User declined dialog");
    }
});
}    

        
        if (!fullname)
        {
        bootbox.alert("Het veld 'Naam' mag niet leeg zijn")
        return false;
      }
      if (!username)
        {
        bootbox.alert("Het veld 'Gebruikersnaam' mag niet leeg zijn")
        return false;
      }
      
      if(password1 != password2)
      {
        bootbox.alert("De waardes in de wachtwoord velden komen niet overeen")
        return false;
      }
      
     
    }       
</script>

Answer 1

You should prevent the default behaviour of the form when it's not validated.

So validateForm should be like this:

function validateForm(e)
{
 var valid = false; // do some validation
 if(!valid){
  e.preventDefault();
 }
}

Elsewise the form gets submitted and the page refreshes, thus closing the confirm dialog.

Answer 2

Instead of using onsubmit="return validateForm()" attribute in the form tag. Put it on the submit button of the form as onclick="return validateForm();return false;"

<input type="submit" onclick="return validateForm();return false;" />

Return true/false from the validateForm() funtion. If true returned then form will be submitted else if false returned form will not be submitted.

Try it. It should work.