JQuery Ajax загрузка блесны только по первому запросу

Question

У меня есть следующий JQuery:

    $(document).ready(function() {

        $(document).ajaxStart(function(){
            $("#spinner").css("display", "block");
        });
        $(document).ajaxComplete(function(){
            $("#spinner").css("display", "none");
        });

        $("#go").click(function() {
            $("#messager").html('<img src="spinner.gif" id="spinner">');
            $.post("send.php", {
                first:  first,
                second:  second
            }, function(result) {
                $("#messager").html(result);                
            });
        });

    });

Это HTML:

<div id="messager"><img src="spinner.gif" id="spinner"></div>

Это ответ, который отлично работает с моей send.php:

echo "something";

Все правильно, если пользователь нажимает первый раз на #go. Сначала показывается счетчик, а затем - «что-то».

Но если пользователь нажимает второй раз на #go, спиннер не отображается.

Как я должен изменять код, который каждый раз показывает счетчик, если пользователь нажимает #go без перезагрузки сайта!

Answer 1

Вы должны включить spinner при вызове ajax-запроса и отключить его, как только получите ответ. Попробуйте это

$(document).ready(function(){
    $("#go").click(function(){
        $("#spinner").css("display", "block");
        $.post("send.php", {
            first:  first,
            second:  second
        }, function(result) {
             $("#spinner").css("display", "none");
            $("#messager").html(result);                
        });
    });

Answer 2

вы можете использовать что-то вроде этого:

<div id="messager"></div>
<script>


$(function() {

$("#go").click(function(){
    hideSpinner();
    $.ajax({
       url : "send.php", 
       data: { first:  first,second:  second},
       beforeSend: function() {
           showSpinner();
       },
       success: function(result){
            $("#messager").html(result);             
       },
       error: function(err) {
           console.log(err);
           hideSpinner();
       }
    });
});

});

function hideSpinner() {
if($(document).find('#spinner').length > 0) {
    $(document).find('#spinner').remove();
}
}
function showSpinner() {
    $('#messager').append('<img src="spinner.gif" id="spinner">');
}

</script>

Answer 3

$("#messager").html(result);

Вы заменяете все содержимое сообщения с вашими результатами. Спиннер - дитя мессенджера. Как таковой, он больше не существует.