Problem with my first basic wordpress plugin - php

Question

I am trying to create my first worpress plugin!
Actually, the idea is when i click on the button, an ajax request is sent toward php file file (ajax-process.php ), it contains a very basic code to pull some data from database and then displaying it as an alert or other in my home page .
This is my plugin floder (inside wordpress plugins folder)
DB-Puller :
- DB-Puller.php
- ajax-process.php
And js (js_file.js) + css (css_file.css) folders.
Here what contains DB-Puller.php
<?php
/**
* Plugin Name: DB-Puller
* Plugin URI: https://my-web-site.com/
* Description: This is a my firt plugin, it(s allows to display data from database.
* Version: 0.1
* Author: Firest Last name
* Author URI: https://my-web-site.com/
* License: GPL3
*/
function scripts_files_enqueue_scripts() {
// Adding css file
wp_enqueue_style('css_file',plugins_url( 'css/css_file.css', __FILE__ ) );
// Adding JS file
wp_enqueue_script( 'js_file', plugins_url( 'js/js_file.js', __FILE__ ), array('jquery'), '1.0', true );
}
add_action('wp_enqueue_scripts', 'scripts_files_enqueue_scripts');
?>
And This what contains ajax-process.php
N.B : the database table is very basic, it contains just id + text columns
<?php
function my_ajax_action_callback()
{
if (isset($_POST['req']))
{
global $wpdb;
$quer = $wpdb->get_results( "SELECT * FROM wp_custom_table_1" );
$arr = $quer[0]->text;
echo $arr;
die();
}
wp_die(); // required. to end AJAX request.
}
What contains js file
jQuery(function($){
$('body').prepend('<button class="btn" type="button">PULL DATA</button>');
$('button.btn').on('click', function()
{
$.ajax({
url:'http://127.0.0.1/wp522/wp-content/plugins/DB-Puller/ajax-process.php',
method:'POST',
data:{
req:'',
action:'my_ajax_action',
},
success:function(data)
{
alert(data);
},
error:function()
{
alert(erooor);
}
})
})
})
The Alert is sent empty ! Please help me to detect where is the problem!
Thank you.

Answer 1

Looking on the code it does not seem like the Wordpress way of doing this kind of thing.
First you need to include your ajax-process.php in the plugins main file e.g:
require_once plugin_dir_path(__FILE__) . '/ajax-process.php';
Second, you need to register your ajax callback like this:
add_action('wp_ajax_my_ajax_action', 'my_ajax_function');
add_action('wp_ajax_no_priv_my_ajax_action', 'my_ajax_function');
Then register the ajaxUrl in scripts_files_enqueue_scripts() so it accessible from your javascript. The admin-ajax.php file handles all ajax requests:
wp_localize_script(
'js_file',
'ajax',
array(
'ajaxUrl' => admin_url('admin-ajax.php'),
)
);
Then in your javascript you need to use the ajaxUrl and specifying the action which will tell Wordpress which callback should be triggered:
jQuery(function($) {
$('body').prepend('<button class="btn" type="button">PULL DATA</button>');
$('button.btn').on('click', function() {
$.post({
url: ajax.ajaxUrl,
data: {
req: '',
action: 'my_ajax_action',
},
success: function(data) {
alert(data);
},
error: function() {
alert('error');
}
});
});
Here is a good article AJAX in Plugins, explaining how to use ajax in a plugin.