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 wrote a plugin to send an invitation to a friend and am submitting a form using AJAX and used the tips talked about in 5 tips for using AJAX in wordpress and another article referenced in the AJAX in plugins wordpress codex page.

I have now got the relevant code executing and sending an email as expected however the page reloads before the AJAX call finishes.

The relevant PHP code is here:

<?php
define( 'SEND_INVITATION_MIN_WORDPRESS_VERSION', '3.1.1' );
define( 'SEND_INVITATION_PLUGIN_URL', plugins_url( '', __FILE__ ) );

// Tie into WordPress Hooks and any functions that should run on load.
//
add_action( 'init', array( 'NC_SendInvitation', 'send_invitation_init' ) );

class NC_SendInvitation {
    protected $nonce_name = 'send_invitation';
    protected $post_url = '';

    public static function send_invitation_init() {
        new self;
    }

    public function __construct() {
        $this->send_invitation_head();
        $this->send_invitation_check_wordpress_version();
        add_action( 'show_invitation_form', array( $this, 'send_invitation_get_form' ), 10, 1 );

        // Add AJAX actions
        // Serves logged in users
        add_action( 'wp_ajax_form_action', array( $this, 'send_invitation_handle_submit' ) );

        // Serves non-logged in users
        add_action( 'wp_ajax_nopriv_form_action', array( $this, 'send_invitation_handle_submit' ) );
    }

    public function send_invitation_head() {
         // Add script that for handling AJAX POST request to the head
        wp_enqueue_script( 'send-invitation-ajax-handle',
            plugins_url( 'js/ajax.js', __FILE__ ),
            array( 'jquery' ) );

        // Localise script find out what this does
        wp_localize_script( 'send-invitation-ajax-handle',
            'send_invitation_ajax_script',
            array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

        // Add the script for showing and hiding the form to the head
        wp_enqueue_script( 'send-invitation-js',
            plugins_url( 'js/send-invitation.js', __FILE__ ),
        array( 'jquery' ) );

        // Add the CSS that styles the form to the head
        wp_enqueue_style( 'send-invitation',
            plugins_url( 'css/send-invitation.css', __FILE__ ) );
    }

    public function send_invitation_check_wordpress_version() {
        global $wp_version;

      $exit_msg = 'Send Invitation requires version '
    . SEND_INVITATION_MIN_WORDPRESS_VERSION
    . 'or newer <a href="http://codex.wordpress.org/Upgrading_WordPress">Please
update!</a>';

    if ( version_compare( $wp_version, SEND_INVITATION_MIN_WORDPRESS_VERSION, '<') )
    {
        exit( $exit_msg );
    }
}

    public function send_invitation_get_form($post_url) {
    // TODO Try moving this into another file and include here using method above
    $send_invitation_form ='
    <h1><a href="#" onclick="show_form();">Send Invitation</a></h1>
    <form id="invitation-form" action="" method="post">
        <p>
            Your Email Address<br />
            <input type="text" name="your_email" />
        </p>
        <p>
            Email Address of Recipient<br />
            <input type="text" name="friends_email" />
        </p>
        <p>
            Subject<br />
            <input type="text" name="subject" />
        </p>
        <p>
            Message<br/>
            <textarea rows="10" cols="20" name="message">' . $post_url . '</textarea>
        </p>
        <input type="hidden" name="nonce" value="send_invitation" />
        <input type="hidden" name="action" value="form_action" />
        <p><input id="submit-button" type="submit" value="Send" onclick="send_invitation();" /></p>
    </form>
    <div class="response-area">
        <span class="error"></span>
        <span class="success"></span>
    </div>';

    echo $send_invitation_form;
}

    public function send_invitation_handle_submit() {
    $success = __('OK');
    $error = __('NOT OK');
    if (!empty($_POST)) {
        try {
            error_log('Inside if', 0);
            $to = $_POST['friends_email'];
            $subject = $_POST['subject'];
            $message = $_POST['message'];

            // TODO Suppress error message with @
            $send_result = wp_mail($to, $subject, $message);
            $feedback = $send_result ? $success : $error;
        }
        catch( Exception $e ) {
            $feedback = "Catch: " . $e->getMessage();
        }
    } else {
        $feedback = "Error: " . $error;
    }
    echo $feedback;
    exit;
    // Do not forget to exit
}
?>

The relevant javascript code is here:

function send_invitation() {
    alert("got here");
    jQuery.post(send_invitation_ajax_script.ajaxurl,
        jQuery('#invitation-form').serialize(),
        function(response) {
            alert('Response: ' + response);
            jQuery('.response-area .success').html(response);
        }
    );
}

Another problem I am seeing is that the POST request to the ajaxurl shows up red in firebug but it disappears quickly and I cannot see what is happening but the correct PHP functions are executing but no response comes back and all I get is page reload once the request is sent.

I am not sure why this is the case but I have tried debugging this for a while and could not find a solution.

Thanks in advance. nav

share|improve this question
add comment

3 Answers 3

you should use

return false;

at the end of the js function send_invitation() to prevent default reload action

share|improve this answer
    
Thank you for your reply but I am afraid this did not change anything. The page still reloads, the email is still sent and the call to admin-ajax.php still shows up red on firebug. –  navanitachora Mar 10 '12 at 7:45
add comment
up vote 0 down vote accepted

I solved this by using ajaxForm instead which does not suffer from any reload problems. Moreover, it is also included with a wordpress as an available plugin so its well integrated.

share|improve this answer
add comment

@navanitachora's could you please elaborate on your "using ajaxForm instead" answer? Did you simply use it instead of .post? To me the documentation is not clear on the ajaxForm plugin site and how to use the action: option (which I think is an invention of wordpress.

Thanks, Ron

share|improve this answer
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.