Problem with AJAX in wordpress plugin

Question

I'm writing a plugin and trying to get some data from the database and post it using AJAX. After sending the AJAX request, PHP processes the data and is trying to give me some page data, but it doesn't display on page.

How can I fix this problem?

Here is some code of main file:

require('get_state.php');
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');

function filteroption_func_handler_oil_filters_marka($att) {

    extract(shortcode_atts(array(), $att));
    global $wpdb;
    $retval = '';
    $excel_out = $wpdb->prefix.excel_out;

    $q = ("SELECT DISTINCT `Brand` FROM $excel_out");
    $related = $wpdb->get_results($q);

    if ($related) {
        foreach ($related as $value) {
            $retval .= '<option';
            $retval .=
                ' value="'.$value->Brand.'">'.
                $value->Brand;
            $retval .= '</option>';
        }
        return $retval;
    }
    return;
}

function run_oil_filters() {

    $status_url = $_SERVER['REQUEST_URI'];
    preg_match('/^http(s):?\:\/\/[^\/]+\/(.*)$/i', $status_url, $matches);

    $real_url = $_SERVER['REQUEST_URI'];
    preg_match('/^\/(.+)(\?.+)$/i', $real_url, $uri_matches);

    if ($uri_matches[1] == $matches[2]) {
        if (isset($_SERVER['REQUEST_URI']) && $_SERVER['REQUEST_URI'] == '/test-miwfilters/') {
            add_shortcode('filteroption', 'filteroption_func_handler_oil_filters_marka');
        }
    }
}

add_action('admin_menu', 'add_admin_pages_oil_filters');
add_action('init', 'run_oil_filters');

Here is some code of functions.php:

function wp_styles_basic_new() {
    wp_enqueue_style('cust-style', get_template_directory_uri() . '/css/main.css');
}
add_action('wp_enqueue_scripts', 'wp_styles_basic_new');

wp_enqueue_script('cust-jquery', get_template_directory_uri() . '/js/jquery-1.12.1.min.js');
wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js');
wp_enqueue_script('autocomplete', get_template_directory_uri() . '/js/jquery.autocomplete.pack.js');

wp_localize_script('cust-jquery', 'myajax',
    array(
        'url' => admin_url('admin-ajax.php')
    )
);

function my_scripts_method(){
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Here an example of get_state.php:

global $wpdb;

function filteroption_func_handler_oil_filters_engine($atts) {
    if(isset($_POST['MARCA'])) {
    extract(shortcode_atts(array(), $atts));

    global $wpdb;
    $excel_out = $wpdb->prefix.excel_out;

    $retval = '';

    $q = ("SELECT `engine` FROM $excel_out WHERE Brand = '".$_POST['MARCA']."'");
        $results = $wpdb->get_results($q);

    if($results) {
        foreach ($results as $value) {
            $retval .= '<option';
            $retval .=
                ' value="'.$value->engine.'">'.
                $value->engine;
            $retval .= '</option>';
        }
        return $retval;
    }
    }
}

if(!empty($_POST['MARCA']) and empty($_POST['engine'])) {
    $excel_out = $wpdb->prefix.excel_out;

    $info = 'Select Engine';

    filteroption_func_handler_oil_filters_engine($atts);
    add_shortcode('engineoption', 'filteroption_func_handler_oil_filters_engine');

    $data = 'engine';
}

if(!empty($_POST['MARCA']) and !empty($_POST['engine'])) {
    $excel_out = $wpdb->prefix.excel_out;

    $q = ("SELECT model FROM $exel_out WHERE Brand = '".$_POST['MARCA']."' AND engine = '".$_POST['engine']."'");
    $results = $wpdb->get_results($q);
    $info = 'Select Model';
    $data = 'model';
}

if(!empty($_POST['MARCA']) and !empty($_POST['engine']) and !empty($_POST['model'])) {
    $excel_out = $wpdb->prefix.excel_out;

    $q = ("SELECT year, Meiwa_air, oem_air, note_oil, meiwa_oil_black, oem_oil, meiwa_oil_crome, oem_crome FROM $excel_out WHERE Brand = '" . $_POST['MARCA'] . "' AND engine='" . $_POST['engine'] . "' AND model='" . $_POST['model'] . "'");
    $results = $wpdb->get_results($q);
    $info = 'Select year';
    $data = 'year';
}

if(!empty($_POST['filtr'])) {
    $excel_out = $wpdb->prefix.excel_out;

    $q = ("SELECT Brand, engine, model, year FROM $excel_out WHERE meiwa_oil_black = '".$_POST['filtr']."'");
    $results = $wpdb->get_results($q);
}

if($data) {
    ?>
    <option value=""><?=$info;?></option>
    <?php
    if ($data == 'year') {
/**/
    } else {
        echo '[engineoption]';
    }
}

if($result_bikes){
    $brand = '';
    foreach($result_bikes as $bikes){
        if($brand != $bikes['Brand']){
            echo '<h3>'.$bikes['Brand'].'</h3>';
        }
        $brand = $bikes['Brand'];
        echo '<p>'.$bikes['engine'].' - '.$bikes['model'].' - '.$bikes['year'].'</p>';
    }
}

And here is an example of script.js:

jQuery( document ).ready(function($){

    $('#filter_number').autocomplete('data.php?mode=sql', {
        width: 200,
        max: 5,
        select: function( event, ui ) {
            $('#drawing').attr('src', '/MIW 600/'+ui);
            return false;},
    });
    var country = $('#country');
    country.autocomplete({
        source : 'data.php?mode=sql',
        minLength : 2,
        select: function( event, ui ) {
            alert('15');
            console.log(15);
            $('#result').text(10);
            return false;},
    });
});

function getEngine(val) {
    window.marcavar = val;
    jQuery.ajax({
        type: "POST",
        url: "../get_state.php",
        data:'MARCA='+val,
        success: function(data){
            jQuery("#engine").html('');
            jQuery("#engine").html(data);
        }
    });
}

function getModel(engine) {
    name = window.marcavar;
    window.enginevar = engine;
    jQuery.ajax({
        type: "POST",
        url: "../get_state.php",
        data: 'MARCA='+name+'&engine='+engine,
        success: function(data){
            jQuery("#model").html('');
            jQuery("#model").html(data);
        }
    });
}

function getYear(model) {
    engine = window.enginevar;
    name = window.marcavar;
    window.modelvar = model;
    jQuery.ajax({
        type: "POST",
        url: "../get_state.php",
        data: 'MARCA='+name+'&engine='+engine+'&model='+model,
        success: function(data){
            jQuery("#year").html('');
            jQuery("#year").html(data);
        }
    });
}

function getResult(data){
    if(!data)
        return false;
    var data = data.split('@');
    if(data[3])
        jQuery('#filter_number').val(data[3]);
    showImage();
}

function showImage(){
    var name = jQuery('#filter_number').val();
    if(name.length < 5)
        return false;
    jQuery('#drawing').attr('src', '/MIW 600/'+name+'.jpg');
    jQuery.ajax({
        type: "POST",
        url: "../get_state.php",
        data:'filtr='+name,
        success: function(data){
            jQuery(".bikes").html('');
            jQuery(".bikes").html(data);
        }
    });
}

Answer 1

After Milo's tutorship:

I recommend first reading how to use AJAX in Plugins properly. – Milo yesterday

and reading another questions on wp.stack, my problem was solved)

Here is an examples of code from my rewritten files 1)get_state.php: ad

add_action( 'wp_ajax_ajax_object', 'ajax_handler' );
add_action( 'wp_ajax_nopriv_ajax_object', 'ajax_handler' );

function ajax_handler() {
    global $wpdb, $results, $info, $data, $retval, $result_bikes;
    $excel_out = $wpdb->prefix.excel_out;
    if(!empty($_POST['MARCA']) && empty($_POST['engine'])) {
        $q = ("SELECT DISTINCT engine FROM $excel_out WHERE Brand = '".$_POST['MARCA']."'");
        $results = $wpdb->get_results($q);
        $info = 'Select Engine';
        $data = 'engine';
    }
    if(!empty($_POST['MARCA']) && !empty($_POST['engine'])) {
        $q = ("SELECT model FROM $excel_out WHERE Brand = '".$_POST['MARCA']."' AND engine = '".$_POST['engine']."'");
        $results = $wpdb->get_results($q);
        $info = 'Select Model';
        $data = 'model';
    }
    if(!empty($_POST['MARCA']) and !empty($_POST['engine']) and !empty($_POST['model'])) {
        $q = ("SELECT year, Meiwa_air, oem_air, note_oil, meiwa_oil_black, oem_oil, meiwa_oil_crome, oem_crome FROM $excel_out WHERE Brand = '" . $_POST['MARCA'] . "' AND engine='" . $_POST['engine'] . "' AND model='" . $_POST['model'] . "'");
        $results = $wpdb->get_results($q);
        $info = 'Select year';
        $data = 'year';
    }
    if(!empty($_POST['filtr'])) {
        $q = ("SELECT `Brand`, `engine`, `model`, `year` FROM $excel_out WHERE `meiwa_oil_black` = '".$_POST['filtr']."'");
        $result_bikes = $wpdb->get_results($q);
    }
    if(!empty($_POST['img_filter'])) {
        $source = WP_PLUGIN_URL .'/oil-filters/MIW 600/'.$_POST['img_filter'].'.jpg';
        echo $source;
    }

    if($results) {
        echo '<option value="">'.$info.'</option>';
        foreach ($results as $state) {
            $retval = '<option value="';
            if($data == 'year') {
                $retval .= $state->Meiwa_air.'@'.$state->oem_air.'@'.$state->note_oil.'@'.$state->meiwa_oil_black.'@'.$state->oem_oil.'@'.$state->meiwa_oil_crome.'@'.$state->oem_crome;
            } else {
                $retval .= ''.$state->$data.'';
            }
            $retval .= '">'.$state->$data;
            $retval .= '</option>';
            echo $retval;
        }
    }

    if($result_bikes){
        $brand = '';
        foreach($result_bikes as $bikes){
            if($brand != $bikes->Brand){
                echo "<h3>".$bikes->Brand."</h3>";
            }
            $brand = $bikes->Brand;
            echo '<p>'.$bikes->engine.' - '.$bikes->model.' - '.$bikes->year.'</p>';
        }
    }
    wp_die();
}

2)script.js:

jQuery(document).ready(function($){
    jQuery('#bike-name-list').on('change', function () {
        var b = jQuery('#bike-name-list').val();
        jQuery.ajax({
            type: 'POST',
            url: ajax_object.ajaxurl,
            data: {
                'action': 'ajax_object',
                'MARCA': b
            },
            success: function (data) {
                $("#engine").html('');
                $("#engine").html(data);
            }
        });
    });

    jQuery("#engine").on("change", function () {
        var b = jQuery("#bike-name-list").val();
        var e = jQuery("#engine").val();
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'ajax_object',
                'MARCA':b,
                'engine':e
            },
            success: function (data) {
                jQuery('#model').html('');
                jQuery('#model').html(data);
            }
        });
    });

    jQuery("#model").on("change", function () {
        var b = jQuery("#bike-name-list").val();
        var e = jQuery("#engine").val();
        var m = jQuery(this, "#model").val();
        jQuery.ajax({
            type: "POST",
            url: ajax_object.ajaxurl,
            data: {
                'action': 'ajax_object',
                'MARCA': b,
                'engine': e,
                'model': m
            },
            success: function (data) {
                jQuery("#year").html('');
                jQuery("#year").html(data);
            }
        });
    });

    jQuery("#year").on("change", function () {
        var y = jQuery("#year").val();
        if(!y)
            return false;
        var y = y.split('@');
        if(y[3]) {
            jQuery("#filter_number").val(y[3]);
            jQuery.ajax({
                type: "POST",
                url: ajax_object.ajaxurl,
                data: {
                    'action': 'ajax_object',
                    'img_filter': y[3]
                },
                success: function (data) {
                    jQuery("#drawing").attr('src', data);
                    console.log(data);
                }
            });
        }
        showInfo();
    });

    jQuery("#show_button").on('click', function () {
        showInfo();
    });

    jQuery("#filter_number").on("keyup", function () {
        var d = jQuery("#filter_number").val();
        if(d != null && d != '') {
            jQuery.ajax({
                type: "POST",
                url: ajax_object.ajaxurl,
                data: {
                    'action': 'ajax_object',
                    'img_filter': d
                },
                success: function (data) {
                    jQuery("#drawing").attr('src', data);
                    console.log(data);
                }
            });
        }
    });
});

function showInfo(){
    var name = jQuery('#filter_number').val();
    if(name.length < 5)
        return false;
    jQuery.ajax({
        type: "POST",
        url: ajax_object.ajaxurl,
        data: {
            'action': 'ajax_object',
            'filtr': name
        },
        success: function(data){
            jQuery(".bikes").html('');
            jQuery(".bikes").html(data);
        }
    });
}