Search jQuery

jQuery Forum

ajax and jquery conflicting

in Using jQuery • 9 years ago

Hey all,

I have an ajax script which loads new content onto the page when the main navigation links is clicked. I also have a jquery script which fades divs in and out when another subset of links are clicked.

I guess these scripts essentially do the same thing but the first basically is loading in 'pages' without the page having to refresh. The second is just fading in and out divs that are on a page.

The problem is is that the second script only seems to work once, when the page is loaded.

Here they are:

$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#container').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
$('#fadingNav a').click(function(){
var $content = '.'+$(this).attr('class')+'content';
if (!$($content).hasClass('click'))$($content).fadeIn().addClass('click');
$('.click').not($content).fadeOut().removeClass('click');
});
});

Here is my html:

<body>
<div id="container">
<div id="nav">
<ul>
<li style="margin-right:100px;"><a id="home" href="index.html">Home</a></li>
<li style="margin-right:100px;"><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id = "logo">logo </div>
<div id="content">
<div id="fadingNav">
<ul id="menu">
<li class="herart"> <a id="herart" class="herart">HerArt</a></li>
<li class="bio"> <a class="bio">Bio</a></li>
<li class="latest"> <a class="latest">Latest Peaces</a></li>
</ul>
</div>
<div class="herartcontent" id="info">herartsdf</div>
<div class="biocontent" id="info">biosdf</div>
<div class="latestcontent" id="info">latestsdfs</div>
</div>
</div>
</body>

Thanks

Replies(2)

jay.blanc..

Re: ajax and jquery conflicting

9 years ago

Check out live() and delegate():

http://api.jquery.com/live/
http://api.jquery.com/delegate/

You're loading new content into the browser so jQuery needs to be made aware of it.

danw504

Re: ajax and jquery conflicting

9 years ago

Awesome!!

.live()

worked for me..

Thanks so much.

One other thing: I've tried:

$('.herartcontent').show().addClass('click');

to get the 'herartcontent' to display by itself, because at the moment nothing is visible until I click on one of the links.

I also tried:

$('.herartcontent').click();

but this simulates a click before the page is finished loading.

Is there a way to get it to display on its own whenever the home page is refreshed/loaded?

Thanks again!!

Top Reply

Response title

Attachments

jQuery Forum

ajax and jquery conflicting

Replies(2)

Re: ajax and jquery conflicting

Re: ajax and jquery conflicting

Statistics

Tags

Actions

Related Posts