なぜ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関数はページ準備関数の前に呼び出されます。マークアップを変更して、ajax successコールバック内でhide（）関数を呼び出します。

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

ただし、他の回答のアドバイスに従うと、この手順は不要です。ロード中のgifは、ajax呼び出しに返された内容に置き換えられます。

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

次に、あなたが望むものを達成するために、簡単なjqueryのload()コールを使用することができます：あなたはこのようないくつかのHTMLを持っていると仮定すると

Answer 2

。

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