У меня есть следующий div,
<div id="mainoutput">
<img src="/img/preloader.gif" alt="loading" class="preloader" />
</div>
Начало моего AJAX/Jquery - это,
$(document).ready(function() {
$(".preloader").hide();
$("#button").click(function() {
$(".preloader").slideToggle( "slow" );
var host = $("#hostinput").val();
var record = $("#recordinput").val();
$.ajax({
url : "/cachecheck_ajax",
type : "POST",
dataType: "json",
data : {
hostinput : host,
recordinput : record,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function(json){
do some stuff...
$(".preloader").slideToggle( "slow" );
$('#mainoutput').html(table).hide().slideToggle( "slow" );
Все работает нормально. Я нажимаю кнопку "Отправить", показывает предварительный загрузчик, пока мой аяксский успех не удастся, прелоадер будет пронумерован, а мой главный div (#mainoutput) будет показан.
Однако, если я хочу снова отправить, я хочу, чтобы #mainoutput был переключен (скрыт), а затем preloader, чтобы показать снова. Каков наилучший способ сделать это?
Я попробовал следующее, но он просто закончил сломать ajax, и мой json был только что возвращен,
$(document).ready(function() {
$(".preloader").hide();
$("#button").click(function() {
// addition
if($('#mainoutput').is(':visible'));{
$("#mainoutput").slideToggle( "slow" ).html();
}
//
$(".preloader").slideToggle( "slow" );
var host = $("#hostinput").val();
var record = $("#recordinput").val();
$.ajax({
Я бы использовал методы jQuery.Ajax beforeSend и Complete callback. Надеюсь, код ниже поможет вам!
$(document).ready(function() {
var xhr = null;
$(".preloader").hide();
$("#button").click(function() {
var host = $("#hostinput").val();
var record = $("#recordinput").val();
if (xhr != null) {
xhr.abort(); //Abort Existing XHR Call
$(".preloader").hide(); //By Default hide the Element
}
//Get Referance in xhr variable
xhr = $.ajax({
url : "/cachecheck_ajax",
type : "POST",
dataType: "json",
data : {
hostinput : host,
recordinput : record,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
beforeSend: function (jqXHR, settings) {
$(".preloader").slideToggle( "slow" ); //Before sending to Server, Show the Element
},
success: function(json, textStatus, jqXHR) {
//TODO: Do some stuff...!!!
$('#mainoutput').html(table).hide().slideToggle( "slow" );
},
error: function (jqXHR, textStatus, errorThrown) {
//TODO: Handle Errors here...!!!
},
complete: function (jqXHR, textStatus) {
//jQuery will delegate call after XHR. So Hide the Element
$(".preloader").slideToggle( "slow" );
}
});
});
});