Ajax by worpdress affects called jquery inside template file

Question

I have this function to do ajax in my function.php:

Ajax Jquery:

$("#load_more").on('click', (e) => {
    $.post('/wp-admin/admin-ajax.php',
    { 
       'action': 'my_action',
       'cat':$("#load_more").data('cat')
    }, 
   function(data) {
      $("#data_widget").append(data).animate({}, 5000,"linear", () => {});

    });
});

the code of function.php :

add_action( 'wp_ajax_my_action', 'widget_data' );
add_action( 'wp_ajax_nopriv_my_action', 'widget_data' );

function widget_data(){
    include get_template_directory() . '/inc/wid/card/widget-card.php';
    wp_die();
}

The ajax works perfect, but in the file that I call, I call some data attributes by jquery click, but it doesn't work.

What I'm trying to say, is that the called by jquery inside the template file doesn't work but in other files, it works.

I don't know if the ajax by worpdress affects that.

Any idea

Answer 1

This will not work:

function widget_data(){
    include get_template_directory() . '/inc/wid/card/widget-card.php';
    wp_die();
}

The include statment includes the "widget-card.php" only into the file and not the output stream. You have to redirect the output into a variable and then output the value via "echo".

function widget_data(){

    ob_start();

    include get_template_directory() . '/inc/wid/card/widget-card.php';

    $output = ob_get_clean( );

    echo $output;

    wp_die();
}

Usefull link to output buffering:

What is output buffering? - StackOverflow