WordPress.org

Forums

[resolved] wp_nav_menu broken hierarchy when fetched with jQuery AJAX (2 posts)

  1. Gabriel
    Member
    Posted 2 years ago #

    Please help, I've been pulling my hair for days now.

    My wp_nav_menu (with custom walker) output gets scrambled in the returned data via jQuery AJAX calls.

    My wp_nav_menu returned via ajax looks like this:

    <div class="container">
        <div id="page" class="hfeed row">
            <div id="gssHeader" class="span12">
                <div id="gss-menu">
                    <div id="gss-menu-1" class="gss-menu-item"></div>
                    <a href="http://localhost/gs2/">Home</a>
                </div>
                <div id="gss-menu-2" class="gss-menu-item"></div>
                <a href="http://localhost/gs2/about/">About</a>
            </div>
            <div id="gss-menu-3" class="gss-menu-item"></div>
            <a href="http://localhost/gs2/contact/">Contact</a>
        </div>
    </div></div>

    The hierarchy is completely broken. On a fresh page load without ajax, the menu looks normal like this:

    <div class="container">
        <div id="page" class="hfeed row">
            <div id="gssHeader" class="span12">
                <div id="gss-menu">
                    <div id="gss-menu-1" class="gss-menu-item">
                        <a href="http://localhost/gs2/">Home</a>
                    </div>
                    <div id="gss-menu-2" class="gss-menu-item">
                        <a href="http://localhost/gs2/about/">About</a>
                    </div>
                    <div id="gss-menu-3" class="gss-menu-item">
                        <a style="cursor: pointer;">Contact</a>
                    </div>
                </div>
            </div>

    Using the template's prepackaged menu and walker works normally, but the one I created for my needs doesn't. I'm a PHP novice, and pieced this code from other posts online. It gives me the structure I need for a fresh page load, just not using AJAX.

    <?php wp_nav_menu( array(
        'theme_location'=>'primary',
        'menu_class'=>  'gssHeader nav',
        'depth' =>0,
        'items_wrap'=>'<div id="gss-menu">%3$s</div>',
        'container'=>false,
        'walker'=>new GSS_Walker
    ) ); ?>

    GSS_Walker:

    class GSS_Walker extends Walker_Nav_Menu {
        var $number = 1;
    
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    
            $class_names = $value = '';
            $classes = array();
            $classes[] = 'gss-menu-item';
            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
            $id = apply_filters( 'nav_menu_item_id', 'gss-menu-'. $this->number++, $item, $args );
            $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
            $output .= $indent . '<div' . $id . $value . $class_names .'/>';
    
            $atts = array();
            $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
            $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
            $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
            $atts['href']   = ! empty( $item->url )        ? $item->url        : '';
            $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
            $attributes = '';
            foreach ( $atts as $attr => $value ) {
                if ( ! empty( $value ) ) {
                    $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                    $attributes .= ' ' . $attr . '="' . $value . '"';
                }

    Here's the link if you want credit for the answer on StackOverflow:
    http://stackoverflow.com/questions/21183580/wp-nav-menu-broken-hierarchy-when-fetched-with-jquery-ajax-wordpress

    Thanks in advance.

  2. Gabriel
    Member
    Posted 2 years ago #

    Problem was in Ajaxify script. My mistake, I thought I was looking at the raw ajax output, but was looking at the modified output in reality. Blonde moment, there's nothing wrong with the PHP.

Topic Closed

This topic has been closed to new replies.

About this Topic