how to use ajax in plugin admin area?

Question

I tried ajax to get some info a php inside my plugin.but getting error-call to undefined function. Ajax

jQuery.ajax({
        type: "POST",
        url: "<?php echo plugins_url();?>/tester/inc/test.php",
        data: { param: 'st1' }
      }).done(function( msg ) {
             alert( "Data Saved: " + msg );
     });

Error in alert

Data Saved: <br />
<font size='1'><table class='xdebug-error xe-fatal-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Fatal error: Call to undefined function add_action() in E:\wamp1\wamp\www\wp_twentythirteen\wp-content\plugins\tester\inc\test.php on line <i>7</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0007</td><td bgcolor='#eeeeec' align='right'>254944</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='E:\wamp1\wamp\www\wp_twentythirteen\wp-content\plugins\tester\inc\test.php' bgcolor='#eeeeec'>..\test.php<b>:</b>0</td></tr>
</table></font>

test.php

<?php
function aj()
{
 echo "hello";
echo plugins_url();
}
add_action('wp_ajax_my_action','aj'); 
add_action('wp_ajax_nopriv_myFunction','aj'); 

 ?>

i think the error denote like am not inside wordpress. Any idea?

Answer 1

Please, avoid the use of require('../../../wp-load.php'); and things like that as suggested in other answers. You should always use the Wordpress AJAX way. It is really easy and you will have all Wordpress engine loaded in your PHP script.

Just three considerations:

1. You have to send the ajax request to ...wp-admin/admin-ajax.php. ajaxurl is a javascript var that is always defined in the admin area and it contains the correct url to the admin-ajax.php file in the current Wordpress instalation. You can use ajaxurl directly in your javascript in the admin area. I've seen that you send the ajax request to a different URL.
2. In the sent data you have to inclue the action var. The action var contains the name of a previously registered PHP function by your plugin/theme. This function will handle the ajax request. I've read your code and you defined the ajax function in your PHP but the action is missed in your javascript.
3. The example bellow is for the admin area as you asked about admin area. In the frontend is a little different but still really easy; if you need a example to make the ajax request in the frontend just say and I will post it.

Example:

In your PHP (plugin/theme):

add_action('wp_ajax_my_action', 'my_ajax_action_function');

function my_ajax_action_function(){

    $reponse = array();
    if(!empty($_POST['param'])){
         $response['response'] = "I've get the param a its value is ".$_POST['param'].' and the plugin url is '.plugins_url();
    } else {
         $response['response'] = "You didn't send the param";
    }

    header( "Content-Type: application/json" );
    echo json_encode($response);

    //Don't forget to always exit in the ajax function.
    exit();

}

Your backend javascript should be something like this (remember that ajaxurl is always defined by Wordpress in the admin area):

jQuery.ajax({
    type: "POST",
    url: ajaxurl,
    data: { action: 'my_action' , param: 'st1' }
  }).done(function( msg ) {
         alert( "Data Saved: " + msg.response );
 });

Answer 2

You are not in a WordPress context. You've loaded the plugin file directly. That file will load, but not the rest of WordPress.

Use the AJAX API. This is what it was meant for. Don't use hacks that are no longer necessary like require/includeing WordPress Core files (wp-load.php, wp-blog-header.php, wp-settings.php, depending on which "tutorial" you read)

If the examples in the Codex are not enough to get you started, there are numerous examples on this site including 30-something I've written-- this one, in particular, which probably qualifies as one of several "duplicate questions".

Answer 3

You are right, because of the way you are making your AJAX call, WordPress is not being loaded. The proper way is to use ajaxurl as the URL, and set your action to be my_action by passing that as the value of the action parameter in your request data:

jQuery.ajax({
    type: "POST",
    url: ajaxurl,
    data: { action: 'my_action', param: 'st1' }
  }).done(function( msg ) {
         alert( "Data Saved: " + msg );
 });

See AJAX in Plugins for more information.