$("form").submit(function() { if ($("#content") != null) { $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>'); } return true; }); The above works fine on Chrome but does not work on Firefox. Not sure why but in Firefox the form is not actually submitted. The div replace works but no love on the submit, the page just stays idle.
The intent here is to capture a submit of any form and throw a spinner (CSS not an image) onto the page until the post / put is returned and the spinner is wiped out by the actual content div on the page reload (non ajax).
Before:
After:
Code Removed (the post now appears):
<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post" role="form"> <!-- begin row --> <div class="row"> <!-- begin col-12 --> <div class="col-lg-6"> <div class="form-group"><label class="sr-only control-label" for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" placeholder="E-mail" type="email" value="" /></div> </div> <div class="col-lg-6"> <div class="form-group"><label class="sr-only control-label" for="user_password">Password</label><input class="form-control" id="user_password" name="user[password]" placeholder="Password" type="password" /></div> </div> </div> <!-- end row --> <!-- begin row --> <div class="row"> <!-- begin col-12 --> <div class="col-md-12 center"> </br> </div> </div> <!-- end row --> <!-- begin row --> <div class="row"> <!-- begin col-12 --> <div class="col-md-12 center"> <input class="btn" name="commit" type="submit" value="Sign in" /> <div class="m-t-20"> <a href="/users/password/new">Forgot your password?</a><br/> <a href="/users/confirmation/new">Didn't receive confirmation instructions?</a><br/> <a href="/users/unlock/new">Didn't receive unlock instructions?</a><br/> </div> </div> </div> <!-- end row -->
<script> $(document).ready(function () { App.init(); $("form").submit(function(){ if ($("#content") != null) { $("#content").replaceWith('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>'); } return true; alert("Submitted"); }); }); $(function () { var hash = window.location.hash; hash && $('ul.nav a[href="' + hash + '"]').tab('show'); }); UPDATE:
Ok so i am an idiot but for some reason this didn't cross my mind. What is happening is that the #content div includes the form i am replacing. So the mystery to me is why that worked in Chrome / IE and not in Firefox?
If i use the following it works but i get some dangling form elements:
$("form").submit(function(){ if ($("#content") != null) { $("#content").append('<div id="page-loader" class="fade in"><span class="spinner"></span><span class="spinner-text center">We are running as fast as our little ninja feet can go...</span></div>'); } return true; });