Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
add comment

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
    
Thanx! I checked the console in FireBug and it is telling me this "[jquery.form] terminating; zero elements found by selector" The order of my JS files is correct and the path of SwoonAjax.ajaxurl is correct as well. I'll try out the jQuery.post method instead and see if I have better luck. –  dkmojo Oct 16 '11 at 13:41
    
I added my new JS code for the .post method but it is failing as well. Not sure what the problem may be. My ajaxurl is all in red (in firebug) when I click the submit button and the page still reloads normally. –  dkmojo Oct 16 '11 at 14:11
    
I added the new JS code and it almost works. Just need to get my form field values to send to the PHP function. –  dkmojo Oct 16 '11 at 15:04
    
I got it to function! Had a problem with my PHP function, for some reason I deleted the _POST and left the $ in my variable assignments. All better now. Thanx for the help! –  dkmojo Oct 16 '11 at 17:41
    
Congrats my friend! I know its kinda tricky to debug AJAX. Glad I could help! :) –  Rutwick Gangurde Oct 17 '11 at 3:15
add comment

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);
        }
    }); 
});
share|improve this answer
    
I actually solved this with a fix to my PHP function ds_ajax_swoons_form_submit - I had deleted the _POST text from my variable assignments for some reason. Thanx –  dkmojo Oct 16 '11 at 17:42
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.