Using AJAX in a plugin to submit form - REALLY confused

Question

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!

Answer 1

Things you can check:

1. View the page source, and look for your js files, if they're included or not, and whether their order is proper.
2. Use console.log(SwoonAjax.ajaxurl) to check if you're getting the proper path in your js file.
3. In Firebug, switch to Console tab, and then try firing your AJAX request. You'll see the processing here, and errors, if any.
4. Try using jQuery's 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') to plugins_url('js/swoon-ajax-form.js', __FILE__), this will give you the correct plugin folder.

Answer 2

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?

$('#entry_swoon_form').submit(functions() {
    var data = $(this).serialize();
    $.ajax({
        type: 'post',
        url: ajaxurl,
        dataType: 'json',
        data: data + '&action=swoons_submit_action',
        cache: false,
        success: function(response){
            console.log(response);
        }
    }); 
});