CODEWITHSUNDEEP
javascriptjquery
William Griffiths
William Griffiths

Reputation: 27

jQuery Load function not loading the file

I am trying to use Jquery to load html code into another html file, using Jquery's the .load() method.

I have tried using an absolute path to access the file but I am still getting the same error. I have also tried navigating to absolute path and the file and it will open with no problem in a browser so it dose not appear to be an accesses issue. I have also mapped to the latest version of jQuery instead of my local version.

The error response is unidentified which is making this problem harder to solve:

Updated Code: made changes to code from user recomendations.

Main HTML Page

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery("#test").load("/menu.html", function(response, status) {

        if(status === 'error') {
            alert("Failed to load menu.html");
        }
        else {
            alert("Success!");
        }    
    });
});
</script> 
</head>

</head>

<body>
    <div id="test"></div> 
</body>

Loading HTML Page



                <ul>
                   <li><a href="index.html">Home</a></li>
                    <li>
                        <a href="article.html">Article</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li><a href="article.html">Scrollspy</a></li>
                                <li><a href="article-narrow.html">Narrow</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="faq.html">Faq</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="components.html">Components</a></li>
                </ul>

If any one has any input or has run into a similar error please let me know.

Upvotes: 0

Views: 3394

Answers (2)

mdfst13
mdfst13

Reputation: 890

In my case, it turned out that the load was failing because there were no results returned from the selector. In terms of this example, $('#test') was returning an empty result set, so the load wasn't being called. So double check that you don't have a typo, either in the selector or the <div id="test"> that makes them not match.

Obviously, this wouldn't explain the OP's problem here, given the MCVE. But others finding this question under similar circumstances may want to go through that extra debugging step.

Symptoms:

  1. The load wasn't called at all in the Networking tab of Developer Tools.
  2. When doing console.log('%o', this) in the jQuery, the length property of the prototype was 0. That meant that my version of $('#test') was returning 0 results. Once I realized that, debugging was simple. The hard part was getting to that question (why), thus this post.

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30360

Looks like there are a few areas that could be causing problems - consider the following adjustments to your code:

Loading HTML Page

<!-- <div id="menu"> Remove div with menu id -->

    <ul>    <!-- Add opening ul tag -->
        <li><a href="index.html">Home</a></li>
        <li>
            <a href="article.html">Article</a>
            <div class="uk-navbar-dropdown">
                <ul class="uk-nav uk-navbar-dropdown-nav">
                    <li><a href="article.html">Scrollspy</a></li>
                    <li><a href="article-narrow.html">Narrow</a></li>
                </ul>
            </div>
        </li>
        <li><a href="faq.html">Faq</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="components.html">Components</a></li>
    </ul>


<!-- </div> Remove extra div -->

Main HTML Page

In the script on your main HTML page, consider extending the load() callback to display an error if the request fails:

jQuery(document).ready(function(){
    jQuery("#menu").load("menu.html", function(response, status) {
        /* Optional, but consider revising this function to alert on error */
        if(status === 'error') {
            alert("Failed to load menu.html");
        }
        else {
            alert("Success!");
        }    
    });
});

In the case that an error does occur during the load() callback, you should check to ensure that menu.html is accessible at the specified (relative) location.

In most cases, this can be done directly in the browser by navigating to the URL of that HTML file and verifying that the HTML response is as expected.

If your menu.html file is located at the root of your server (ie yourserver.com/menu.html) then consider revising your script to fetch the menu.htm via an absolute path by adding the forward slash prefix /menu.html:

jQuery("#menu").load("/menu.html", function(response, status) {
    ....
});

Update

Alternatively, you might want to consider this approach based on the ajax() method:

jQuery(function() {
    jQuery.ajax({
        url: '/menu.html',
        dataType: 'html',
        success: function(data) {
            $('#menu').html(data);
        },
        error: function(xhr, error){
            alert('error. see console for details');
            console.error(error);
        }
    });
});

Update

Also, ensure that the content for your website/app is served from a server rather than from your file system. There are a number of ways to set up a server to achieve that - if you're using a chrome-based browser then an easy way to setup a local server on your development machine would be with this chrome extension:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Once installed, you can configure the extension to serve content from a directory on your development machine via a locally hosted server. At that point you'd access your website via http://localhost:[SOME_PORT]/ rather that via file:///C:/data/. Accessing your website via localhost should resolve the problem for you.

Upvotes: 2

Related Questions