Load in external .html file with jQuery

Question

I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.

HTML-code: http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v

The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

The problem: When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.

@justkt, yes. The external file is being loaded if you check with Firebug. — Victor Bjelkholm
– Victor Bjelkholm, Commented Jan 13, 2011 at 14:43

Gutzofter · Accepted Answer · 2011-01-12 23:33:05Z

2

You have some duplicate #ids.

Remember when you do:

var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
   $('#content').load(toLoad,function(){
   $('#content').slideDown('normal');
});

you are actually loading a page fragment #content into #content in your page. So you end up with this:

<div id='content'>
   <div id='content'>Random Data</div>
</div>

answered Jan 12, 2011 at 23:33

Gutzofter

2,02323 silver badges26 bronze badges

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

1 Comment

Victor Bjelkholm Over a year ago

removed the "'+ #content'" and it all works now. Thanks alot!

ifaour · Accepted Answer · 2011-01-13 14:48:08Z

0

Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.

answered Jan 13, 2011 at 14:48

ifaour

38.1k12 gold badges74 silver badges79 bronze badges

Collectives™ on Stack Overflow

Load in external .html file with jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related