jquery load() is not loading the content

Question

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.

Where is the load function defined? Note that you are binding the click event handler to the container, not the link. Also, <a href="load()"... will simply try to load the page with name load(), it won't call the method load (if that was your intent). I don't see any connection between the HTML (the link) and your JavaScript code. — Felix Kling
– Felix Kling, Commented Aug 17, 2012 at 2:32

dana · Accepted Answer · 2012-08-17 03:26:35Z

3

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.

edited Aug 17, 2012 at 3:26

answered Aug 17, 2012 at 2:31

dana

18.3k7 gold badges71 silver badges91 bronze badges

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

7 Comments

ndesign11 Over a year ago

I added the javascript:load() but it's still not working. Im not sure what the other comments are asking. It's a little over my head. All I have is the a tag that when clicked should make that jquery replace the current .container, with the content of .container from another file. Your suggestion was helpful though, I did need that, thanks!!

ndesign11 Over a year ago

that got my loading gif to display but the page didnt load in the content. When I look in firebug I notice something funky at the end of the url, a series of numbers. localhost:8080/RPG/ncm_master/index.html?_=1345171695524" I have no idea what (?_=1345171695524") means

dana Over a year ago

I think that is a "cache buster" (i.e. prevents the browser from caching the page by appending a random value to the URL). Is there an HTML element on the page with class="container"?

ndesign11 Over a year ago

I tried your new code, but doesnt work. Im not getting any errors though. Firebug says this (Object { originalEvent=Event click, type= "click" , timeStamp= 34291765 , more...}) Nothing happens on my page though.

ndesign11 Over a year ago

Ahh cache buster, thats good to know!! I uploaded my example to ftp. If this can help anyone troubleshoot this. frommesetc.com/test/org.html when you click on the first guys name it should fade out that page and fade in the index.html

|

Michael Raffaele · Accepted Answer · 2012-08-17 02:45:16Z

0

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);
});

answered Aug 17, 2012 at 2:45

Michael Raffaele

1325 bronze badges

2 Comments

ndesign11 Over a year ago

Each of my pages have a class of container. When I click the .button link it should fade out the .container and load in the .container from an external file. I tried your script but still a no go.

Michael Raffaele Over a year ago

I've tested this script and its working for me. Do you receive any error messages? Just to explain how it works, a click listener is created for the anchor with the class of 'button'. When clicked it replaces the HTML content of 'div.newcontent' with the HTML in 'loadingAnim'. It then loads the data from 'dataToLoad' and when its loaded replaces the HTML of 'div.newcontent' with the loaded data.

karaxuna · Accepted Answer · 2012-08-17 07:04:47Z

0

use

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

answered Aug 17, 2012 at 7:04

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

jquery load() is not loading the content

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related