Jump to content

[jquery] Load External File #content


Laegnur
 Share

Recommended Posts

HelloIn my web I have a script to load the #content from any page in the div #content of the main page, using JQuery, but when I run these script for first time, it duplicate the div #content.code.js

$(document).ready(function() {  $('#nav a').click(function(event) {	$('#content').hide().load($(this).attr("href") + ' #content').fadeIn(1000);	$('#nav a').removeClass("current");	$(this).addClass("current");	event.preventDefault();  });

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title></title><meta name="generator" content="Bluefish 1.0.7"><meta name="author" content="Tury Laegnur"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="content-style-type" content="text/css"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="code.js"></script></head><body>  <ul id="nav">	<li><a href="index.html" class="current"><span>Home</span></a></li>	<li><a href="links.html"><span>Links</span></a></li>  </ul>  <div id="content">	<p>Lorem Ipsum</p>	<p>Lorem Ipsum</p>  </div></body></html>

DOM Page Source

<div style="display: block;" id="content"><div id="content">	...  </div></div>

Some one can help me with this?

Link to comment
Share on other sites

What happens if you try this instead?

$('#content').hide().load($(this).attr("href")).fadeIn(1000);

Additionally, depending on your requirements, you may want to empty the contents of your div before you load it with new content:

$('#content').hide().empty().load($(this).attr("href")).fadeIn(1000);

Link to comment
Share on other sites

If I not add the

 + ' #content'

It copy all the content of the linked page in the div #content of the main pageDOM Page Source

...<div style="display: block;" id="content"><title></title><meta name="generator" content="Bluefish 1.0.7"><meta name="author" content="Tury Laegnur"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="content-style-type" content="text/css">  <ul id="nav">	<li><a href="index.html" class="current"><span>Home</span></a></li>	<li><a href="links.html"><span>Links</span></a></li>  </ul>  <div id="content">	<p>Lorem Ipsum</p>  </div></div>...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...