CODEWITHSUNDEEP
javascriptjquery
Simo9192
Simo9192

Reputation: 25

jQuery load() function doesn't work

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

Upvotes: 0

Views: 13768

Answers (3)

Ravi Makwana
Ravi Makwana

Reputation: 2914

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

Upvotes: 0

doctor_n_
doctor_n_

Reputation: 279

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

Upvotes: 4

JGDarvell
JGDarvell

Reputation: 214

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.

Upvotes: 5

Related Questions