jQuery not working for load

Question

This is the First File I wanna load This works in div that has id="main"

<!DOCTYPE html>
<html>
    <head>
        <title> Test </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
    </head>
    <body>
    <div id="menu" style="position:absolute;top:0;left:2%;right:0;left:0;">
        <a href="#" id="target"> Link </a>
    </div>
    <div id="main" style="position:absolute;top:20%;left:20%;right:20%;left:20%;">
    </div>
    <script>
        $(document).ready(function(){
            $("#target").click(function(){
                $("#main").load("target.html");
            });
        });     
    </script>
    </body>
</html>

The Second file contains only this info

<h1 style="text-align:center"> This Worked </h1>

Under Network tab

enter image description here

Well both are on the desktop(Windows 8.1) I used chrome IE and firefox no result — AAB, Dec 24 '13 at 10:27
You are using a webserver, or are you just running this from a file:// protocol ? — adeneo, Dec 24 '13 at 10:28
@adeneo I have WAMP installed on this machine.So does it affect the file? — AAB, Dec 24 '13 at 10:35
So rigth now you're just opening the files from the desktop straight into the browser? If so, you need to use a webserver, like WAMP, otherwise ajax requests won't work. — adeneo, Dec 24 '13 at 10:55
:) it worked thanks a ton ! i`m so sorry for wasting so much of your time please post your comment as an answer so that in the near future dumb people like me can get enlightened — AAB, Dec 24 '13 at 10:58

score 0 · Answer 1 · answered Dec 24 '13 at 10:27

0

Please make sure target.html path is correct, "target.html"

 $("#main").load("<...path...>/target.html");

answered Dec 24 '13 at 10:27

Sudheesh.R

356
2
9

both are on desktop so what path should I give? ./target.html or something else – AAB Dec 24 '13 at 10:29
If you are in same folder don't want change path. – Sudheesh.R Dec 24 '13 at 10:33
could you please copy 2 files to a folder, and check it – Sudheesh.R Dec 24 '13 at 10:38
Moved it to D:/test/target.html changed the load to given path still no luck – AAB Dec 24 '13 at 10:40
I have created two files from source and copied to one folder. Here it is working perfectly. – Sudheesh.R Dec 24 '13 at 10:41
can you post code which browser and operating system are you using? – AAB Dec 24 '13 at 10:42
I have using Mozilla and OS is Windows 7 – Sudheesh.R Dec 24 '13 at 10:43
:( No luck for me am doing something wrong the code I have posted is the exact same in my 2 html files but it just isn`t working for me – AAB Dec 24 '13 at 10:47
do you have any FTP account ? Please upload it and check it. After please give that URL – Sudheesh.R Dec 24 '13 at 10:49
I don`t have any FTP account when I do inspect element i get the below result – AAB Dec 24 '13 at 10:50
Please try this code then error will display, $( "#main" ).load( "target.html", function( response, status, xhr ) { if ( status == "error" ) { var msg = "Sorry but there was an error: "; alert( msg + xhr.status + " " + xhr.statusText ); } }); – Sudheesh.R Dec 24 '13 at 10:58
Replace that line with this $( "#main" ).load( "target.html", function( response, status, xhr ) { if ( status == "error" ) { var msg = "Sorry but there was an error: "; alert( msg + xhr.status + " " + xhr.statusText ); } }); – Sudheesh.R Dec 24 '13 at 11:00
Your code should work in live server.I have checked it in local and live. – Sudheesh.R Dec 24 '13 at 11:07

score 0 · Answer 2 · answered Dec 24 '13 at 10:41

0

What does say your Chrome (or FF) inspector ? Look in the network tab, if the target.html file is correctly loaded.

answered Dec 24 '13 at 10:41

JBENOIT

421
3
14

when i click inspect element->network under Name jqery.min.map Method GET status 304 – AAB Dec 24 '13 at 10:44

score 0 · Answer 3 · answered Dec 24 '13 at 10:42

0

It worked for me, just check target.html page you have added contains html, body tags as you may have missed for demo. After checking they are in same folder..

answered Dec 24 '13 at 10:42

Mitesh Vora

458
8
21

zhdfijhzug s ghu hd – Mitesh Vora Dec 24 '13 at 10:47

score 0 · Answer 4 · answered Dec 24 '13 at 10:57

OK, I found the issue. It seems you are testing on Chrome.

So, This will not work on chrome locally because of this error

No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

So, Please upload to a live server or test it with mozilla firefox.

After Clicking the link, Open Console tab to view the error.

There is no issue in your Code

score 0 · Answer 5 · edited May 23 '17 at 12:19

Your script issue a security warning :

XMLHttpRequest cannot load target.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Your problem is related to this thread, take a look to understand : How to add an Access-Control-Allow-Origin header You have to explictly declare that you are allowed to request this resource.

jQuery not working for load

5 Answers5