Due to Safari (7.0.1 / Mac OS), I'm struggling with a simple Javascript problem. I submit a form, and I want to display an icon during the page loading.
From what I can see, it's not related to the javascript itself, but more to the onsubmit behavior (if I move it outside the function, it does the expected job when loading the page instead of at "submit" time).
This is my code (working perfectly on Chrome and Firefox). Any idea?
<html> <body> <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/> <form method="POST" action="js.php" onsubmit="loadLoader()"> <input type="submit" value="Go"/> </form> <script type="text/javascript"> function loadLoader(){ document.getElementById('loadingImage').style.display = 'block'; return true; } </script> </body> </html> 3 Answers
Answers 1
Sorry I can't comment your post due my reputation. As you JS code is non blocking I tried to move it to the head and added javascript before the function call. I tested it in Safari 7.0.1 and it worked.
<html> <head> <script type="text/javascript"> function loadLoader() { alert('loadLoader called'); document.getElementById('loadingImage').style.display = 'block'; return true; } </script> </head> <body> <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;" /> <form method="POST" action="js.php" onsubmit="javascript:loadLoader()"> <input type="submit" value="Go" /> </form> </body> </html> Answers 2
You can call function onClick attribute of Button and by Id of Button.
option 1: With OnClick attribute
<html> <body> <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/> <form method="POST" action="js.php"> <input type="submit" value="Go" onclick="loadLoader()"/> </form> <script type="text/javascript"> function loadLoader(){ document.getElementById('loadingImage').style.display = 'block'; return true; } </script> </body> </html> Option 2: Button Click event by Id
<html> <body> <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/> <form method="POST" action="js.php"> <input id="btnsubmit" type="submit" value="Go"/> </form> <script type="text/javascript"> $("#btnsubmit").click(function() { document.getElementById('loadingImage').style.display = 'block'; return true; }); </script> </body> </html> Option 3: By Form Submit Method
<html> <body> <img id="loadingImage" src="assets/images/loadingIcon.png" style="display:none;"/> <form method="POST" action="js.php"> <input id="btnsubmit" type="submit" value="Go"/> </form> <script type="text/javascript"> $('form').submit(function() { document.getElementById('loadingImage').style.display = 'block'; return true; }); </script> </body> </html> Answers 3
In first, let's talk about what's going on when you submit a form. Browser calls onsubmit method and after starts to prepare POST request and sends it to the server. After POST request browser get a new html page, browser unload old page and load new one.
You wouldn't see the loadingImage if whole process is too fast. But if server handles POST request slowly, you will see loading image on old page before browser will render new page.
You can try to add console.log and turn on a console flag to prevent cleaning for logs and you will see 'show loader', but you will not see image, because browser has been loading new page and handling it.
function loadLoader(){ console.log('show loader'); document.getElementById('loadingImage').style.display = 'block'; return true; } 
0 comments:
Post a Comment