Wordpress Append Values to Multiple Div Ajax

Viewed 18

I am trying append multiple div with same json response, How Can I categorize the response of ajax?

I want to append Response of get_template_part('template-parts/content-search') to #result_data

And I want to append another div #filter with value stored in $test variable.

filter.js:

jQuery(document).ready(function(){
    jQuery('.category_checkbox, .services_checkbox, .industry_checkbox').click(function(){
        var category = jQuery('input[name=category_checkbox]:checked').map(function()
        {
            return jQuery(this).val();
        }).get();
        var services = jQuery('input[name=services_checkbox]:checked').map(function()
        {
            return jQuery(this).val();
        }).get();
        var industry = jQuery('input[name=industry_checkbox]:checked').map(function()
        {
            return jQuery(this).val();
        }).get();

        jQuery.ajax({
            url: my_ajax_object.ajax_url,
            type: 'post',
            dataType: 'json',
            data: { action: "search_checkbox_call", 
            category: category,
            services: services,
            industry: industry
        },
            success:function(data){
                var res = JSON.parse(data);
                jQuery('#result_data').html(res);
            }
        });
    });
});

ajax_filter.php:

function search_checkbox_call()
{
    $cat_clug = $_POST['category'];

    $args = array(
        'post_type' => 'page',
        'category__and' => $cat_clug,
        'post_status' => 'publish',
        'orderby' => 'DESC'

    );
    $new = new WP_Query($args);
    ob_start();
    if ($new->have_posts()) {
        while ($new->have_posts()) {
            $new->the_post();

            get_template_part('template-parts/content-search');
        }

        grupi_posts_pagination();
    } else {
        get_template_part('template-parts/content', 'none');
    }

$test = "<div class='test'><h1>Test</h1></div>";

    wp_send_json_success(ob_get_clean());

    exit;
}

add_action('wp_ajax_search_checkbox_call', 'search_checkbox_call');
add_action('wp_ajax_nopriv_search_checkbox_call', 'search_checkbox_call');
1 Answers

Send both variables and read them using one common object.

$test = "<div class='test'><h1>Test</h1></div>";
$html = ob_get_clean();
wp_send_json_success(['test' => $test, 'html' => $html]);

And on client:

success: function(data) {
  var res = JSON.parse(data);
  var html = res.html;
  var test = res.test;
  jQuery('#result_data').html(html);
  jQuery('#filter').html(test);
}
Related