Javascript 显示或隐藏不使用异步错误ajax调用的div
我有一些函数可以进行一些ajax调用。Javascript 显示或隐藏不使用异步错误ajax调用的div,javascript,jquery,ajax,show,show-hide,Javascript,Jquery,Ajax,Show,Show Hide,我有一些函数可以进行一些ajax调用。为了以所需的方式执行所有请求,这些请求必须通过设置async:falseajax调用一切正常。我的问题是,我需要在发送请求之前显示一个div(一个简单的css加载器),并在请求之后隐藏,但它没有显示。这是我的功能: $("#btn1").on('click', function(){ // Apparently it does not executes this $('.container-loader'
为了以所需的方式执行所有请求,这些请求必须通过设置
async:false
ajax调用一切正常。我的问题是,我需要在发送请求之前显示一个div(一个简单的css加载器),并在请求之后隐藏,但它没有显示。
这是我的功能:
$("#btn1").on('click', function(){
// Apparently it does not executes this
$('.container-loader').show();
//execute the function and handle the callback
doSomeStuff(function(c){
if(!c.ok){
showModalWarning();
$('#text').append('<li>'+c.msg+'</li>');
}
else{
toastr.success('Everything is ok');
doOtherStuff($("#select").val());
}
});
var modal = document.getElementById('Modal1');
modal.style.display = "none";
return false;
});
你知道我该怎么处理吗?我对异步的东西很陌生。通过删除异步并更改服务器中的方法以接收数组作为参数,解决了这个问题
最终脚本:
$("#btn1").on('click', function(){
//$('.container-loader').show();
//execute the function and handle the callback
doSomeStuff(function(c){
if(!c.ok){
showModalWarning();
$('#text').append('<li>'+c.msg+'</li>');
}
else{
toastr.success('Everything is ok');
doOtherStuff($("#select").val());
}
});
});
$("#btn1").on('click', function(){
//$('.container-loader').show();
//execute the function and handle the callback
doSomeStuff(function(c){
if(!c.ok){
showModalWarning();
$('#text').append('<li>'+c.msg+'</li>');
}
else{
toastr.success('Everything is ok');
doOtherStuff($("#select").val());
}
});
});
function doSomeStuff(callback){
//...
var tp = 2;
var url = 'http://domain.com.br:8080/datasnap/rest/TSM/Fun/' + tp + '/' + $("#select").val() + '/' + encodeURIComponent(JSON.stringify(jsonArray));
$.ajax({
cache: "false",
//async: false, //it needs to by with async false
dataType: 'json',
type: 'get',
url: url,
success: function(data) {
if (!data)
callback({ok: false});
},
error: function(jqXHR, textStatus, errorThrown) {
toastr.error("some problem");
}, complete: function(){ //hide the loader after complete
$('.container-loader').hide();
var modal = document.getElementById('Modal1');
modal.style.display = "none";
}
});
}