Question

I am trying to load the contents into a div named rightcontent into my page from external html files using the jQuery's load method. Initially, there is no content in my div rightcontent, and as the user clicks some links, the texts are automatically loaded into that div.

Take a look at these snippets :

---

In my web page:

<div id="rightcontent">
</div>

---

The same web page also contains links like these:

 <a class="myajaxreq" href="pages/abc.html">Link I</a><br>
 <a class="myajaxreq" href="pages/pqr.html">Link II</a>

---

The external javascript file contains these code:

$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#rightcontent').load(myhref);

return false;
});

---

When I check whether my javascript calls are made correctly using alert(myhref), it works correctly. However, no content is loaded into the div. Help me out here !!

Answer 1

Are you testing the code locally or on a server? AJAX requests won’t work locally.

Upload it to a server (and put everything in the right subdirectories) and it should work fine.