0

i have a nav tabs enter image description here

when i click on a tab, i want it to return a specific type of posts, here's the code html one of the tabs:

<ul id="menu-menu-secondaire-blog" class="nav nav-tabs">
<li class="nav-item"">
    <a id="test" href="#articles"  class="nav-link tabs-link border-white active" role="tab" data-toggle="tab">Tous les articles</a>
</li>

and here's my file: articleTabs.php (included in my shortcode callback function):

<?php
?>
<ul id="menu-menu-secondaire-blog" class="nav nav-tabs">
    <li class="nav-item" style="/*border-bottom: 1px solid black;*/">
        <!-- class= active: means it is the tab opened by default-->
        <a id="test" href="#articles"  class="nav-link tabs-link border-white active" role="tab" data-toggle="tab">Tous les articles</a>
    </li>

    <li class="nav-item">
        <a href="#palette-europe" class="nav-link tabs-link border-white " role="tab" data-toggle="tab">Palette Europe</a>
    </li>

    <li class="nav-item">
        <a id="tab-transport" href="#transport" class="nav-link tabs-link border-white" role="tab" data-toggle="tab">Transport</a>
    </li>

    <li class="nav-item">
        <a href="#supply-chain" class="nav-link tabs-link border-white" role="tab" data-toggle="tab">Supply Chain</a>
    </li>

    <li class="nav-item">
        <a href="#environnement" class="nav-link tabs-link border-white" role="tab" data-toggle="tab">Environnement</a>
    </li>

    <li class="nav-item">
        <a href="#start-up" class="nav-link tabs-link border-white" role="tab" data-toggle="tab">Start-up</a>
    </li>
</ul>

<?php
    $tab_title = "articles";
    // $tab_title = $_POST["article_href"];
?>
<div class="tab-content" style="gap: 1em !important;">
    <div role="tabpanel" class="tab-pane active tab-content container-fluid d-flex" style="gap: 1em !important; flex-wrap: wrap;" id="<?=$id;?>" >
<?php
    $i ='';
        $args = array(
        'post_type'=> 'post',
        'orderby'    => 'ID',
        'post_status' => 'publish',
        'order'    => 'DESC',
        'posts_per_page' => 9
        );

        $result = new WP_Query( $args );
        if ( $result-> have_posts() ) :
        while ( $result->have_posts() ) : $result->the_post();

        $category = get_the_category(get_the_ID());

            if ($tab_title === "articles"){
            $post_category =  $category[0]->name;
            $post_title = get_the_title();
            $post_date = get_the_date( 'd M Y' );
            } elseif ($tab_title === "palette-europe" && $category[0]->name === "Palette Europe"){
                $post_category = $category[0]->name;
                $post_title = get_the_title();
                $post_date = get_the_date( 'd M Y' );
            } elseif ($tab_title === "transport" && $category[0]->name ==="Transport") {
                $post_category = $category[0]->name;
                $post_title    = get_the_title();
                $post_date     = get_the_date( 'd M Y' );
            } elseif ($tab_title === "supply-chain" && $category[0]->name ==="Supply Chain") {
                $post_category = $category[0]->name;
                $post_title    = get_the_title();
                $post_date     = get_the_date( 'd M Y' );
            } elseif ($tab_title === "environnement" && $category[0]->name ==="Environnement") {
                $post_category = $category[0]->name;
                $post_title    = get_the_title();
                $post_date     = get_the_date( 'd M Y' );
            } elseif ($tab_title === "start-up" && $category[0]->name ==="Start-up") {
                $post_category = $category[0]->name;
                $post_title    = get_the_title();
                $post_date     = get_the_date( 'd M Y' );
            }


        ?>

            <div class="card margin-top-sections">
                <a class=""  href="#">
                <div class="card-img-top article-bg-card w-100"></div>
                <div class="card-body" style="min-height: 216px">
                    <p class="card-title section-first-title section-first-title margin-05"><?=$post_category?></p>
                    <h3 class="article-card-title margin-05"><?=$post_title?></h3>
                    <p class="article-card-date mt-5 mb-0"><?=$post_date?></p> <!--todo: date: make it flex en bas a gauche-->
                </div>
                </a>
            </div>

<?php
        endwhile;
        the_posts_pagination();      
        ?>
        </div>
        <?php>

        <?php /*else :*/ ?>
            <!--<h3>Pas d'articles</h3>-->
        <?php endif;
        ?>
        </div>
        <?php
        wp_reset_postdata();
        ?>

so i chose to use AJAX to get the href of the clicked tab and send it to my front, here's the function in my file functions.php where i want to send my ajax response :

function js_scripts (){
wp_enqueue_script( 'cool-stuff',get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), false, false);
wp_localize_script( 'cool-stuff', 'ajaxurl', admin_url( 'admin-ajax.php' ) );}
add_action( 'wp_enqueue_scripts', 'js_scripts');


add_action( 'wp_ajax_get_attr_href', 'get_attr_href');
add_action( 'wp_ajax_nopriv_get_attr_href', 'get_attr_href');
function get_attr_href() {
var_dump($_POST);
ob_start();
include 'articlesTabs.php';
return ob_get_clean();
}
add_shortcode('shortcode-articles', 'get_attr_href');

and here's my jQuery code in my scripts.js: Query(document).ready(function($) {

 // ---------------------------------------------------------------------------------------
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
        console.log($(this).attr('href'));           
        var href = $(this).attr('href');    
        var newData = {
            "action": "get_attr_href",
            "href_post": href
        };

        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: newData,
            success: function (response) {
                console.log('success');
            }
        });
    });

});

when i click on the tab, i go to Inspect->Network and i get this response: enter image description here

with success in my console,

i have two problems:

1 - if you look at my function get_attr_href(), i have var_dump($_POST) and it returns empty : var(), and it should return the $_POST array that containes the values returned by the AJAX call.

2 - if i put the $_POST inside the ob_start it no longer returns a response either.

what i can do in this situation?

Thanks in advance !

1
  • Regarding #1, that's not how AJAX works. If you want to print the values returned by an AJAX request you need to do that in the script. Aug 27 at 10:54
0

If you want to use the same function you have to detect ajax call (echo) from shortcode (return) like this :

function get_attr_href() {
  ob_start();
  var_dump($_POST);
  include 'articlesTabs.php';
  $html = ob_get_clean();
  if(wp_doing_ajax()){
    echo $html;
    wp_die();
  }
  return $html;
}

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.