bootbox.confirm 在 ajax 加載 div 時立即打開和關閉

Question

我正在使用從http://bootboxjs.com/下載的引導箱。 user_update.php 使用ajax 加載到users.php 中的div 中。 在 user_update.php 我有一個 JavaScript 函數validateForm() ，在同一個文檔下面我有一個調用這個函數的表單，如下所示：

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

功能 bootbox.alert 工作得很好。

當我使用bootbox.confirm我看到對話框在十分之幾秒內打開和關閉。

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

當我在未使用 ajax 加載到 div 中的 div 中測試相同的功能時， bootbox.confirm按預期工作。

已編輯
這是 ajax 調用：

$(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);

        }
    });
});

這是它加載的 div：

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

於 16:43 添加
根據要求驗證表單代碼：

<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

當表單未經驗證時，您應該阻止表單的默認行為。

所以validateForm應該是這樣的：

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

否則，表單將被提交並刷新頁面，從而關閉確認對話框。

Answer 2

而不是在表單標簽中使用 onsubmit="return validateForm()" 屬性。 把它放在表單的提交按鈕上作為 onclick="return validateForm();return false;"

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

從 validateForm() 函數返回真/假。 如果返回 true 則提交表單，否則不提交 false 返回的表單。

嘗試一下。 它應該工作。