jQuery Load Problem

Question

Still new to jQuery, need help on following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
     $(document).ready(function() {
         $('.nav-link').click( function() {
            var href = $(this).attr('href');
            $('#content').load( href, function() {
                alert("Yeahhhh !");
            });
            return false; // don't actually follow the link
         });
     });
</script>

<div class="menu">
    <ul>
    <li><a href="http://www.google.com.my/" class="nav-link"> Yeah 1 </a></li>
    <li><a href="C:\Testing\Yeah1.html" class="nav-link"> Yeah 2 </a></li>
    </ul>
</div>


<div id="content">
    ... Initial Content...
</div>  
 </body>
 </html>

I created this HTML file called testing.html and have another simple HTML file called yeah1.html for testing purpose. Before putting the jQuery codes, the link could be directed to yeah1.html.

However, after putting the jQuery codes, the $('#content').load( href); should be able to load the content in its DIV and I've even got the message alert of "Yeahhhh !"...but, still the content is not loaded.

Community · Accepted Answer · 2017-05-23 12:23:56Z

4

A lot of browsers (Chrome, FF) will block files being loaded directly from your disk for security reasons.

When you refer to the file using C:\..., the protocol if file. The link ultimately looks like this:

<a href="file:///C:\Testing\Yeah1.html" class="nav-link"> Yeah 2 </a>

To fix it, put the Yeah1.html file in your website's virtual folder and use a absolute or relative path to load it via http protocol.

(relative path)

<a href="Yeah1.html" class="nav-link"> Yeah 2 </a>

or (absolute path)

<a href="/Yeah1.html" class="nav-link"> Yeah 2 </a>

or (absolute path, fully specified)

<a href="http://mysite.com/Yeah1.html" class="nav-link"> Yeah 2 </a>

That and then as Dennis mentioned, load is failing in your case due to Same origin policy violation. So you can get Yeah1,html to load, but call to google.com will fail unless you switch to jsonp

function jsonpCallback(data, status) {
    alert("data: " + data + ", status: " + status);
}

$.ajax({
    url: "http://www.google.com.my/",
    dataType: 'jsonp',
    jsonpCallback: 'jsonpCallback',
});

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Aug 24, 2011 at 15:45

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrCooL Over a year ago

You are right..I was wondering whether if I put it on host for testing would make more sense. It's actually working, in http request. :)

Dennis · Accepted Answer · 2011-08-24 15:42:35Z

1

load is subject to the same origin policy, so your request is likely failing.

From the docs http://api.jquery.com/load/ to check error vs success:

$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});

answered Aug 24, 2011 at 15:42

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

Flob · Accepted Answer · 2011-08-24 15:49:40Z

1

U can load anything that exists on your domain but for securtiy reasons u can't load pages from other domains.

http://api.jquery.com/load/ Additional Notes: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

answered Aug 24, 2011 at 15:49

Flob

1288 bronze badges

Comments

Sahil Muthoo · Accepted Answer · 2011-08-24 15:56:59Z

1

<li><a href="Yeah1.html" class="nav-link"> Yeah 2 </a></li>

Change the absolute path to relative. Put Yeah1.html in the same folder as this file. Also Google Chrome and Firefox will not load content from disk by default, use the --allow-file-access-from-files flag while invoking chrome like so:

c:\>chrome --allow-file-access-from-files

to override.

edited Aug 24, 2011 at 15:56

answered Aug 24, 2011 at 15:43

Sahil Muthoo

12.6k2 gold badges32 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery Load Problem

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related