Having a bit of trouble using all the WordPress ajax hooks, and functions.
Been reading this post: 5 Tips for Using Ajax in WordPress
But became confused after trying all the code and applying it to an Ajax form.
I am calling a function from my plugin class to echo a from on the single posts pages for users to “Swoon” over. The form prints fine. Here’s the form code:
//the html form for the front end
function ds_swoons_form(){
global $post, $current_user;
get_currentuserinfo();
$form = '<div id="swoon-response">';
$form .= '</div>';
$form .= '<form id="entry_swoon_form" name="entry_swoon_form" action="" method="POST">';
$form .= '<input type="hidden" name="ds_postid" value="'.$post->ID.'" />';
$form .= '<input type="hidden" name="ds_userid" value="'.$current_user->ID.'" />';
$form .= '<input type="submit" value="Swoon" class="swoon-submit" />';
$form .= '</form>';
return $form;
}//end ds_swoons_form
My Enqueues:
wp_enqueue_script('json-form');
// embed the javascript file that makes the swoons AJAX request
wp_enqueue_script( 'swoon_ajax_request', plugins_url('ds-swoons/js/swoon-ajax-form.js'), array( 'jquery' ) );
// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'swoon_ajax_request', 'SwoonAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
//add the AJAX action
add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );
And my javascript:
jQuery('#entry_swoon_form').ajaxForm({
target: '#swoon-response',
dataType: 'html',
data: {
action: 'swoons_submit_action'
},
url: SwoonAjax.ajaxurl,
success : function(responseText) {
jQuery('#swoon-response').html('Swooned!');
}
});
I’m a newbie when it comes to AJAX so I may be way off on this. The article I read was good until I got to the end where it showed a sample ajaxForm request and I got lost.
The ajax form function never runs and the page just reloads. SO I am guessing that one of my enqueue functions is not correct.
Thanx in advance.
EDIT ——————————————————–
New jQuery.post method code – but it still not working
jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
jQuery.post(
// see tip #1 for how we declare global javascript variables
SwoonAjax.ajaxurl,
{
// here we declare the parameters to send along with the request
// this means the following action hooks will be fired:
// wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
action : 'swoons_submit_action',
//nonce for validation
//swoonNonce : SwoonAjax.swoonNonce,
// other parameters can be added along with "action"
postid : SwoonAjax.postid,
userid : SwoonAjax.userid
},
function( response ) {
alert( response );
}
);
});
console.log(SwoonAjax.ajaxurl)
});
I do get a really quick error in FireBug but I can’t see whats going on quick enough before the request ends. And no error remains after the .post has run. No data is being updated in the DB so I know it is not getting fired.
Thanx
EDIT 2 —————————————————————–
I’ve gotten the form to submit and it updates the DB using the following code:
jQuery(document).ready(function(){
jQuery('.swoon-submit').click(function(){
var $form = $( 'form#entry_swoon_form' ),
postid = $form.find( 'input[name="ds_postid"]' ).val(),
userid = $form.find( 'input[name="ds_userid"]' ).val();
jQuery.post(
// see tip #1 for how we declare global javascript variables
SwoonAjax.ajaxurl,
{
// here we declare the parameters to send along with the request
// this means the following action hooks will be fired:
// wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
action : 'swoons_submit_action',
//nonce for validation
//swoonNonce : SwoonAjax.swoonNonce,
// other parameters can be added along with "action"
ds_postid: postid,
ds_userid: userid
},
function( response ) {
alert( response );
}
);
return false;
});
However: I cannot seem to get the form field values (hidden) to be sent to the PHP function for DB insertion. The info is in the Firebug console as being sent but no information gets to the PHP function. I think it has something to do with how I am sending the fields to the PHP function but am unsure. Thanx!
Things you can check:
js
files, if they’re included or not, and whether their order is proper.console.log(SwoonAjax.ajaxurl)
to check if you’re getting the proper path in yourjs
file.Console
tab, and then try firing your AJAX request. You’ll see the processing here, and errors, if any.jquery.post
method for AJAX. It’s easier.These checks will help you identify the problem.
A quick tip: Change
plugins_url('ds-swoons/js/swoon-ajax-form.js')
toplugins_url('js/swoon-ajax-form.js', __FILE__)
, this will give you the correct plugin folder.As you used this function to bind the WordPress ajax
add_action( 'wp_ajax_swoons_submit_action', array('DS_Swoons','ds_ajax_swoons_form_submit') );
, then you need to pass an action variable named swoons_submit_action. Otherwise WordPress admin-ajax.php will reject it.Would you mind to use this snippet to submit data?