AdminLTE2 active sidebar shows/changes only after refresh

Question

I want to highlight active page on my sidebar but my application only shows this change (active page) after i refresh. I have tried some JavaScript and jQuery options, below is what i currently have.

<section class="sidebar">

    <ul class="sidebar-menu" data-widget="tree">

        <li class="treeview ">
            <a href="#/dashboard">
                <i class="fa fa-map"></i> <span>Dashboard</span>
                <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
            </a>
            <ul class="treeview-menu  treeview-menu-visible">
                <li>
                    <a href="#/crashReports">
                        <i class="fa fa-circle-o text-yellow"></i> Crash Reports
                    </a>
                </li>

                <li>
                    <a href="#/Survivors">
                        <i class="fa fa-circle-o text-blue"></i>
                        <span>Survivors</span>
                        </span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</section>

$(document).ready(function() {
        var url = window.location;
        var element = $('ul.sidebar-menu a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
        if (element.is('li')) {
            element.addClass('active').parent().parent('li').addClass('active')
        }
    });

Answer 1

I resolved this by changing my javascript to

$(document).ready(function () {
        $('.treeview-menu li a').click(function(e) {

            $('.treeview-menu li.active').removeClass('active');

            var $parent = $(this).parent();
            $parent.addClass('active');
        });
    });