jqueryを使ってhtmlからdivをロードするには？

Question

3つのナビゲーションnavbarheader.html、navbar.htmlとsidebar.htmlを作成しました。navbarheader.htmlだけがロードされていますが、他はロードされていません。 navbarheader.htmlを削除するとnavbar.htmlが読み込まれます。

<script type="text/javascript"> 
    // let $ = requirejs('./jquery.min.js'); 
    //mainWindow.$ = $; 
    $(document).ready(function() { 


     var navbarheaderData = localStorage.getItem('navbarheaderStorage'); 
     if (navbarheaderData) { 
      $('#navbarheader1').html(navbarheaderData); 
     } else { 
      $.ajax({ 
       url: 'navbarheader.html', 
       dataType: 'text', 
       success: function (data) { 
        localStorage.setItem('navbarheaderStorage', data); 
        $('#navbarheader1').html(data); 

        var navbarData = localStorage.getItem('navbarStorage'); 
        if (navbarData) { 
         $('#navbar1').html(navbarData); 
        } else { 
         $.ajax({ 
          url: 'navbar.html', 
          dataType: 'text', 
          success: function (data) { 
           localStorage.setItem('navbarStorage', data); 
           $('#navbar1').html(data); 
           var sidebarData = localStorage.getItem('sidebarStorage'); 
           if (sidebarData) { 
            $('#sidebar1').html(sidebarData); 
           } else { 
            $.ajax({ 
             url: 'sidebar.html', 
             dataType: 'text', 
             success: function (data) { 
              localStorage.setItem('sidebarStorage', data); 
              $('#sidebar1').html(data); 
             } 
            }); 
           } 


          } 
         }); 
        } 


       } 
      }); 
     } 

    }); 
</script> 

Answer 1

が、他のデータ型（テキスト、したがって、JSONなど）で使用することができますので、あなたがnavbarheaderDataを取得する行は、 navbarData、およびsidebarDataは、リクエストを開始した直後に実行されているため、最初のデータのみが読み込まれる理由が説明されています（データのレンダリングを開始する前に、あなたが本当に欲しい

は、ローカルストレージを使用する必要がない場合は、次のように簡略化することができ

<script type="text/javascript"> 
$(document).ready(function() { 

    $.ajax({ 
     url: 'navbarheader.html', 
     dataType: 'text', 
     success: function (data) { 

      localStorage.setItem('navbarheaderStorage', data); 
      //console.log(localStorage.getItem('navbarheaderStorage')); 
      var navbarheaderData = localStorage.getItem('navbarheaderStorage'); 
      $('#navbarheader1').html(navbarheaderData); 

     } 
    }); 
    $.ajax({ 
     url: 'navbar.html', 
     dataType: 'text', 
     success: function (data) { 
      localStorage.setItem('navbarStorage', data); 
      //console.log(localStorage.getItem('navbarStorage')); 
      var navbarData = localStorage.getItem('navbarStorage'); 
      $('#navbar1').html(navbarData); 

     } 
    }); 
    $.ajax({ 
     url: 'sidebar.html', 
     dataType: 'text', 
     success: function (data) { 
      localStorage.setItem('sidebarStorage', data); 
      //console.log(localStorage.getItem('sidebarStorage')); 
      var sidebarData = localStorage.getItem('sidebarStorage'); 
      $('#sidebar1').html(sidebarData); 


     } 
    }); 

}); 
</script> 

です。

<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajax({ 
     url: 'navbarheader.html', 
     dataType: 'text', 
     success: function (data) { 
      $('#navbarheader1').html(data); 

     } 
    }); 
    $.ajax({ 
     url: 'navbar.html', 
     dataType: 'text', 
     success: function (data) { 
      $('#navbar1').html(data); 

     } 
    }); 
    $.ajax({ 
     url: 'sidebar.html', 
     dataType: 'text', 
     success: function (data) { 
      $('#sidebar1').html(data); 
     } 
    }); 
}); 
</script> 

@Penguenが上記のコードを応答して変更しました。

必要な場合を除いて、ajaxリクエストを送信したくないことがわかります。これは、奇妙なキャッシング機構として機能しています。この場合、これを書いた方法では、navbarHeaderDataしかキャッシュされず、残りの部分はキャッシュされていないため、ページが正しくレンダリングされません。次の方法は、私が言ったことから保護するだけでなく、書き換えられたメソッドが最初に読み込んでいて、キャッシュされていないかのように動作する場合より速くなり、ajaxリクエストは同じ時間ではなく、1つずつ。

<script type="text/javascript"> 
// let $ = requirejs('./jquery.min.js'); 
//mainWindow.$ = $; 
$(document).ready(function() { 
    var navbarheaderData = localStorage.getItem('navbarheaderStorage'); 
    if (navbarheaderData) { 
     $('#navbarheader1').html(navbarheaderData); 
    } else { 
     $.ajax({ 
      url: 'navbarheader.html', 
      dataType: 'text', 
      success: function (data) { 
       localStorage.setItem('navbarheaderStorage', data); 
       $('#navbarheader1').html(data); 
      } 
     }); 
    } 

    var navbarData = localStorage.getItem('navbarStorage'); 
    if (navbarData) { 
     $('#navbar1').html(navbarData); 
    } else { 
     $.ajax({ 
      url: 'navbar.html', 
      dataType: 'text', 
      success: function (data) { 
       localStorage.setItem('navbarStorage', data); 
       $('#navbar1').html(data); 
      } 
     }); 
    } 

    var sidebarData = localStorage.getItem('sidebarStorage'); 
    if (sidebarData) { 
     $('#sidebar1').html(sidebarData); 
    } else { 
     $.ajax({ 
      url: 'sidebar.html', 
      dataType: 'text', 
      success: function (data) { 
       localStorage.setItem('sidebarStorage', data); 
       $('#sidebar1').html(data); 
      } 
     }); 
    } 

}); 
</script> 

Answer 2

私が見たものから、私は、AJAX呼び出しを行うと、あなたはあなたのローカルストレージにテンプレートをキャッシュして、ウェブの3つのセクションをレンダリングするためにそれを使用していることにより、3つのテンプレートがフェッチされている参照ページ。

これはあなたが間違っていることです。コードのレンダリング部分は、すべてwindow.loadに書き込まれ、AJAX呼び出しが完了したかどうかは気にしません。呼び出しが非同期であるため、コードは応答テンプレートが取得されるまで待機しません。

代わりにできるのは、各Ajaxコール成功メソッドが呼び出すことができる共通のレンダリング機能です。

Answer 3

あなたは非同期の問題を抱えているため、各要求の中で作業を行う必要があります。私はローカルストレージに関連するとは思わない。

<script type="text/javascript"> 
$(document).ready(function() { 

    var navbarheaderData = localStorage.getItem('navbarheaderStorage'); 
    if (navbarheaderData) { 
      $('#navbar1').html(data); 
    } else { 
     $.ajax({ 
      url: 'navbarheader.html', 
      dataType: 'text', 
      success: function (data) { 
       $('#navbar1').html(data); 
     } 
     }); 
    } 
    .... and so on... 



}); 

あなたは非同期JavaScriptとXMLの略 ajax要求を、使用しているためだ