jQuery load() function doesn't work

Question

I am new to the world of JavaScript and I'm trying to use the function load() to insert another html file. It' a little bit hard to explain, here is the code:

<script> 
$(document).ready(function() {  
        $('#main').click(
            function(){             
                $('#news').load('today.html');          
            }   
        ); //end click       
}); //end ready 
</script>

Can you help me? I'm not using a web server. Thanks

.load() is a jQuery function. Are you adding a reference to jQuery in your html? — Emre, Sep 06 '14 at 15:43
Hi, FYI - that's not a javascript function, it's a `jQuery` function... — T J, Sep 06 '14 at 15:44
No I don't! I open it using Safari and it displays the text, but when I click on #main it doesn't work — Simo9192, Sep 06 '14 at 15:44
You have to add a reference to jQuery to use jQuery functions. — Emre, Sep 06 '14 at 15:45
If you have the reference already, tell us what you see in the console. — Emre, Sep 06 '14 at 15:46
@Simo9192 text being displayed doesn't mean there are no errors in page. did you check for errors in browser console? — T J, Sep 06 '14 at 15:46
The error I get is "XMLHttpRequest cannot load file... Received an invalid response. Origin 'null' is therefore not allowed access" — Simo9192, Sep 06 '14 at 15:57

score 5 · Answer 1 · answered Sep 06 '14 at 15:55

5

Why it Doesn't Work

Browser security restrictions can block you from using AJAX functions with content that is accessed through the file:// protocol (i.e. from a local file on your computer, without a web server).

Solution

I run a web server on my pc so that I can avoid all of these problems - back when I was working on a Windows PC, I used WAMP. These days, I use Linux (with Apache, PHP and MySQL) on my computer so I can work in an environment that is closer to the server.

answered Sep 06 '14 at 15:55

JGDarvell

214
1
5

It is actually possible to load file on the `file://` protocol on some browsers by using flags to remove the restrictions on launch. Quite a pain though, running a web server is quite easy, even more so going the node way. – GillesC Sep 06 '14 at 15:57

score 4 · Accepted Answer · answered Sep 06 '14 at 16:01

I do not believe the code you have presented has any faults in any way. I believe it is to do with your loading of the JQuery library, as with the following code I achieved these results:

index.html

<html>
    <head>
        <script src="jquery.js"></script>
        <script> 
            $(document).ready(function() {  
                $('#main').click(
                    function(){             
                        $('#news').load('news.html');          
                    }   
                ); //end click       
            }); //end ready 
        </script>
    </head>
    <body>
        <p id="main">HELLO</p>
        <p id="news">NEWS</p>
    </body>
</html>

news.html

<html>
    <head></head>
    <body><h1>HELLO STACK OVERFLOW!!!</h1></body>
</html>

Before click:

enter image description here

After click:

enter image description here

However, when I was building this example I first tried using the Google APIs version of JQuery and found that I could not currently connect to the API. Therefore I believe the solution to your problem is to go to this website: http://code.jquery.com/jquery-1.11.1.js and copy and paste everything into a text file called 'jquery.js'. Then add the following to the head tag of your main HTML file:

<script src="jquery.js"></script>

Make sure that 'jquery.js' is in the same directory as the main HTML file of your project otherwise this will not work. Hope this helps :)

score 0 · Answer 3 · answered Feb 18 '20 at 06:18

You can find error message in load(url,fnResponse) response is success or fail

also check this jquery-load-method

$(document).ready(function() {  
        $('#main').click(
            function(){             
                $('#news').load('today.html', function( response, status, xhr ) {
                    if ( status == "error" ) {
                        alert( "Sorry but there was an error: " + xhr.status + " " + xhr.statusText );
                    }
                });          
            }   
        ); //end click       
}); //end ready

jQuery load() function doesn't work

3 Answers3

Why it Doesn't Work

Solution

Linked