CODEWITHSUNDEEP
javascriptjquery
ndesign11
ndesign11

Reputation: 1779

jquery load() is not loading the content

I have a page with a hyperlink that when clicked, I want it to load the content from another file so the page doesn't have to refresh. The contents of the current ".container" should be replaced with the contents of ".container" from an external html file.

Here is my html

 <li> <a href="#" class="loader" id="indexLink">Chris Lebeau</a>

Here is my jQuery at the bottom of the page.

  <script type="text/javascript">
     jQuery(document).ready(function() {
     jQuery("#indexLink").click(function(event) {
     jQuery("div.container").html(ajax_load).load("index.html");
    event.preventDefault();
});

});

When you click the first guy in the ORG chart @ http://frommesetc.com/test/org.html that .container should fade out, and the .container from index.html should fade in.

Upvotes: 0

Views: 334

Answers (3)

karaxuna
karaxuna

Reputation: 26930

use

jQuery("div.container").load("index.html");

Upvotes: 0

dana
dana

Reputation: 18105

You be missing a javascript: bit in your code:

<a href="javascript:load()">Chris Lebeau</a>

EDIT

You need to define the load() function as well:

<script type="text/javascript">
...

var loadUrl = "/index.html";
function load() {
    $("div.container").html(ajax_load).load(loadUrl);
}
</script>

This assumes you have some HTML element on the page with class="container".

EDIT 2

Lastly, it is recommended now a days to use Unobtrusive JavaScript. To use this approach, do something like this:

<a href="index.html" id="chris_lebeau">Chris Lebeau</a>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#chris_lebeau").click(function(event) {
        jQuery("div.container").html(ajax_load).load("index.html");
        event.preventDefault();
    });
});
</script>

This is currently "best" way to do things, but if the javascript:load() method works, that should suffice.

Upvotes: 3

Michael Raffaele
Michael Raffaele

Reputation: 132

You have a couple of issues here.

Firstly you have no element with the class 'container' - therefore your click handler is actually doing nothing.

Also, if you have a listener for the click then there is no need to link to the JS function from a anchor.

Here is an example:

HTML:
<a class="button" href="#">Hello</a>
<div class="newcontent"></div>

JAVASCRIPT:
var loadingAnim = "<img src='img/ajax-loader.gif' alt='loading...' />";
var dataToLoad = "/index.html";
$("a.button").click(function(){
    $("div.newcontent")
        .html(loadingAnim)
        .load(dataToLoad);
});

Upvotes: 0

Related Questions