I display a list on my website with a custom database table :

$resultats = $wpdb->get_results(
    $wpdb->prepare( "SELECT photo, nom, prenom, titre_fr, departement_fr FROM {$wpdb->prefix}prfs" )
);

foreach ( $resultats as $resultatPrfs ) {}

Now, I have to create AJAX filters with select inputs. I've been trying many solutions since yesterday, but none of them work.

Currently, here is my functions.php file :

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/ajax.js', array('jquery'), false, true );

    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'load_states' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );

    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );

add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');
add_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');

My AJAX :

jQuery(function($) {
$('#departement_select').change(function () {
    var departement = $(this).val();
    console.log(departement);
    if(departement != '') {
        var data = {
            'action': 'get_states_by_ajax',
            'departementValue': departement,
            'security': blog.security
        };

        $.post(blog.ajaxurl, data, function(response) {
            $('.load-state').html(response);
            console.log(response);
        });
    }
});
});

And my page :

<div class="load-state"></div>

<?php

    function get_states_by_ajax_callback()
    {
        check_ajax_referer('load_states', 'security');
        $departement = $_POST['departementValue'];
        var_dump($departement);
        global $wpdb;
        $aStates = $wpdb->get_results($wpdb->prepare("SELECT nom FROM " . $wpdb->prefix . "profs WHERE departement_fr = %d", $departement));

        if ($aStates) {
            echo('yep');
        } else {
            echo('nope');
        }
        wp_die();
    }

?>

I have been going around a bit since yesterday even after reading many topics on this forum, would you have a solution ?

I display a list on my website with a custom database table :

$resultats = $wpdb->get_results(
    $wpdb->prepare( "SELECT photo, nom, prenom, titre_fr, departement_fr FROM {$wpdb->prefix}prfs" )
);

foreach ( $resultats as $resultatPrfs ) {}

Now, I have to create AJAX filters with select inputs. I've been trying many solutions since yesterday, but none of them work.

Currently, here is my functions.php file :

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/ajax.js', array('jquery'), false, true );

    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'load_states' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );

    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );

add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');
add_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');

My AJAX :

jQuery(function($) {
$('#departement_select').change(function () {
    var departement = $(this).val();
    console.log(departement);
    if(departement != '') {
        var data = {
            'action': 'get_states_by_ajax',
            'departementValue': departement,
            'security': blog.security
        };

        $.post(blog.ajaxurl, data, function(response) {
            $('.load-state').html(response);
            console.log(response);
        });
    }
});
});

And my page :

<div class="load-state"></div>

<?php

    function get_states_by_ajax_callback()
    {
        check_ajax_referer('load_states', 'security');
        $departement = $_POST['departementValue'];
        var_dump($departement);
        global $wpdb;
        $aStates = $wpdb->get_results($wpdb->prepare("SELECT nom FROM " . $wpdb->prefix . "profs WHERE departement_fr = %d", $departement));

        if ($aStates) {
            echo('yep');
        } else {
            echo('nope');
        }
        wp_die();
    }

?>

I have been going around a bit since yesterday even after reading many topics on this forum, would you have a solution ?

• php
• functions
• ajax
• javascript
• jquery

1 Answer 1

You need the function accessible to the AJAX hook when it's fired, so move the get_states_by_ajax_callback function to your functions.php