CODEWITHSUNDEEP
phpajaxwordpressplugins
iMed
iMed

Reputation: 113

Problem with my first basic wordpress plugin

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)

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.

Upvotes: 3

Views: 76

Answers (1)

Cyclonecode
Cyclonecode

Reputation: 30001

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.

Upvotes: 2

Related Questions