We Keep Coding

Going back with my browser = wrong active class link

I am working on a wordpress website, all pages are loaded with Ajax.js.
Everything is working, changing pages without loading all of the website, changing the url after click…
but ONE problem remain : when I click on « go back » on my browser, the active class link is ALWAYS the first page name.
Where does that come from ?
Here is my a part of my code
$(function(){
$(window).bind('popstate', function() {
var url = window.location;
var hash = url.href.substring(url.href.lastIndexOf('/') + 1);
$('#contenu').load( url + ' #contenu');
$('#menu li').removeClass('active');
if(hash.length == 0) {
$('#menu li').first().addClass('active');
} else {
$('#menu li.'+hash+'').addClass('active');
}
});
$('#loading').hide();
$('#menu a').click(function(e){
e.preventDefault();
$('#loading').slideDown();
$('#menu li').removeClass('active');
$(this).parent().addClass('active');
var lien = $(this).attr('href');
$('#contenu').slideUp(500, function() {
$('#contenu').load( lien + ' #contenu', function(){
$('#contenu').slideDown(500, function(){
$('#loading').slideUp();
history.pushState(null, null, lien);
});
});
}); }); });
And an image

history.pushstate fails browser back and forward button

I'm using jQuery to dynamically load content in a div container.
The server side code detects if the request is AJAX or GET.
I want the browsers back/forward buttons to work with the code so I try to use history.pushState. I've got to following piece of code:
$('.ajax').on('click', function(e) {
e.preventDefault();
$this = $(this);
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('');
$('#ajaxContent').load($this.attr('href'), function() {
window.history.pushState(null,"", $this.attr('href'));
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
});
Everything works fine except when browsing with the browsers back/forward button, the adress in the bar changes according to plan but the page doesn't change. What am I doing wrong?
Updated script with the help from Clayton's answer
var fnLoadPage = function(url) {
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('').load(url, function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
window.onpopstate = function(e) {
fnLoadPage.call(undefined, document.location.href);
};
$(document).on('click', '.ajax', function(e) {
$this = $(this);
e.preventDefault();
window.history.pushState({state: new Date().getTime()}, '', $this.attr('href'));
fnLoadPage.call(undefined, $this.attr('href'));
});

#Barry_127, see if this will work for you: http://jsfiddle.net/SX4Qh/
$(document).ready(function(){
window.onpopstate = function(event) {
alert('popstate fired');
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('')
.load($(this).attr('href'), function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
$('.ajax').on('click', function(event) {
event.preventDefault();
alert('pushstate fired');
window.history.pushState({state:'new'},'', $(this).attr('href'));
});
});
If you take a look at the fiddle I provided and click the button, the alert will fire showing that you are pushing a new state. If you then proceed to click the back button once the pushstate has fired, you will see that the previous page (or popstate) will fire.

a href links within tabs not doing anything

I'm using following code for my bootstrap tabs in order to have the #name of the tab in the url, as I want to redirect to a specific tab once some post actions are done, which works fine.
However, ever since I started using the code, all the other links stopped doing anything, it doesn't open the page or display an error, nothing at all.
Here's my code :
$(function() {
var gotoHashTab = function (customHash) {
var hash = customHash || location.hash;
var hashPieces = hash.split('?'),
activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
}
// onready go to the tab requested in the page hash
gotoHashTab();
// when the nav item is selected update the page hash
$('.nav a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash
//location.hash = $(e.target).attr('href').substr(1);
scrollTo(0,0);
})
// when a link within a tab is clicked, go to the tab requested
$('.tab-pane a').click(function (event) {
if (event.target.hash) {
e.preventDefault();
gotoHashTab(event.target.hash);
}
})
$('.tab-pane a').on('click', function(e){
e.preventDefault()
})
});
I've noticed on some other questions, that e.preventDefault() may cause that, but when I comment those out nothing happens.
How to rewrite the code to keep functionality but make those normal links work again ?

It's looking at all the links with this:
activeTab = $('[href=' + hashPieces[0] + ']');
Change to:
activeTab = $('.tab-pane [href=' + hashPieces[0] + ']');
And also try being more specific with the .nav, since .nav is default for all navs. So this:
$('.nav a').on('shown.bs.tab', function (e) {
Should change to:
$('.tab-pane a').on('shown.bs.tab', function (e) {

Jquery, Codeigniter 2.1 - pagination issues

I am creating pagination using Codeigniter, and I want to add ajax functionality. JS is working when pagination link is clicked first time. When it is clicked for the second time JS doesn't work and pagination is working via PHP controller (this part is working without any problem). This is JS code:
var pag = $('#pagination a');
pag.on('click', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});
Also scrollTop doesn't work. What am I doing wrong?

Probably that's because your DOM gets manipulated everytime, and hence the handler for the click event is lost.
try this way :
$('body').on('click', '#pagination a', function(e) {
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({
'opacity':0,
scrollTop: 0
}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({
'opacity':1
}, 400);
});
});
e.preventDefault();
});
this will ensure rebinding the click event on each DOM manipulation

try this bro..
maybe the element was not yet loaded...
var pag = $('#pagination a');
pag.on('click', 'a', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});

Using jQuery post

I have a link that posts to a url (ajax). Then I want to hide the entire li.
HTML
<li>Product Name Delete</li>
JQUERY
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
$.post(link, function() {
$(this).parent().slideUp();
return false;
});
event.preventDefault();
});
});

The this-keyword in the success-handler passed to $.post does not refer to the anchor element, so your code won't work. You can easily fix this by saving a reference to the li-element outside the success-handler:
$(function(){
$(".del").click(function () {
var link = $(this).attr('href');
var li = $(this).parent();
$.post(link, function() {
li.slideUp();
return false;
});
event.preventDefault();
});
});