I'm familiar with using ajax in the ordinary way with jQuery.
I've played around it for a while, but don't understand what Wordpress needs to get it to work...
What I have here is taken from some tutorial or article.
This is in functions.php (in a child theme):
// code to load jquery - working fine
// code to load javascript file - working fine
// ENABLE AJAX :
function add_ajax()
{
wp_localize_script(
'function',
'ajax_script',
array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
$dirName = get_stylesheet_directory(); // use this to get child theme dir
require_once ($dirName."/ajax.php");
add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php
add_action('template_redirect', 'add_ajax');
The jQuery itself is loading and working fine.
I have tried some basic ajax like the following:
jQuery(document).ready(function($){
$('a.link').click(function(){
$.ajax({
url: ajax_script.ajaxurl,
data: ({action : 'function1'}),
success: function(data){
$('#result').html(data);
}
});
return false;
});
});
Besides this, I don't know how I can test to see if it's even loaded correctly to begin with...
Any help here would be appreciated.
EDIT:
In firebug this error:
ReferenceError: ajax_script is not defined
url: ajax_script.ajaxurl,
Firstly, you should read this page thoroughly http://codex.wordpress.org/AJAX_in_Plugins
Secondly, ajax_script
is not defined so you should change to: url: ajaxurl
. I don't see your function1()
in the above code but you might already define it in other file.
And finally, learn how to debug ajax call using Firebug, network and console tab will be your friends. On the PHP side, print_r()
or var_dump()
will be your friends.
Use wp_localize_script and pass url there:
wp_localize_script( some_handle, 'admin_url', array('ajax_url' => admin_url( 'admin-ajax.php' ) ) );
then inside js, you can call it by
admin_url.ajax_url
I thought that since the js file was already loaded, that I didn't need to load/enqueue it again in the separate add_ajax function.
But this must be necessary, or I did this and it's now working.
Hopefully will help someone else.
Here is the corrected code from the question:
// code to load jquery - working fine
// code to load javascript file - working fine
// ENABLE AJAX :
function add_ajax()
{
wp_enqueue_script(
'function',
'http://host/blog/wp-content/themes/theme/js.js',
array( 'jquery' ),
'1.0',
1
);
wp_localize_script(
'function',
'ajax_script',
array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
$dirName = get_stylesheet_directory(); // use this to get child theme dir
require_once ($dirName."/ajax.php");
add_action("wp_ajax_nopriv_function1", "function1"); // function in ajax.php
add_action('template_redirect', 'add_ajax');
I'm not allowed to comment, so regarding Shane's answer, keep in mind that
wp_localize_scripts()
must be hooked to wp or admin enqueue scripts. So a good example would be as follows:
function local() {
wp_localize_script( 'js-file-handle', 'ajax', array(
'url' => admin_url( 'admin-ajax.php' )
) );
}
add_action('admin_enqueue_scripts', 'local');
add_action('wp_enqueue_scripts', 'local');`
Personally i prefer to do ajax in wordpress the same way that i would do ajax on any other site. I create a processor php file that handles all my ajax requests and just use that URL. So this is, because of htaccess not exactly possible in wordpress so i do the following.
1.in my htaccess file that lives in my wp-content folder i add this below what's already there
<FilesMatch "forms?\.php$">
Order Allow,Deny
Allow from all
</FilesMatch>
In this case my processor file is called forms.php - you would put this in your wp-content/themes/themeName folder along with all your other files such as header.php footer.php etc... it just lives in your theme root.
2.) In my ajax code i can then use my url like this
$.ajax({
url:'/wp-content/themes/themeName/forms.php',
data:({
someVar: someValue
}),
type: 'POST'
});
obviously you can add in any of your before, success or error type things you'd like ...but yea this is (i believe) the easier way to do it because you avoid all the silliness of telling wordpress in 8 different places what's going to happen and this also let's you avoid doing other things you see people doing where they put js code on the page level so they can dip into php where i prefer to keep my js files separate.
Source: Stackoverflow.com