Ajax Call not Working in Plugin

Question

I've been developing a website using WP and to display some database information in the front-end of the site i've created a plugin. Right now i want to include a filtering function for that same information using the plugin, but it does not work.

This is the file where i've created the filters, called show.php

<div class="container">
    <div class="row">
        <br />
        <div class="col-md-3">                              
            <div class="list-group">
                <h6>Modo de Confeção</h6>
                <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
                <?php

                $query =  "SELECT * FROM win_gab_modo_confecao ORDER BY designacaoModoConfecao";
                $result = $wpdb->get_results($query);
                foreach($result as $row)
                {
                ?>
                <div class="list-group-item checkbox" style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector modoconf" value="<?php echo $row->idModoConfecao ?>"  > <?php echo $row->designacaoModoConfecao ?></label>
                </div>
                <?php
                }

                ?>
                </div>
            </div><br>

            <div class="list-group">
            <h6>Modo de Serviço</h6>
                <div style="overflow-y: auto; overflow-x: hidden;">
                <?php

                $query2 =  "SELECT * FROM win_gab_modo_servico ORDER BY designacaoModoServico";
                $result2 = $wpdb->get_results($query2);
                foreach($result2 as $row2)
                {
                ?>
                <div class="list-group-item checkbox" style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector modoserv" value="<?php echo $row2->idModoServico ?>"  > <?php echo $row2->designacaoModoServico ?></label>
                </div>
                <?php
                }

                ?>
                </div>

            </div><br>
            
            <div class="list-group">
            <h6>Sub Categoria 1</h6>
                <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
                <?php

                $query3 =  "SELECT * FROM win_gab_sub_categorias WHERE subCategoria1 = '1' ORDER BY designacaoSubCategoria";
                $result3 = $wpdb->get_results($query3);
                foreach($result3 as $row3)
                {
                ?>
                <div class="list-group-item checkbox"  style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector sub1" value="<?php echo $row3->idSubCategoria ?>"  > <?php echo $row3->designacaoSubCategoria ?></label>
                </div>
                <?php
                }
                ?>  
                </div>

            </div><br>

        
            <div class="list-group">
            <h6>Sub Categoria 2</h6>
                <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
                <?php

                $query3 =  "SELECT * FROM win_gab_sub_categorias WHERE subCategoria2 = '1' ORDER BY designacaoSubCategoria";
                $result3 = $wpdb->get_results($query3);
                foreach($result3 as $row3)
                {
                ?>
                <div class="list-group-item checkbox"  style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector sub2" value="<?php echo $row3->idSubCategoria ?>"  > <?php echo $row3->designacaoSubCategoria ?></label>
                </div>
                <?php
                }
                ?>  
            </div>
        </div>

        <div class="col-md-9">
            <br />
            <div class="row filter_data">
            </div>
        </div>
    </div>
</div>

Right after this is where the problem is i believe. We begin the JS instructions that will call a file in the plugin's directory called fetch_data.php.

    $(document).ready(function(){

filter_data();

function filter_data()
{
    $('.filter_data').html('<div id="loading" style="" ></div>');
    var action = 'fetch_data';
    var minimum_price = $('#hidden_minimum_price').val();
    var maximum_price = $('#hidden_maximum_price').val();
    var modoconf = get_filter('modoconf');
    var modoserv = get_filter('modoserv');
    var sub1 = get_filter('sub1');
    var sub2 = get_filter('sub2');


    $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, modoconf:modoconf, modoserv:modoserv, sub1:sub1, sub2:sub2},
        success:function(data){
            $('.filter_data').html(data);
        }
    });
}

function get_filter(class_name)
{
    var filter = [];
    $('.'+class_name+':checked').each(function(){
        filter.push($(this).val());
    });
    return filter;
}

$('.common_selector').click(function(){
    filter_data();
});

$('#price_range').slider({
    range:true,
    min:1000,
    max:65000,
    values:[1000, 65000],
    step:500,
    stop:function(event, ui)
    {
        $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
        $('#hidden_minimum_price').val(ui.values[0]);
        $('#hidden_maximum_price').val(ui.values[1]);
        filter_data();
    }
}); 

});

Following this code, it calls the fetch_data.php like i mentioned above:

global $wpdb;

if(isset($_POST["action"]))
{
    $query = "
        SELECT * FROM win_gab_ficha_tecnica WHERE idFichaTecnica != '0' 
    ";
    if(isset($_POST["modoconf"]))
    {
        $conf_filter = implode("','", $_POST["modoconf"]);
        $query .= "
         AND modoConfecaoFichaTecnica IN('".$conf_filter."')
        ";
    }
   
    if(isset($_POST["modoserv"]))
    {
        $serv_filter = implode("','", $_POST["modoserv"]);
        $query .= "
         AND modoServicoFichaTecnica IN('".$serv_filter."')
        ";
    }
    
    if(isset($_POST["subcat1"]))
    {
        $subcat1_filter = implode("','", $_POST["subcat1"]);
        $query .= "
         AND subCategoria1 IN('".$subcat1_filter."')
        ";
    }
    
    if(isset($_POST["subcat2"]))
    {
        $subcat2_filter = implode("','", $_POST["subcat2"]);
        $query .= "
        AND subCategoria2 IN('".$subcat2_filter."')
        ";
    }
    
$result = $wpdb->get_results($query);
$total_row = $wpdb->rowCount();
    $output = '';
    if($total_row > 0)
    {
        foreach($result as $row)
        {
            

    $output .= '
                <div class="col-sm-4 col-lg-3 col-md-3">
                    <div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:450px;">
                        <img src="image/'. $row['fotografiaFichaTecnica'] .'" alt="" class="img-responsive" >
                        <p align="center"><strong><a href="#">'. $row['nomeFichaTecnica'] .'</a></strong></p>
                        <p>Modo Confeção: '. $row['modoConfecaoFichaTecnica'].' MP<br />
                        Modo Serviço: '. $row['modoServicoFichaTecnica'] .' <br />
                        Sub-Categoria 1: '. $row['subCategoria1'] .' GB<br />
                        Sub-Categoria 2: '. $row['subCategoria2'] .' GB </p>
                    </div>
    
                </div>
                ';
            }
        }
        else
        {
            $output = '<h3>No Data Found</h3>';
        }
        echo $output;
    }

We've all the right calls in our plugin file for enqueuing scripts and all that stuff. When we load the wordpress page where this info is supposed to be displayed, the filtering simply does not work, and we get this console error:

jquery-1.10.2.min.js?ver=1.0:4 POST http://itamgabalgarve.pt/page-comidas/fetch_data.php 404 (Not Found)

Also, like i previosuly mentioned this is a plugin that displays the info in our custom-made theme. The page (in the theme) contains a function that calls the plugin and displays our info:

if (function_exists(get_comidas()))

Answer 1

You need to add the ajax callback action on your plugin file or themes functions.php like as below:

add_action( 'wp_ajax_fetch_data', 'fetch_data_callback' );
add_action( 'wp_ajax_nopriv_fetch_data', 'fetch_data_callback' );

then you need to put all the featch_data.php code inside the callback function 'fetch_data_callback' like as below:

function fetch_data_callback(){
//your function code goes here
wp_die() // need to add end of the function
}

In Jquery

 var action = 'fetch_data';

 $.ajax({
        url:"<?php echo admin_url( 'admin-ajax.php' ) ?>",
        method:"POST",
        data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, modoconf:modoconf, modoserv:modoserv, sub1:sub1, sub2:sub2},
        success:function(data){
            $('.filter_data').html(data);
        }
    });

Answer 2

Thanks for your replies, but my code is still not working. At this point i really don't know what to do, i've been doing some tests and none seem to work. Reaching out with some additional code for context:

The ajax call in the show.php file is the following right now:

<script>
$(document).ready(function(){

filter_data();

function filter_data()
{
    $('.filter_data').html('<div id="loading" style="" ></div>');
    var action = 'fetch_data';
    var modoconf = get_filter('modoconf');
    var modoserv = get_filter('modoserv');
    var sub1 = get_filter('sub1');
    var sub2 = get_filter('sub2');
    $.ajax({
   url:"<?php echo admin_url( 'admin-ajax.php' ) ?>",
   method:"POST",
   data:{action:action, modoconf:modoconf, modoserv:modoserv, sub1:sub1, sub2:sub2},
   success:function(data){
       $('.filter_data').html(data);
   }
   });
}

function get_filter(class_name)
{
    var filter = [];
    $('.'+class_name+':checked').each(function(){
        filter.push($(this).val());
    });
    return filter;
}

$('.common_selector').click(function(){
    filter_data();
});

});

Even though i've done everything like suggeste i still get the following error in both the plugin file or the functions file in my theme:

jquery-1.10.2.min.js?ver=1.0:4 POST http://itamgabalgarve.pt/wp-admin/admin-ajax.php 500 (Internal Server Error)

send @ jquery-1.10.2.min.js?ver=1.0:4
ajax @ jquery-1.10.2.min.js?ver=1.0:4
filter_data @ (index):323
(anonymous) @ (index):313
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

If you need any more piece of code let me know. Thanks