quick and simple ajax loading or please wait screen

Traditionally, you would show an animated gif when doing ajax call to let user know that they have to wait to see some results. We do this by showing and hidding the animated gif in a div for example.

Actually if you are rushing for time, a quicker and simpler solution is to change the mouse cursor. Not that fancy but it works. Users should be familiar with different types of mouse pointer. In the jQuery.ajax function for example, we can do something like so:

 jQuery('*').css('cursor','wait');

and after the ajax call

 jQuery('*').css('cursor','auto');

wordpress ajax login without plugin

most of the ajax wp-login plugins out there are offered as widgets. There are times when we we want a simple and encapsulated solution within the template files. All the javascript is encapsulated within the sidebar.php for example and we don’t need to clutter our plugin directory. This should be easily doable but I couldn’t find any quick snippets in google. perhaps most people were lazy and went for the plugin solution.

In sidebar.php for example

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#my-submit").click(function() {
// turn loading screen on
jQuery('#login-result').toggle();
var input_data = jQuery('#my-login-form').serialize();
jQuery.ajax({
type: "POST",
url: "<?php echo site_url('wp-login.php','login_post'); ?>",
data: input_data,
success: function(msg) {
// if login incorrect, wordpress will redirect user to its own login form. We scan for an error term.
var reg1 = /login_error/g;
if (reg1.test(msg)) {
jQuery('#message').html("<?php _e('Your login credentials is not correct. Please try again.'); ?>");
}
else {
// login success. redirect users to some page.
jQuery(location).attr('href', '/my-account/');
}
}
});
// turn loading screen off
jQuery('#login-result').toggle();
// prevent actual submission of form
return false;
});
});
</script>

And the form can be as simple as

<form name="login-form" id="my-login-form" style="padding-left: 60px;">
<p id="message" style="color:red"></p>
<label style="padding-right:10px;">Username</label><input type="text" name="log" id="my-user-login" value="<?php if ( isset( $user_login) ) echo esc_attr(stripslashes($user_login)); ?>" />

<label style="padding-right:10px;">Password</label><input type="password" name="pwd" id="my-user-pass" value="" />

<div style="float:left;">
<label><input name="rememberme" type="checkbox" id="my-rememberme" value="forever" /><?php _e('Remember me', 'woocommerce'); ?></label>
</div>
<div style="float:left;padding-left: 30px;">
<a href="<?php echo esc_url( wp_lostpassword_url( home_url() ) ); ?>"><?php _e('Lost Password?', 'woocommerce'); ?></a>
</div>
<div style="clear:both; padding: 20px 90px;">
<input type="submit" name="wp-submit" id="my-submit" value="<?php _e('Log In'); ?>"/>
</div>
<?php wp_nonce_field('my-nonce'); ?>
<input type="hidden" name="testcookie" value="1" />
<!-- this is your img loader -->
<div id="login-result" style="position:absolute; top:300px; left: 670px;">
<img src="/wp-content/plugins/nextgen-gallery/images/ajax-loader.gif"/>
</div>
</form>