如何使用jQuery从HTML加载div？

Question

I made 3 navigation navbarheader.html, navbar.html and sidebar.html.Only navbarheader.html is loading but others is not loading. if I remove navbarheader.html navbar.html is loading.

    <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

From what I see, I see 3 templates being fetched by making AJAX calls and then you are caching the template in your local storage and then use that to render the 3 sections of your web page.

Here is what you are doing it wrong. The render part of the code is written all together in the window.load and does not care about whether the AJAX call is complete or not. As your calls are asynchronous the code will not wait until the response template is fetched.

What you can do instead is have a common render function which each ajax call success method can call.

Answer 2

You are suffering from asynchronous issues, you should do the work inside each request. I dont think its related to local storage.

 <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...



});

Answer 3

That's because you are using ajax requests, which stands for Asynchronous JavaScript and XML, but can be used with other datatypes (like text and therefore json), so the lines where you retrieve navbarheaderData , navbarData , and sidebarData are being executed immediately after you launch the requests, which would explain why only the first one would load (because there's only time for the first one to get a response before you start rendering the data).

What you really want is

<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>

which could be simplified into the following if you don't need to use local storage.

<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 replied and changed their above code.

I see that you don't want to send an ajax request unless you need to, which is functioning as some sort of weird caching mechanism. In this case the way you have written this, we only had navbarHeaderData cached and not the rest, then the page would fail to render properly. The following way not only protects against what I said, but is also faster than if the rewritten method works as if you were loading this for the first time and didn't have this cached, then the ajax requests would be sent out almost at the same time, rather than one by one.

<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>