Reputation: 73
This is my problematic ajax file. Please also refer to my original css question here: .Current link styling on CSS only works on the 1st page and doesn't transfer to the other
How can I fix this Ajax code so that starts letting me apply my current link styling to the actual current page?
$("a.ajax-link").live("click", function(){
$this = $(this);
var link = $this.attr('href');
var current_url = $(location).attr('href');
if( link != current_url && link != '#' ) {
$.ajax({
url:link,
processData:true,
dataType:'html',
success:function(data){
document.title = $(data).filter('title').text();
current_url = link;
if (typeof history.pushState != 'undefined')
history.pushState(data, 'Page', link);
setTimeout(function(){
$('#preloader').delay(50).fadeIn(600);
$('html, body').delay(1000).animate({ scrollTop: 0 },1000);
setTimeout(function(){
$('#ajax-content').html($(data).filter('#ajax-content').html());
$('#ajax-sidebar').html($(data).filter('#ajax-sidebar').html());
$('body').waitForImages({
finished: function() {
Website();
backLoading();
$('.opacity-nav').delay(50).fadeOut(600);
},
waitForAll: true
});
},1000);
},0);
}
});
}
return false;
});
Upvotes: 5
Views: 106
Reputation: 11502
I believe you just need to remove the current
class from previous <li class = "current">
and need to apply it to current <a>
tag's parent <li>
tag.
This can be done in following way:
$("a.ajax-link").live("click", function(){
$this = $(this);
var link = $this.attr('href');
var current_url = $(location).attr('href');
if( link != current_url && link != '#' ) {
$.ajax({
url:link,
processData:true,
dataType:'html',
success:function(data){
//code to apply current class to current li
if($this.parent("div.logo").length == 0){
$("li.current").removeClass("current");
$this.parent("li").addClass("current");
}
//code ends here
document.title = $(data).filter('title').text();
current_url = link;
if (typeof history.pushState != 'undefined')
history.pushState(data, 'Page', link);
setTimeout(function(){
$('#preloader').delay(50).fadeIn(600);
$('html, body').delay(1000).animate({ scrollTop: 0 },1000);
setTimeout(function(){
$('#ajax-content').html($(data).filter('#ajax-content').html());
$('#ajax-sidebar').html($(data).filter('#ajax-sidebar').html());
$('body').waitForImages({
finished: function() {
Website();
backLoading();
$('.opacity-nav').delay(50).fadeOut(600);
},
waitForAll: true
});
},1000);
},0);
}
});
}
return false;
});
Upvotes: 3