JQuery FADEOUT не работает Ajax после запроса

Question

У меня есть этот код JQuery:

$(function(){ 
    $('input#SearchGo').on('click', function(){ 
     var searchid = $('input#search').val(); 
     var dataString = 'search='+ searchid; 
     $.ajax({ 
      type: "POST", 
      url: "tickets.php", 
      data: dataString, 
      cache: false, 
      success: function(html) { 
       $("#result").html(html).show(); 
      } 
     }); 
     return false;  
    }); 
}); 

, что делает живой поиск и сообщения данных на PHP страницу.

На каждой странице у меня есть DIV с идентификатором наложения с погрузочными изображениями при загрузке страницы, то этот код:

$(window).load(function(){ 
    // PAGE IS FULLY LOADED 
    // FADE OUT YOUR OVERLAYING DIV 
    $('#overlay').fadeOut(); 
}); 

снимает наложенные DIV после загрузки страницы.

Когда я запускаю поисковый запрос, оверлейный div вообще не fadeOut, я попытался добавить $('#overlay').fadeOut(); в часть успеха моей функции, но это не fadeOut div.

UPDATE:

здесь является HTML для загрузки/наложения DIV

<div id="overlay" class="overlay"> 
    <img src="images/integra_loading.gif" alt="Loading" width="12%" style="margin-top:15%;" /> 
    <br /><br /> 
    <h1>Loading...</h1> 
</div> 

Answer 1

$(function(){//this says the dom is ready 
    $('#overlay').fadeOut(); 
}); 

альтернативно

$(document).on("ajaxComplete", function(){ 
    $('#overlay').fadeOut(); 
}); 

Answer 2

Не скрывайте свою ajaxloader с функцией, которая называется из html-скрипта, который загружается через запрос ajax. просто покажите загрузчик перед запросом и скройте его перед заменой содержимого html вашим ответом.

function loader(){ 
    this.id = '#overlay' 
}; 

loader.prototype.show = function(){ 
    $(this.id).fadeIn(); 
}; 

loader.prototype.hide = function(){ 
    $(this.id).fadeOut();  
}; 

loaderObj = new loader(); 

$('.list').live('click', function() { 
    loaderObj.show(); 
    $.ajax({ 
     type: "GET", 
     url: "http://echo.jsontest.com/uid/12345/value/nuno_bettencourt", 
     cache: false, 
     dataType: "json", 
     success: function(json) { 
      // setTimeout only to delay the response and let the loader do his thing ;) 
      setTimeout(function(){ 
       loaderObj.hide(); 
       $('#ajaxResult').html("UID=" + json.uid + "\nName=" + json.value);  
      }, 2000); 

     } 
    }); 

я сделал вам небольшой пример скрипку http://jsfiddle.net/358Fz/1/

Answer 3

после выполнения вашего $ .ajax, добавить сделано. в том, что сделано, сделать затухание!

$.ajax({ 
     ... 
    }).done(function(){ 
     $('#overlay').fadeOut(); 
    }); 

вы можете добавить .fail, когда он выходит из строя, и т.д. см: http://api.jquery.com/jquery.ajax/

Answer 4

Просто определить переменную загрузчика за пределами вашего события щелчка, а затем использовать его там, где это необходимо. Будет меньше накладных расходов, если вам нужно только пройти DOM один раз, чтобы найти элемент загрузчика. Вы также можете изменить событие on на событие click, чтобы сохранить несколько нажатий клавиш, если вам не нужно делегировать событие другому элементу. Кроме того, вам не нужно искать $ (вход # search), так как идентификаторы уникальны. Удаление селектора переменных и просто поиск идентификатора будут более эффективными.

$(function() { 
    var $loader = $('#overlay'); 
    $('.list').click(function(){ 
     $loader.fadeIn(); 
     $.ajax({ 
      type: "GET", 
      url: "http://time.jsontest.com/", 
      dataType: 'json', 
      cache: false, 
      success: function(json) { 
       $loader.fadeOut(); 
       $("#axajResponse").html('<b>Current Time:</b> ' + json.time).show(); 
      } 
     }); 
     return false;  
    }); 
}); 

В приведенном выше примере я возвращаю текущее время, чтобы вы могли видеть изменение ответа на каждое событие клика.

Вот пример: http://jsfiddle.net/bradlilley/jLG4g/