getting jQuery to load information from another page

Question

(waves newbie flag, also new to JS and jQuery)

I'm working on my companies website, being built on Squarespace.

We have a group of products most of which also have some sort of accessories. I am trying to avoid a super long page of divs with a tabbed interface, that many divs was making me go cross eyed.

So I thought I could use the SuperFish dropdown plugin for jQuery, and that seems okay so far. But now I am faced with getting the information stored in separate pages to be called and placed into the main page without replacing the page.

Now ... when I click the one link i have setup to test this, the link does the "expected" response of loading the html page but it takes over the whole thing and removes my navigation.

I am completely willing to do my own work and RTFM, but I am not sure where to look in said manual. So I am open to pointers to documentation.

Here's what I have so far.

// initialise plugin
$(document).ready(function() {
$(function(){
$('ul.sf-menu').superfish();

// this bit was taken from this tutorial: http://is.gd/PuaK-
$('#nav li a').click(function(){
// function to load in the actual page data
var toLoad = $(this).attr('href')+' #content';
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$('#content').show();
}
return false;
});

Thanks for looking.

---

6/10/09 - update - I've spent some more time RTFM. And I have gotten to the point where I think I understand how the ".load" function works. I've been able to successfully use it on a test page. So now i think I can clarify my goals.

Refined Statement:
I want to take an <a> destination and take the contents of a <div> the data into an <iframe>.

This is my first real development using JavaScript; and I know it's frustrating dealing with newbs sometimes, I thank you in advance for your patience.

---

6/15/09
Okay ... I am putting this idea aside for now. It is way out of my depth and is currently holding up the production big time. If anyone has a good idea I'm still open, thanks again.

Answer 1

I think Benny Wong has is right.

It sounds like your structure is:

<div id='content'>
  <div id='nav'>...</div>
  other stuff
</div>

As suggested try:

<div id='nav'>...</div>
<div id='content'>
  other stuff
</div>

Let's take a moment to clarify the two uses of #content in this scenario.

$('#content').load('http://whatever #content');

The first one is the destination. All the contents of that div will be replaced. Which is why Benny suggested you move the #nav outside that div.

The second use of #content (after the url) tells jquery what part of the other page to grab.

Answer 2

You say that your page structure is like this:

<div class="nav">
  <ul>
   <li><a href="">nav link</a></li>
   <li></li>
  </ul>
</div
<div class="content">
  <p></p>
</div>

And then in your JavaScript you have:

$('#nav li a').click(function(){ ...

Well, #nav refers to an ID, but your HTML only has classes.

This means that your click-function never gets executed and by clicking on the link you just navigate to the page in normal way.

You have to use .nav to target classes:

$('.nav li a').click(function(){
  var toLoad = $(this).attr('href')+' #content';
  function loadContent() {
    $('#content').load(toLoad,'',showNewContent);
  }
  function showNewContent() {
    $('#content').show();
  }
  return false;
});

But that code doesn't work either, because the loadContent() function you define inside that click event never gets executed.

I would write it like that instead:

$('.nav li a').click(function(){
  var toLoad = $(this).attr('href')+' #content';
  $('#content').load(toLoad, '', function() {
    $('#content').show();
  });
  return false;
});

Answer 3

There are two things here.

1. You have referenced class like an ID. for IDs we prefix # like $('#content'). If you really want to reference the class then just remove the # and put a . (dot)
2. You may reference another page and load it, but that does not necessarily mean it will work properly. For example, if the page you are loading has script tags in it's header, it will not work and no content will show up. A work around is to move inside the body tags of that page you want to load. Additionally, you may want to make sure that you don't have a conflict with same name functions or IDs.