Page reload occurs before request finishes

Question

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

Answer 1

you should use

return false;

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

Answer 2

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.

Answer 3

@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