'Error $wpdb when use Ajax in Plugin WordPress

I'm a beginner in development and wordpress. I create a plugin to display a dynamic carousel with the help of the generator https://wppb.me/. So when I select an option in my list, the right slide should be displayed.

Example :

Slide 1 Slide 2

For this, I saw that I need to use Ajax.

So I wrote the following code :

a part of my html views file :

     function display_front_slider()
{

    global $wpdb;
    $table_name = $wpdb->prefix . 'supersliderbdd';

        $results = $wpdb->get_results("SELECT * FROM $table_name");
        $resultByCategory = $wpdb->get_results("SELECT * FROM $table_name ORDER BY id ASC LIMIT 0,1"); 
        foreach($resultByCategory as $print) {
            echo"
                    <div class='carousel-item active'>
                        <img src='$print->image' class='d-block w-100' alt='...'>
                            <div class='col-10 col-md-3 p-4 bg-white bg-text-slider'>
                                <h1 class='h2 mb-4'>$print->title</h1>"
                                ?>

                                <select class='form-select' name='categorySelected' id='catSelected'>
                                <option selected>Sélectionnez votre activité</option>";
                            <?php
                                foreach($results as $print) {
                                    echo"<option value='$print->category' id='catSelected'>$print->category</option>";
                                }   

                                echo"
                                </select>
                                <p class='mt-3' id='demo'></p>
                            
                            </div>
                    </div>";        
        }

        echo "  </div>
        </div>";

var_dump($wpdb);
}

add_shortcode("superslider", "display_front_slider");

Javascript / Ajax :

(function( $ ) {
    $(document).ready(function(){
    $('.form-select').change( function() {
       var urlAjx = 'http://superslidertest.local/wp-content/plugins/superslider/public/class-superslider-public.php';
       var category = $("#catSelected").val();
     
       var data = {category:category};
     
       $.ajax({ 
          url:      urlAjx,
          dataType: "json",
          type:     "POST",
          data:     data,
          async:    false,
          success:  function(reponse){
                     $('#demo').html(reponse);
                    },
          error:    function(jqXHR, textStatus){
                    var error = formatErrorMessage(jqXHR, textStatus);
                    alert('error :' + error);
                   }
         }); 
         console.log(data);
         console.log(reponse);
    }); 
       
       
       function formatErrorMessage(jqXHR, exception) {
         if (jqXHR.status === 0) {
             return ('Not connected.\nPlease verify your network connection.');
         } else if (jqXHR.status == 404) {
             return ('The requested page not found. [404]');
         } else if (jqXHR.status == 500) {
             return ('Internal Server Error [500].');
         } else if (exception === 'parsererror') {
             return ('Requested JSON parse failed.');
         } else if (exception === 'timeout') {
             return ('Time out error.');
         } else if (exception === 'abort') {
             return ('Ajax request aborted.');
         } else {
             return ('Uncaught Error.\n' + jqXHR.responseText);
         }
     }
    });

})( jQuery );

PHP (makes an sql query and returns the result to the js file)

<?php

    global $wpdb;
    $table_name = $wpdb->prefix . 'supersliderbdd';
    
    var_dump( $wpdb);
 
    $category = isset($_POST['category'])?$_POST['category']:NULL;
    
    if($category){

    $sql =  $wpdb->prepare("SELECT id, title, text, category, image FROM $table_name WHERE category= %s", $category);
    

    $result = $wpdb->get_results($sql);
    
    
    }
    
 
    echo json_encode($result);

The problem is that the global $wpdb is not recognized in my getCategorySelected.ajx.php file. While in the html views file, it works

Can you help me ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source