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.

I'm trying to get into grips in using AJAX in wordpress, the following code creates a form with an input box using the wordpress feature shortcode [ajaxf].

<?php
add_action( "wp_ajax_ajaxcf", "my_action_callback" );
add_action( "wp_ajax_nopriv_ajaxcf", "my_action_callback" );

function my_action_callback() {
    $whatever = intval( $_POST['fname'] );
    echo $whatever;
    die(); 
}
function ajax_contact_form() {
?>
<script type="text/javascript" >
jQuery(".submit").click(function() {
    jQuery.post(ajaxurl, $('#ajaxForms').serialize(), function(response) {
        alert('Got this from the server: ' + response);
    });
}); 
</script>

<form id="ajaxForms">   
    <label for="fname">First Name:</label>
    <input id="fname" name="fname" value="First Name" type="text" />
  </p>

  <p class="submit">
    <input name="action" type="hidden" value="ajaxcf" />
    <input id="submit_button" class="submit" value="Send" type="button" />
  </p>
</form>
<?php
    }
add_shortcode("ajaxcf", "ajax_contact_form");

I simply want to alert the response with jQuery but it doesn't seem to work and i have no idea why.

Help appreciated.

Thanks

share|improve this question

3 Answers 3

up vote 1 down vote accepted

This is just a simple javascript issue. When your javascript that attaches the click behavior to the form is parsed, the form element doesn't yet exist because it's further down the page, so it doesn't get attached. Either move the javascript below the form, wrap it in a jQuery(document).ready(), or use live.

EDIT - $('#ajaxForms').serialize(); should be jQuery('#ajaxForms').serialize();, you need to define ajaxurl in your javascript: var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";, otherwise your code works fine, tested here.

share|improve this answer
    
Hi Milo, I have moved the jQuery further down the page and even wrapped it around a jQuery document ready and the code still doesn't work, it wouldn't surprise me if there is an error within the jQuery. Matt –  Shoebox Jan 17 '12 at 2:03
    
@MattStrange - see edit above. –  Milo Jan 17 '12 at 2:33
    
Thanks man, works! One thing i don't understand is in the wordpress codex it says the admin-ajax.php is already included.. –  Shoebox Jan 17 '12 at 4:29

This question here might help you.

Basically, you need to make sure you specify an 'action' when you post you ajax request. In your code the action is 'ajaxcf'.

In your plugin/ theme's functions.php file you then need hook onto init a function that checks the action, checks any nonces if necessary and then calls the following;

 do_action( "wp_ajax_ajaxcf" );
 do_action( "wp_ajax_nopriv_ajaxcf" );

EDIT I've not checked the JavaScript side of things, see Milo's response. But wp_ajax_ajaxcf is not a default action, so you have to 'do' it.

share|improve this answer
    
Thanks Stephen for the reply, i have specified the action in the html form.. <input name="action" type="hidden" value="ajaxcf" /> –  Shoebox Jan 17 '12 at 1:57
    
Apologies, I missed that. See my comment on 'do_action' :D –  Stephen Harris Jan 17 '12 at 2:01
    
Kk, i'm working from the tutorial found on the wordpress codex, i'm not sure if the do_action is necessary... ?? codex.wordpress.org/AJAX_in_Plugins –  Shoebox Jan 17 '12 at 2:13
    
Hi, Matt - you're right, my mistake! –  Stephen Harris Jan 18 '12 at 12:09

There are lots of clues here on making this work, but none of the answers are voted up.

Can one of you guys make a clear example of the relationship of these values: 1. the id (or the action="") in the form, 2. the action: in the jQuery.ajax settigns 3. the name of the php function on the server side.

I've been looking at this for days now and can't get my server side to execute anything. I don't see any errors, but always get a response of 0 (zero) to my success: function.

Thanks, Ron

share|improve this answer

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.