Question

I have this script that I found which allows me to have userside Ajax in WordPress using Jquery. It works great. But it needs to have a “Working…” indicator because when you click submit the user thinks nothing is happening. Here is the code, please help! I’ve been stuck on this for 2 days…

The ajax.js code:

function submit_step_1(){
var step = jQuery("input#name").val(); jQuery.post(ajax.ajaxurl, jQuery("#step_1_form").serialize(),
function(response){jQuery("#step_1_div").html(response);});
}

function submit_step_2(){
var step = jQuery("input#name").val(); jQuery.post(ajax.ajaxurl, jQuery("#step_2_form").serialize(),
function(response){jQuery("#step_2_div").html(response);});
}

The Ajax.php code

<?php

/*
Plugin Name: Ajax Frontend
Plugin URI: 
Description: A simplified ajax front end
Version: 2
Author: 
*/

wp_enqueue_script( 'ajax', plugin_dir_url( __FILE__ ) . 'ajax.js', array( 'jquery' ) );
wp_localize_script( 'ajax', 'ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

add_action( 'wp_ajax_hook_to_step_2', 'step_2m' ); add_action( 'wp_ajax_nopriv_hook_to_step_2', 'step_2m' );

add_action( 'wp_ajax_hook_to_step_3', 'step_3m' ); add_action( 'wp_ajax_nopriv_hook_to_step_3', 'step_3m' );

//Step 1  
function step_1m(){

    echo "<div id='step_1_div'>";
        echo "<form id='step_1_form'>";
            echo "<input id='name' name='name' value='name' type='text'>";
            echo "<input name='action' type='hidden' value='hook_to_step_2'>";
            echo "<input id='submit_button' value='Submit' type='button' onClick='submit_step_1();'>";
        echo "</form>"; 
    echo "</div>";

}

//Step 2
function step_2m(){

    echo "<div id='step_2_div'>";

        $name = $_POST['name'];
        echo $name;

        echo "<form id='step_2_form'>";
            echo "<input id='name' name='name' value='END OF PROCESS' type='text'>";
            echo "<input name='action' type='hidden' value='hook_to_step_3'>";
            echo "<input id='submit_button' value='STOP' type='button' onClick='submit_step_2();'>";
        echo "</form>";

        die();

    echo "</div>";

}

//Step 3
function step_3m(){

        $name = $_POST['name'];
        echo $name;

        die();  
}

add_shortcode("hw_ajax_frontend", "step_1m");

?>

Answer 1

Use something like this:

var loadingIndicator = $("#loading").hide();
loadingIndicator.ajaxStart(function() {
    loadingIndicator.show();
}).ajaxStop(function() {
    loadingIndicator.hide();
});