insert query on a custom table using ajax with jQuery plugin Jeditable

Question

I've read tons of post already but found no solution...

I'm tryin to implement Jeditable functionality in a plugin with this code:

jQuery(document).ready(function() {
    jQuery('.edit').editable('http://localhost/www/wp-content/plugins/my_plugin/save.php'
});

If in save.php I simply echo something, it will be returned to the textfield I was updating without problem. Problem is on how to insert it into the db... If I use this:

if (isset($_POST['id'])) {
    global $wpdb;
    $query = "INSERT INTO table (col1, col2, col3) VALUES ('%d', '%s', '%d')";
    $wpdb->query($wpdb->prepare($query, '10', $_post['value'], '0'));
    echo $_POST['value'];
}

I get the following error:

"FATAL ERROR: CALL TO A MEMBER FUNCTION QUERY() ON A NON-OBJECT IN [...] ON LINE 6"

(line 6 is $wpdb->query([...]);).

Now, what I understend from other posts is that I can't call save.php directly from AJAX. What I didn't get is how else should I do it. I tried all the solutions of those posts and read the official Codex page without success.

Answer 1

You should use the WordPress AJAX-API for those purposes instead of custom scripts. Your problem is, that in your script all the WordPress API-Objects are not loaded.

Here is an answer which describe the usage of the AJAX-API in a very similar case. There, a post is inserted to the database in the wpse_126886_ajax_handler() function. On the same way, you can of cause run any other query you want.

Edit due to new information from comments:

You could have mentioned, that »Jeditable« is a plugin for jQuery and there's a documentation for it.

Anyway, the documentation (Section: »Parameter reference«) of the jQuery plugin describes a way, you can pass more parameters to your script. But first of all, let me explain, how to enqueue your scripts and how to pass data (e.g. the nonce slug) to it:

/**
 * enqueue jquery, jquery-jeditable and custom script
 * and pass some data to
 *
 * @wp-hook wp_enqueue_scripts
 * @return void
 */
function wpse_135219_enqueue_scripts() {

    wp_register_script(
        'jquery-jeditable',
        plugin_dir_url( __FILE__ ) . 'js/jquery-jeditable.js',
        array( 'jquery' ),
        '1.7.1',
        TRUE
    );

    wp_register_script(
        'wpse-135219',
        plugin_dir_url( __FILE__ ) . 'js/wpse-135219.js',
        array( 'jquery-jeditable' ),
        '1.7.1',
        TRUE
    );

    $script_settings = array(
        'ajaxUrl' => home_url( '/wp-admin/admin-ajax.php' ),
        'nonce'   => wp_create_nonce( 'wpse_135219' ),
        'action'  => 'wpse_135219'
    );
    wp_localize_script(
        'wpse-135219',
        'wpSE135219',
        $script_settings
    );

    wp_enqueue_script( 'wpse-135219' );
}
add_action( 'wp_enqueue_scripts', 'wpse_135219_enqueue_scripts' );

These function resides in a plugin file named wpse-135221.php. The plugins file structure looks like this:

- wpse-135219-plugin/
--- js/
----- jquery-jeditable.js
----- wpse-135219.js
--- wpse-135219.php 

With wp_localize_script() you initialize a global javascript object named wpSE135219 where you find your nonce and even the ajax URL.

Here's an example on how to use it with Jeditable (wpse-135219.js):

( function( $ ) {
    'use strict';

    $( document ).ready( function() {
        var settings  = wpSE135219,
            params    = {
                wp_nonce : settings.nonce,
                action   : settings.action
            };

        $( '.edit' ).editable( settings.ajaxURL, {
            submitdata : params
        } );
    } );

} )( jQuery );

Now you have the following request parameter:

action    "wpse_135219"
id        "your_html_id"
value     "your_value"
wp_nonce  "3bd42174ec" // a wp nonce string

As shown in the referred answer above, the action you've to attach your ajax handler on must be admin_ajax_wpse_135219:

add_action( 'admin_ajax_your_form_action', 'wpse_135219_ajax_handler' );
function wpse_135219_ajax_handler() {
    // your query stuff goes here
    // don't forget to check $_POST[ 'wp_nonce' ]
}

To verify the request with the nonce use wp_verify_nonce()