показать загрузчик при отправке формы

Question

У меня есть следующий код, который отвечает за отправку формы внутри функции load().

$(document).ready(function(){ 
$("#productfilter").validate({ 
submitHandler: function(form) { 
$.post ('listproresult_core.php', $("#productfilter").serialize(), function(data) { 
$('#contentincore').html(data); 
$('#contentincore a').click(function(e) { 
$("#contentincore").on("click", "a:not(.minlink)" && "a:not(.prolink)", function (e) { 
$("#contentincore").load($(this).attr("href")); 
e.preventDefault(); 
}); 
}); 
}); 
} 
}); 
}); 

... однако, что я хочу, это форма ответа (во время загрузки), чтобы показать мне следующий загрузчик .gif.

$("#contentincore").html("<img src='loader.gif'class='clock' border='0' />"); 

Answer 1

Использование Ajax, чтобы отправлять свою форму, а затем вы можете выполнить 'beforeSend'

$.ajax({ 
    type: "POST", 
    url: "listproresult_core.php", 
    data: $("#productfilter").serialize(), 

    beforeSend: function() {         
     $("#contentincore").html("<img src='loader.gif'class='clock' border='0' />");          
    }, 

    success: function(result) {      
     $("#contentincore").html("");   
    }      
}); 

Answer 2

1. создать DIV, который содержит IMG GIF загрузки.

   посмотреть изображение HTML код

2. в готовой функции от JS поместить следующий код:

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $('#loadingDiv').show(); 
    }) 
    .ajaxStop(function() { 
     $('#loadingDiv').hide(); 
    }) 
    .ajaxError(function() { 
     alert('Ajax Error'); 
    });