Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ajax won't let css current link styling work properly

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;
});
like image 834
David Avatar asked Oct 18 '22 19:10

David


1 Answers

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;
});
like image 200
vijayP Avatar answered Nov 11 '22 10:11

vijayP