首页 > 解决方案 > 当 ajax 请求完成或失败时,Ajax 微调器不隐藏

问题描述

我有一个引导模式,当用户单击提交按钮时显示

<div class="modal fade" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" th:fragment="signupSuccessMessageModalFragment">   
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="width: 48px">
            <span class="fa fa-spinner fa-spin fa-3x"></span>
        </div>
    </div>
  </div>
</div>

这是用户单击按钮时的javascript代码

$('#registerUser').click(function(event) {
event.preventDefault();
var pleaseWait = $('#pleaseWaitDialog');
var developerData = {};
developerData["userName"] = $("#userName").val().trim();
developerData["email"] = $("#email").val().trim();
pleaseWait.modal('show');
$.ajax({
    type : 'POST',
    contentType : "application/json",
    url : '/signup',
    data : JSON.stringify(developerData),
    dataType : 'json'
}).done(function(result) {
    window.location.replace("/signup_success?email="+email); 
    window.setTimeout(function(){
        // Move to a new location or you can do something else
        window.location.href = "https://www.google.co.in";
    }, 5000);
}).fail(function(result) {
    pleaseWait.modal('hide');
    var errors = $.parseJSON(result.responseJSON.message);
    $.each(errors, function(key, value) {
            var divid = "#" + value.field + "Error";
            $("#"+value.field+"Error").show().append(value.defaultMessage+"<br/>");
    });
}).always(function() {
    pleaseWait.modal('hide');
})
});

在启动请求引导模式(#pleaseWaitDialog)之前启动并显示 ajax 微调器。但是请求失败时模态不关闭[pleaseWait.modal('hide');//Not working]. 我在这里想念什么?谢谢

更新 - 这是我的包含完整代码的小提琴,它不起作用,因为我是 jsfiddle 的新手,我的代码正在发出服务器端验证请求(正在处理它)jsfiddle

我的要求 1. 用户单击创建帐户按钮 - > 微调器开始显示 2. 在失败的情况下微调器应该隐藏 3. 如果成功页面被重定向到注册成功页面,因此微调器会自动隐藏

标签: jqueryajaxbootstrap-modal

解决方案


推荐阅读