Почему JQuery .hide() не скрывает элемент div?

Question

So. У меня ниже JQuery/Ajax и .hide() метод, похоже, не скрывает элемент loadingdiv.

<script type="text/javascript"> 
     $(document).ready(function ($) { 
      //show a progress modal of your choosing 
      $('#loadingdiv').show(); 

     $.ajax({ 
      url: "@Url.Action("ToDo","Test")", 
      dataType: 'html', 
      success: function(data) { 
       $('#bookListDiv').html(data); 
      }}); 
     }); 
     $('#loadingdiv').hide(); 
</script> 

Answer 1

Я думаю, что функция hide() не работает, потому что она не вызывается, когда вы думаете, что она есть. То, как вы написали тег скрипта, функция hide() вызывается перед функцией готовности страницы. Измените свою разметку, чтобы вызвать функцию hide() внутри обратного вызова успеха ajax.

$.ajax({ 
     url: "@Url.Action("ToDo","Test")", 
     dataType: 'html', 
     success: function(data) { 
      $('#bookListDiv').html(data); 
      $('#loadingdiv').hide(); 
     }}); 

Однако, если вы следуете рекомендациям в другом ответе, этот шаг не является необходимым. Загрузка gif будет заменена содержимым, возвращаемым вызовом ajax.

Answer 2

Предполагая, что у вас есть некоторые HTML, как это:

<div id="StaticContent"> 
    ... 
</div> 
<div id="DynamicContent"> 
    <img src="~/Content/Images/ajax-loader.gif" alt="loading..." /> 
</div> 

Затем вы можете использовать простой JQuery load() вызов добиться того, что вы хотите.

$(function() { 
    $('#DynamicContent').load("/path/to/api"); 
});