How to add ajax to wordpress theme

Question

I've got a problem that I'm stuck on for days now... I'm trying to use a simple ajaxPOST function to send data to a MySQL database (not WP database).

This code is located within "single-post.php" in the theme, because it must be checked before every post.

$.ajax({ url: 'library/functions/admin_checkuser.php',
     data: {action: userID},
     type: 'post',
     success: function(output) {
                  alert(output);
     }
});

I'm simply sending a variable to a "admin_checkuser.php" script which in turn calls another script that take actions on the database.

This is the code for "admin_checkuser":

$userid = $_POST['action'];

echo $userid;//for testing
$oMySQL = new MySQL();
$query = "Select * FROM videotable WHERE uid = '$userid'";
$oMySQL->ExecuteSQL($query);
$bb = $oMySQL->iRecords;
$aa = $oMySQL->aResult;
echo $bb;

if ($bb == 0){
$query = "INSERT INTO videotable VALUES ('','$userid','true')";
$oMySQL->ExecuteSQL($query);
echo 'true';
    exit();

}else{
$sharing = mysql_result($aa,0,"share");
echo $sharing;
exit();

}

But I don't think the calls go through to the script. These scripts where tested outside of WordPress and did work, so it must be something in WordPress that blocking the ajax call. BTW, I tried placing the "admin_checkuser.php" in many diffrent folders but nothing worked.

Thanks in advance.

Answer 1

You're much better off using the inbuilt Wordpress AJAX request.

So in your themes functions.php file, add your function to be called, for example:

function checkUser() {

    $userid = $_POST['user']; //validation also :)
    $oMySQL = new MySQL();
    $query = "Select * FROM videotable WHERE uid = '$userid'";
    $oMySQL->ExecuteSQL($query);
    $bb = $oMySQL->iRecords;
    $aa = $oMySQL->aResult;
    echo $bb;

    if ($bb == 0){
    $query = "INSERT INTO videotable VALUES ('','$userid','true')";
    $oMySQL->ExecuteSQL($query);
    echo 'true';
        exit();

    } else {
    $sharing = mysql_result($aa,0,"share");
    echo $sharing;
    exit();

    }
}

After that, you add your hook with connects to the inbuilt AJAX System

add_action('wp_ajax_check_user', 'checkUser');
add_action('wp_ajax_nopriv_check_user', 'checkUser');

wp_ajax_nopriv_%s allows it to be called from the front end.

And then, in your javascript file, you just fire off your ajax request.

$.post(ajaxurl, { action: 'check_user', user: userId }, function(output) {
     alert(output);
 });

If ajaxurl is undefined, you will need to create it in your template file, something like this should work, but there are other ways.

add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
<script type="text/javascript">
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>
<?php
}

Backend of wordpress does the rest.

It takes the action passed in the AJAX request, looks for the corresponding `wp_ajax(_nopriv)_%s hook and then calls the function that is assigned to the hook.

It will also pass in either the $_POST or $_GET depending on the type of AJAX request.

You can read a little more about using AJAX inside of Wordpress.

Answer 2

You should check your url for your ajax call.

Maybe use the full url instead of the relative one.

It could be because of the location of your theme makes the url incorrect. I'm assuming your ajax code is in your theme folder.

There are some wordpress functions that get the theme directory.

For example if you at this page http://yourwebpage/test/ then the ajax call will go here http://yourwebpage/test/library/functions/admin_checkuser.php. This I assume would be the incorrect location.

This is why you need to add the absolute url to your script. And if it is in your theme, you can use this method get_template_directory_uri() to get the template directory.

See here: http://codex.wordpress.org/Function_Reference/get_template_directory_uri