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 having trouble getting AJAX and jQuery to work with WP, and wondering if someone can point me in the right direction.

I have a form, and I want to pass the data from the form to a PHP function, where the data is returned and a <div> is created with the data manipulated by a PHP function. I've got a version working outside of WP, but I can't seem to port it.

I've followed many tutorials, and nothing seems to work. I've got the following code, it should simply create an alert window with the data from the form , with "hello" prepended, but the JS function never even gets called. It keeps adding ?name=name to the page URL.

I've also tried creating a seperate JS file, and loading the script with..

wp_enqueue_script(
'myaddwordscript',
plugins_url() . '/MyPlugin/script.js',
array( 'jquery' )

Any help getting it to work is greatly appreciated.

<?php
/**
 * Plugin Name: Addword
 * Plugin URI: Addword
 * Version: 1.0
 */


/**
 * Make sure jquery is loaded
 */
function add_to_header() {
    wp_enqueue_script('jquery'); 
} 
add_action( 'wp_enqueue_scripts', 'add_to_header' );


/**
 * Add shortcode to show form and script
 */

function add_word( ) {      

$script = "
<script>
jQuery('#ajax_form').bind('submit', function() {
    alert('clicked');
    var form = jQuery('#ajax_form');
    var data = form.serialize();
    data.action = 'add_word_to_form'
    jQuery.post('/wp-admin/admin-ajax.php', data, function(response) {
        alert(data);           
    });
    return false;
});
</script>";

$form ='
<form class="form" id="ajax_form">                            
    <input type="text" name="name" id="name"  placeholder="Word Goes Here" required="">
    <input type="submit" value="Submit" id="submitaddword">
</form>';

return $script.$form;


}
add_shortcode( 'addword', 'add_word' );


/** 
 * Set up AJAX call to add word
 */
add_action("wp_ajax_add_word_to_form", "add_word_to_form");
add_action("wp_ajax_nopriv_add_word_to_form", "add_word_to_form");

function add_word_to_form ($data)
{
    return "Hello".$data;

}


?>
share|improve this question
    
Two things I noticed are that it looks like your bind function call is not properly closed, and you need to make sure you account for jQuery running in noConflict mode. See here: codex.wordpress.org/Function_Reference/… –  czerspalace Mar 13 at 22:15
    
@czerspalace - Oops. I've edited my original post, but I am still getting the same error. Thanks. –  Adam Mar 13 at 22:21
    
Do you see any errors in your console? Another possible issue is that your add_shortcode callback function should return a string instead of echo'ing codex.wordpress.org/Function_Reference/add_shortcode –  czerspalace Mar 13 at 22:26
    
@czerspalace Thanks for looking into it. I've no errors in the console, and I've changed the shortcode to return instead of echoing (in my OP too), but still no joy! –  Adam Mar 13 at 22:39
    
It seems the button isn't binding. If I add alert('clicked'); as the first line in the .bind function, before grabbing the form data, the alert never opens. –  Adam Mar 13 at 22:49

1 Answer 1

up vote 0 down vote accepted

Wrap your javascript code with document.ready, and if it works I would suggest going back to putting this in an external file

jQuery(document).ready(function(){
    jQuery('#ajax_form').on('submit', function(e) {
        e.preventDefault();
        console.log('Here');
        var form = jQuery('#ajax_form');
        var data = form.serialize();
        data.action = 'add_word_to_form'
        jQuery.post('/wp-admin/admin-ajax.php', data, function(response) {
            alert(data);           
        });
        //return false;
    });
});
share|improve this answer
    
Perfect. So it was trying to bind before the page had loaded properly. Thanks! –  Adam Mar 13 at 23:31

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.