How to handle updating the navigation bar while using ajax

1 Views

I have an AJAX implementation on my WordPress install and I’m using the ‘CSS and Javascript toolbox’ plugin to apply additional Javascript code. I have also tried the following code in the header.php file in both the section and .

I’m using the standard ‘Twenty Fourteen’ theme and I’m referencing the primary navigation bar at the top. There are no subpages, just normal links.

Read More

http://twentyfourteendemo.wordpress.com/

The code I’m using, which I’m sure is the problem, is this 

<script>
jQuery('ul.menu li').click(function(){   
// Remove class on each item  
jQuery('ul.menu li').removeClass('current-menu-item current_page_item');

// Add class for this one    
jQuery(this).addClass('current_page_item current-menu-item'); 
})
</script>

I have also tried this 

<script>
jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');
</script>

I don’t know Javascript very well but this isn’t doing anything. When a link is clicked, the ‘highlighted’ page on the navigation bar stays on the original page.

I have other code, that toggles the navigation bar on and off when a link is clicked (on mobile) and that works fine so the code is registering, just not working.

Does anyone know why this code isn’t working? I’ve been stuck with this problem for days and I can’t launch without this being fixed, I’d even throw some beer money to anyone with a solution

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I cannot see your sample code in that website, to see if you code is in the body or head etc, but a couple of things you can try:

    1 – You have not wrapped your code in a document ready event.

    That means you may be running code against DOM elements before they exist, so the code does nothing.

    This shortcut version of jQuery(document).ready() also provides a locally scoped $ variable so you can shorten your jQuery code:

    <script>
jQuery(function($){
    $('ul.menu li').click(function(){   
        // Remove class on each item  
        $('ul.menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

    2 – If the menu items are added/classed-up after load (e.g. by a plugin), you need to use delegated event handlers:

    e.g.

    <script>
jQuery(function($){
    $(document).on('click', 'ul.menu li', function(){   
        // Remove class on each item  
        $('ul.menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

    This works by listening for the event bubbling up to a non-changing ancestor element, then applying a jQuery element selector, then applying your function to any selected elements that caused the event.

    Notes: The fallback element for delegated events should always be document and not 'body' as 'body' has some bugs (related to styling) that can cause events not to trigger. You should however target the nearest non-changing ancestor to be most efficient.

    Note: The second option is generally the best way to code event handlers for e group of controls, as it only adds a single handler to the DOM.

    Update:

    As predicted, the JS code was in the header, so needed wrapping in a document ready event handler.

    Also, the actual website uses a menu like this: <ul id="menu-pages" class="nav-menu"> so the selector for the menu items should be ul.nav-menu li or #menu-pages li and not ul.menu li.

    e.g

    <script>
jQuery(function($){
    $(document).on('click', 'ul.nav-menu li', function(){   
        // Remove class on each item  
        $('ul.nav-menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>