Basic AJAX question

**Ryan** · 01-20-2010, 06:05 AM

I'm trying to learn some basic AJAX. But I'm darned if I can get nonces to work correctly.

Below is a cut-down, simplified version of what I'm trying to do. Basically, it allows users to sort some boxes on screen. And as they're sorted, that data is sent to process-sortable.php. Then it spits out a message in a box on the page. Nothing exciting and it does work ... except for when I try to use nonce protection on it. Then it just spits out -1 to indicate that the nonce was rejected.

Any ideas what I'm doing wrong?

index.php

PHP Code:

 <?php
require( '../../../wp-load.php' );
define( 'TEST_URL', get_bloginfo( 'wpurl' ) . '/wp-content/plugins/ajax_test/' );

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PixoPoint AJAX text</title>
    <script type='text/javascript' src='<?php echo get_bloginfo( 'wpurl' ); ?>/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=d24248fe4b0cd62086633fd42ef1019b'></script>
    <style type="text/css">
        #widgetbox div .handle {display:block;background:#ddd;padding:10px;width:150px;border:1px solid #aaa;margin:10px;}
        #widgetbox div#info {background:#ffcccc;color:#222;position:absolute;left:200px;top:0;padding:10px;font-family:verdana,sans-serif;font-size:30px;font-weight:bold;}
    </style>
</head>
<body>

<div id="widgetbox">
    <div id="listItem_1">
        <span class="handle">111111111</span>
    </div>
    <div id="listItem_2">
        <span class="handle">222222222</span>
    </div>
    <div id="listItem_3">
        <span class="handle">333333333</span>
    </div>

    <div id="info"></div>


<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery("#order").sortable({
            placeholder: "ui-selected",
            revert: false,
            tolerance: "pointer"
        });
        jQuery("#widgetbox").sortable({
            handle : '.handle',
            update : function () {
                var order = jQuery('#widgetbox').sortable('serialize');
                jQuery("#info").load("<?php
                    echo wp_nonce_url( TEST_URL . 'process-sortable.php?action=getorder', 'pixopoint_getorder' );
                ?>?"+order);
            }
        });
    });
    </script>

<script type='text/javascript' src='<?php echo get_bloginfo( 'wpurl' ); ?>/wp-admin/load-scripts.php?c=1&amp;load=hoverIntent,common,jquery-color,jquery-ui-core,jquery-ui-sortable,jquery-ui-tabs&amp;ver=61f28a5f9179fe02e40cff05d5fad5b6'></script>


</body>
</html>

process-sortable.php

PHP Code:

 <?php
define( 'DOING_AJAX', true );
require( '../../../wp-load.php' );


check_ajax_referer( 'pixopoint_getorder' );


echo '
    Yay! It worked :D
';

?>

**andreasnrb** · 01-20-2010, 07:08 AM

You have two ? in your load url. Last one should be an &

You know you can use admin-ajax.php right?
You pass along an action=youraction to the query
then you hook into add_action('wp_ajax_youraction') if the user has to be logged in
otherwise you hook into add_action('wp_ajax_nopriv_youraction');
Also you can use admin_url('loadscripts.php?....') to get urls to files in admin folder.

[EDIT]
Remembered you can use the parse_request hook also. Makes the calls prettier and you doesnt need to call the plugin file directly.
You add your querykey to query_vars and hook into parse_request and check if your key exists and if it has the correct value.

**Ryan** · 01-20-2010, 08:19 AM

Originally Posted by andreasnrb

You have two ? in your load url. Last one should be an &

Thanks :)

Originally Posted by andreasnrb

You know you can use admin-ajax.php right?

I've heard of it. I have no idea how to use it, and the tutorial I was following to do this didn't use it.

Originally Posted by andreasnrb

Also you can use admin_url('loadscripts.php?....') to get urls to files in admin folder.

Yup, I couldn't remember the function name though and since it's only a demo I didn't bother looking it up :p

**andreasnrb** · 01-20-2010, 09:06 AM

Your welcome.
I write for everyone so if I see something that can be improved upon I write :p.

jQuery().load(<?php echo admin_url('admin-ajax.php?action=youraction') ?>)

then add add_action('wp_ajax_youraction',callback) if the user need to be logged in or use action 'wp_ajax_nopriv_youraction' for not logged in uses.

**Ryan** · 01-20-2010, 09:50 AM

Oh, so I guess with that approach I don't need to go messing around with wp-load.php then?

**Otto** · 01-20-2010, 09:56 AM

Yes, exactly. Finding where wp-load is can be tricky.

**Ryan** · 01-20-2010, 10:08 AM

Originally Posted by Otto

Yes, exactly. Finding where wp-load is can be tricky.

I've started using file_exists() to track it down lately. It seems to work well since you can hunt up and down the tree. I'm not sure if that is the best way to do it, but it seems to be working well so far.

It would make total sense to avoid doing that for these AJAX calls though.

**Otto** · 01-20-2010, 04:20 PM

Yes, wp_ajax_nopriv_* is a LOT simpler.

See this for how it works on the admin side: http://codex.wordpress.org/AJAX_in_P...istration_Side

Now see this to see the slight change needed for non-admin side:
http://codex.wordpress.org/AJAX_in_P...er-Facing_Side

**Otto** · 01-20-2010, 04:27 PM

BTW, I've seen a lot of this sort of thing:

PHP Code:

 define( 'TEST_URL', get_bloginfo( 'wpurl' ) . '/wp-content/plugins/ajax_test/' )

Better way for your specific case. Especially when you're in a plugin file:

PHP Code:

 plugins_url('process-sortable.php', __FILE__ );

That gives you the happy fun URL right there. There's a lot of these functions: admin_url, includes_url, content_url... They come in handy.

**Ryan** · 01-20-2010, 05:12 PM

Originally Posted by Otto

PHP Code:

 plugins_url('process-sortable.php', __FILE__ );

Is there any advantage to that over just defining a constant at the start of the plugin and using it from there? That's what I normally do.

So something like this:

PHP Code:

 DEFINE( 'MY_PLUGIN_URL', WP_PLUGIN_URL . '/mypluginurl/' );

Then just used like this:

PHP Code:

 MY_PLUGIN_URL . 'process-sortable.php'

Thread: Basic AJAX question

LinkBack

Thread Tools

Display

Basic AJAX question

Posting Permissions