i tried to adapt this tutorial:


for my plugin. When i didn't work i read that for wordpress you have use jQuery instead of $ and enqueue the script with wp_enqueue_script( 'jquery'); so i tried the following code in my main php:

add_action('wp_enqueue_scripts', 'callback_for_setting_up_scripts');
function callback_for_setting_up_scripts() {
    wp_register_style( 'mein-plugin', plugins_url( 'style.css', __FILE__ ) );
    wp_enqueue_style( 'mein-plugin' );
    wp_enqueue_script( 'jquery');

function sqlTest() {

    return '<input type="text" id="inp" name="inp"/></span>
            <div class="results"></div>
            <script type="text/javascript">

                        var inpval= jQuery(\'#inp\').val();
                            type: \'POST\',  
                            data: ({p : inpval}),
                            url: \'sql.php\',
                            success: function(data) {


add_shortcode("sql", "sqlTest");

and my sql.php looks like this:


$query=mysql_query("SELECT * FROM " . $table);


(I know that currently the query is independent from the user-input) Now, [sql] produces an input field, but when i enter something, nothing happens. What am i doing wrong?

Sorry i'm new to wordpress, jquery and ajax

  • Also in your console are you seeing errors. My biggest problem is you are building a javascript function outside of DOM, that can be a dire issue. You may want to try using $(window).on('keyup','#inp',function(){ – Cam Jan 31 '18 at 16:36
  • 3
    I would be deeply suspicious of that tutorial, the end result is a major security problem. If you need to make a request to WP, don't use a standalone file, use a REST API endpoint. Also look at the code and the variable names in your sql.php, nowhere do you connect to the server, and you use variables that don't exist – Tom J Nowell Jan 31 '18 at 16:39

See documentation

WordPress have admin-ajax.php file in wp-includes/ folder. Put in your data parametr action and create hooks:

add_action('wp_ajax_{your_action}', 'handler');
add_action('wp_ajax_nopriv_{your_action}', 'handler');

ajax.url parametr you can get by using wp_localize_script('YOUR SCRIPT handle', 'ajax', array('url'=> admin_url('admin-ajax.php')))

All code must looks like:

add_action( 'wp_enqueue_scripts', 'callback_for_setting_up_scripts' );
function callback_for_setting_up_scripts() {
    wp_register_style( 'mein-plugin', plugins_url( 'style.css', __FILE__ ) );
    wp_enqueue_style( 'mein-plugin' );
    wp_enqueue_script( 'ajax-sender', plugins_url( 'ajax-sender.js', __FILE__ ), array( 'jquery' ), null, true );
    wp_localize_script( 'ajax-sender', 'ajax', array(
        'url'   => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'my_nonce' ),
    ) );

Javascript file:

jQuery(function () {
    jQuery('#inp').keyup(function () {
        var inpval = jQuery('#inp').val();
            type: 'POST',
            data: {
                action: 'simple_wordpress_ajax',
                nonce: ajax.my_nonce,
                p: inpval
            url: ajax.url,
            success: function (data) {

And in php file

add_action('wp_ajax_simple_wordpress_ajax', 'simple_ajax_handler');
add_action('wp_ajax_nopriv_simple_wordpress_ajax', 'simple_ajax_handler');

function simple-wordpress-ajax(){
    check_ajax_referer('my_nonce', 'nonce', true);
    // your php code

    $return = array('html' => 'test'); // your data for return

Something like this.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.