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.

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.

3 Answers
3

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)

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.

I use class for the "nav" because that is how the Superfish jQuery Plugin is setup to work. And I don't feel confident enough to go in a "fix" the plugin's code. I am not using any scripts on the page that I am trying to load. And I am unclear what you mean by "move inside the body tags"? Hope I'm not being annoying.
–
geekosupremoJun 9 '09 at 0:06

I meant move the script section that normally resides in the header inside the body tag. This is because on some browsers, even though the response is received, nothing happens if the content has script tags in the header, but works perfectly fine if the same script tags are inside the body. like, <head><script type="javascript"></script></head><body></body> should be replaced by <head></head><body><script type="javascript"></script></body> Using ID or class is more a matter of requirement. We generally use class if we want to target a set of tags and ID if its a specific instance.
–
Kartik SehgalJul 7 '09 at 10:25

I made the changes you suggested, but the behavior seems unchanged. Clicking the link opens a new page, not loading the external info. FYI the external page is formatted thusly: <body> <div class="product name"> <div class="specific feature of product"></div> </div> </body> Am I missing something obvious?
–
geekosupremoJun 9 '09 at 0:18

So you don't have an element with ID "content" on the external page? Then why do you add ' #content' at the end of your URL? Have you ever RTFM: docs.jquery.com/Ajax/load ?
–
Rene SaarsooJun 9 '09 at 7:05

Also, please try to debug your code. For example put an alert() right at the beginning of this click handler. When you don't see the alert when clicking on link, then the real problem is that the event handler is never bound to the link.
–
Rene SaarsooJun 9 '09 at 7:07

My experience with JavaScript and jQuery is from the user side, and no real experience dealing with the code side of it all; this is all very new to me. Thank you for you patience and guidance. I am going back to the doc article and will look deeper into how to debug.
–
geekosupremoJun 9 '09 at 19:30

Okay. So then I should not just make a "bland" HTML page and put the stuff I want in a div called "content" on the page that I want it to load?
–
geekosupremoJun 5 '09 at 22:45

1

You might run into cross-domain issues. I believe browsers have restrictions on loading content from other domains. If so, you'll need to have a proxy on your own server.
–
Matt Sherman♦Jun 6 '09 at 4:43

Its difficult/impossible to load content from a different domain using ajax
–
Click UpvoteJun 6 '09 at 8:21

Good to know. In my case all the content will be within the same domain so the cross domain shouldn't be a problem. Thanks for your input.
–
geekosupremoJun 8 '09 at 22:54