Wordpress POST AJAX call, var_dump($_POST) NULL and AJAX response empty when inside ob_start

Question

i have a nav tabs

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:

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 !

Answer 1

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;
}