How to filter custom post data with AJAX?

Question

I have build a custom post_type with "Resellers" in order to enter my personal reseller items. The "Resellers" post have taxonomies like "Countries" and "Departmens".

I am running into a problem:

The first time that the page is displayed, nothing gets fetched from my custom post type taxonomies. If I click on one of my links, then the data get successfully updated. The issue is Country without "Département" assigned category (Allemagne for example) = The results are displayed but the "Département" drop-list should be hidden.

Can anyone tell me where have I done a mistake ?

function.php

if( !function_exists( 'reseller_department' ) ){
    function reseller_department(){
        $location = get_terms( 'reseller-department', array( 'parent' => 0 ) );
        if( !empty($location) ){
            foreach( $location as $term ){
                if(isset($_GET['reseller_department']) ){
                    if($_GET['reseller_department'] == $term->slug ){
                        $selected = 'selected';
                    }else{
                        $selected = '';
                    }
                }else{
                    $selected = '';
                }
                echo '<option value="'.$term->slug.'" '.$selected.'>'.$term->name.'</option>';
            }
            if(!isset($_GET['reseller_department']) || $_GET['reseller_department'] == '-1'){
                echo '<option value="-1" selected>'.__( 'all departments', 'nalys-plugin' ).'</option>';
            }else{
                echo '<option value="-1">'.__( '…', 'nalys-plugin' ).'</option>';
            }
        }
    }
}

if( !function_exists( 'reseller_country' ) ){
    function reseller_country(){
        $location = get_terms( 'reseller-country', array( 'parent' => 0 ) );
        if( !empty($location) ){
            foreach( $location as $term ){
                if(isset($_GET['reseller_country']) ){
                    if($_GET['reseller_country'] == $term->slug ){
                        $selected = 'selected';
                    }else{
                        $selected = '';
                    }
                }else{
                    $selected = '';
                }
                echo '<option value="'.$term->slug.'" '.$selected.'>'.$term->name.'</option>';
            }
            if(!isset($_GET['reseller_country']) || $_GET['reseller_country'] == '-1'){
                echo '<option value="-1" selected>'.__( '...', 'nalys-plugin' ).'</option>';
            }else{
                echo '<option value="-1">'.__( '…', 'nalys-plugin' ).'</option>';
            }
        }
    }
}

archieve.js

jQuery(document).ready(function($)  {
    $("#archive-wrapper").height($("#archive-pot").height());
    $("#archive-browser select").change(function() {
        $("#archive-pot")
            .empty()
            .html("<div style='text-align: center; padding: 30px;'>Loading...</div>");

        var d = $("#reseller_department").val();
        var e = $("#reseller_country").val();

        $.ajax({
            url: "/work/", 
            dataType: "html", 
            type: "POST",
            data: {
                "digwp_d" : d,
                "digwp_e" : e
            },

            success: function(data) {
                $("#archive-pot").html(data);
                $("#archive-wrapper").animate({
                    height: $("#archives-table tr").length * 50
                });
            }
        });
    });


    // get all data option value reseller country 
    var values = [];
    var sel = document.getElementById('reseller_country');
    for (var i=0, n=sel.options.length;i<n;i++) {
        if (sel.options[i].value) 
        values.push(sel.options[i].value);
    }
    var jupe = '"' + values.join('","') + '"';
    var dataOptionCountry = values;
    dataOptionCountry.pop();
    // console.log(dataOptionCountry);

    $("#reseller_country").change(function () {
        $("#reseller_department").prop("disabled", !(dataOptionCountry.indexOf(this.value) !== -1));
    });
});

template-reseller-getter.php

<?php
    $rd = $_POST['digwp_d'];
    $rc = $_POST['digwp_e'];
    $querystring = "cat=$rc&cat=$rd&posts_per_page=-1";
    query_posts($querystring); 
?>

<?php if (($rc == '-1') && ($rd == '-1')) { ?>
    <table id="archives-table" class="table">
        <tr>
            <td style='text-align: center; font-size: 15px; padding: 5px;'><?php _e("Please choose from above.", "nalys-plugin") ?></td>
        </tr>
    </table>
<?php } else { ?>
    <div id="archives-table">
         <?php    
            $custom_args_empty_one = array(
                'post_type' => 'reseller',
                'tax_query' => array(
                    'relation' => 'OR',
                    array(
                        'taxonomy' => 'reseller-country',
                        'field'    => 'slug',
                        'terms'    => $rc,
                    ),
                    array(
                        'taxonomy' => 'reseller-department',
                        'field'    => 'slug',
                        'terms'    => $rd
                    )
                )
            );

            $custom_args = array(
                'post_type' => 'reseller',
                'tax_query' => array(
                    'relation' => 'AND',
                    array(
                        'taxonomy' => 'reseller-country',
                        'field'    => 'slug',
                        'terms'    => $rc,
                    ),
                    array(
                        'taxonomy' => 'reseller-department',
                        'field'    => 'slug',
                        'terms'    => $rd
                    )
                )
            );

            if ( $rc != '-1' && $rd == '-1' || $rc == '-1' && $rd != '-1' ) {
                $custom_query = new WP_Query( $custom_args_empty_one );
            } elseif ( $rc != '-1' && $rd != '-1' ){
                $custom_query = new WP_Query( $custom_args ); 
            }

            if ($custom_query->have_posts()) :
                $row = 0; 
                while ($custom_query->have_posts()) : 
                    $custom_query->the_post(); 
                    $count = $custom_query->post_count;

                    if($count==1){
                       // Displaying data
                        echo '<div class="archives-table-reseller col-md-offset-4 col-md-4 col-sm-12 col-xs-12">';
                        the_title('<div class="reseller-title">', '</div>');
                        echo '<div class="reseller-address">'.get_post_meta($post->ID, '_address', true).'</div>'; 
                        echo '<div class="reseller-poscode">'.get_post_meta($post->ID, '_poscode', true).'</div>';
                        echo '<div class="reseller-telephone">Tel.'.get_post_meta($post->ID, '_telephone', true).'</div>';
                        echo '<div class="reseller-email"><a href="mailto:'.get_post_meta($post->ID, '_email', true).'">'.get_post_meta($post->ID, '_email', true).'</a></div>';
                        echo '<div class="reseller-email"><a href="http://'.get_post_meta($post->ID, '_website', true).'" target="_blank">'.get_post_meta($post->ID, '_website', true).'</a></div>';
                        echo "</div>";
                    }else{
                        // Displaying data
                        echo '<div class="archives-table-reseller col-md-4 col-sm-12 col-xs-12">';
                        the_title('<div class="reseller-title">', '</div>');
                        echo '<div class="reseller-address">'.get_post_meta($post->ID, '_address', true).'</div>'; 
                        echo '<div class="reseller-poscode">'.get_post_meta($post->ID, '_poscode', true).'</div>'; 
                        echo '<div class="reseller-telephone">Tel.'.get_post_meta($post->ID, '_telephone', true).'</div>';
                        echo '<div class="reseller-email"><a href="mailto:'.get_post_meta($post->ID, '_email', true).'">'.get_post_meta($post->ID, '_email', true).'</a></div>';
                        echo '<div class="reseller-email"><a href="http://'.get_post_meta($post->ID, '_website', true).'" target="_blank">'.get_post_meta($post->ID, '_website', true).'</a></div>';
                        echo "</div>";
                    }


            endwhile; else:
                echo "Nothing found.";
            endif; 
        ?>
    </div>
<?php } ?>

Answer 1

I see that your problem has somthing in common with error in the topic: How to filter post data with AJAX on page? You can read and find a solution for your case.

Answer 2

You are taking a wrong approach, to use ajax in wp you must follow three steps.

1- Enqueue the js file where you're making the ajax call, for example, let's say the ajax call is inside of main.js

//Add this action to your function.php theme or plugin.
add_action('wp_enqueue_scripts', 'enqueue_frontend');
//OR in case is admin ajax call
add_action('admin_enqueue_scripts', 'enqueue_frontend');

function enqueue_frontend(){
wp_enqueue_script('main-js', 'path_to_js_file' ,array('js-dependency1','js-dependency2'),'1.0', false);
//Pass parameters to the js file, for example the ajax call url
wp_localize_script( 'main-js', 'parameters',['ajax_url'=> admin_url('admin-ajax.php')]);
}

2- Write you Ajax call

               $.ajax( {
                    type: 'POST',
                    url:  parameters.ajax_url,
                    data:{
                        'action':'action_name', //Ajax call action name
                        'param1': 'value1',
                        'param2': 'value2'
                    },
                    dataType: "json",
                  
                    success: function (json) {
                        var value1 = json.param1;
                    },
                    error : function(jqXHR, exception){
                        var msg = '';
                        if (jqXHR.status === 0) {
                            msg = 'Not connect.\n Verify Network.';
                        } else if (jqXHR.status == 404) {
                            msg = 'Requested page not found. [404]';
                        } else if (jqXHR.status == 500) {
                            msg = 'Internal Server Error [500].';
                        } else if (exception === 'parsererror') {
                            msg = 'Requested JSON parse failed.';
                        } else if (exception === 'timeout') {
                            msg = 'Time out error.';
                        } else if (exception === 'abort') {
                            msg = 'Ajax request aborted.';
                        } else {
                            msg = 'Uncaught Error.\n' + jqXHR.responseText;
                        }
                        console.log(msg);
                    }

                } );

3- Capture the Ajax call

add_action( 'wp_ajax_nopriv_action_name', 'callback_ajax' ));//same action name after prefix wp_ajax_

function callback_ajax(){
  //Here you can capture the post values
  $value1 = $_POST['param1'];
  // Do your logic 

  //Make sure to return a json and finish with die() in order the ajax call work
  echo json_encode(array('param1'=>'value1'));//pass all the data you need here and use it on main.js
  wp_die();
}

Note: In case is an ajax call in the backend you should use wp_ajax prefix instead of wp_ajax_nopriv_