JQuery AJAX загрузчик

Question

У меня есть такой скрипт:

    $("#addk").bind("click", function(event){
        //alert("here!");
        $("#loader-overlay").show();
        $.ajax({
            'async':"False",
            'type': "POST",
            'url': "http://url/feedback/",
            'data': $("#form").serialize(), 
            'success': function(msg){
                $("#errors").html(msg);
                },
            'error' : function(){
                $("#errors").html('<p>fail</p>');
            }
        });
        $("#loader-overlay").hide();
        //return false;
    });

По какой-то причине экран загрузчика не появляется, хотя Ajax работает в течение нескольких секунд. Если я напишу

$("#loader-overlay").show();

в консоль, тогда она работает просто отлично.

Это, наверное, что-то очень простое, что я просто не могу положить палец.

Alan

Answer 1

Вы, вероятно, должны иметь отображение и скрытие загрузки в качестве обратных вызовов в запросе ajax.Проверить: http://api.jquery.com/jQuery.ajax/#callback-functions

Итак, вы можете сделать:

$.ajax({..., beforeSend: function(){ /* show the loading thing */ },
    complete: function(){ /* hide the loader */ }});

Answer 2

Ваш код в основном правильный, вы пытаетесь сделать синхронный вызов, поэтому код после вызова ajax должен выполняться только после возврата вызова ajax. Но у вас есть одна маленькая ошибка там. Попробуйте это:

async: false

Использование "false" равно true, так как это строка ненулевой длины, поэтому у вас будет асинхронный вызов, а загрузчик будет скрыт сразу после вызова ajax & ndash; он не будет ждать завершения вызова.

Кроме того, вам не нужно заключать в кавычки ключи, поэтому этот стиль также будет работать:

$.ajax({
    async: false,
    type: "POST",
    url: "http://url/feedback/",
    ....

Но зачем вам вообще нужен синхронный вызов? Выполнение синхронного вызова приведет к зависанию всех других процессов на время вызова, поэтому это может отвлекать внимание. Если вы покажете элемент загрузчика перед вызовом ajax, а затем снова закроете его в обработчике success, он должен работать нормально:

$("#addk").click(function(event) {
    $("#loader-overlay").show();
    $.ajax({
        type: 'POST',
        url: 'http://url/feedback/',
        data: $("#form").serialize(),
        success: function(msg){
            $("#errors").html(msg);
            $("#loader-overlay").hide();
        },
        error: function() {
            $("#errors").html('<p>fail</p>');
        }
    });
    return false;
});