1

For a WordPress crm/password management plugin I am working on, I have created a custom post type called 'client'. I also have made a separate menu page for storing and showing the passwords of these clients (like an options page, just not used for managing options).

What I would like to do is make a loop of the client post type, and outputting a tab for each client with the password-forms. So when I make a new client post, a tab for that client is being added to the password-page.

The tabs content should load via Ajax, so the page doesn't need to refresh. The layout of the tabs also should be the 'standard wordpress way' of displaying tabs in the admin (but restyled with css).

The problem I am facing is that When I click a tab, the whole admin page loads inside the div where only the content (forms) of the posts should load.

This is my page layout:

<div class="password-manager-panel-content">

        <?php

            // Loop through Clients custom post type and make a tab for each client
            echo '<h2 class="nav-tab-wrapper">';

                $args = array(
                    'post_type' => 'client',
                    'post_status' => 'publish',
                    'hide_empty'=> 1,
                    'posts_per_page' => -1,
                    'orderby' => 'name',
                    'order' => 'ASC'
                );

                $clients = new WP_Query( $args );

                if ( $clients -> have_posts() ) {
                    while ( $clients->have_posts() ) : $clients->the_post(); 
                    echo 
                        '<a class="nav-tab" href="?page=password-manager">';    
                                the_title();
                    echo '</a>';
                    endwhile;
                }

            echo '</h2>';

            echo '<div class="password-manager-tab-content">';

                // The actual content should be loaded inside this div              
                echo '<div class="tab-pane" id="ajax-content">';

                    $the_query = new WP_Query(array(
                        'post_type' => 'client',
                        'posts_per_page' => -1,
                        //'post_name' => $client->slug
                    ));

                    while ( $the_query->have_posts() ) : 
                    $the_query->the_post();

                            echo '<div class="password-manager-tab-header password-manager-row">';
                                the_title();
                            echo '</div>';  
                            echo '<div class="password-manager-row">';

                               // The content will be replaced with ACF Forms
                               the_content();

                            echo '</div>';

                    endwhile;

                echo '</div>';

            echo '</div>';

        ?>

    </div>

My jQuery / Ajax:

$(document).ready(function() {

    $.ajaxSetup({cache:false});
    $("a.nav-tab").click(function() {
        var post_link = $(this).attr("href");
        var post_id = $(this).attr("rel");

        $("#ajax-content").html("content loading");
        $("#ajax-content").load(post_link);

        $("a.nav-tab").removeClass('nav-tab-active');
        $(this).addClass('nav-tab-active');

        return false;       
    });
});

How can I make sure that the right content (tab content) is loaded via Ajax in the right place, and not loading the entire page again in the div?

screenshot of layout and ajax-loading

  • this is a Q&A site, and "can someone help me?" is not a valid question. HTML is off-topic, ACF is off-topic, AJAX is on-topic but it is not clear at all what is the question about ajax. – Mark Kaplun Jan 31 '16 at 19:33
  • Sorry, I rephrased my question. Hopefully this is a better question. I only used ACF for the context. And how is HTML off topic in WordPress development? – Justin Picard Jan 31 '16 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.