 innerHTML image not display in firefox |
  |
| potato_chip |
 Dec 30 2008, 01:35 PM
Post
#1
|
|
Newbie  Group: Members Posts: 12 Joined: 21-October 08 Member No.: 6,954  |
When user click login button, I want to display a loading.gif image along with "Logging in" text aside before the page is redirected to another page.
It works perfectly with IE brower. However, for Firefox, only the text is displayed, and the image is not showing at all. So it shouldn't be the path error. But WHY! Firefox should be the statndard browser. ??? Can somebody please help me out?!!!  My simple code is here. The image and text will disappear very quickly due to the page got redirected. However, on my real site, it takes a while since I need to verify the login data with a huge database! CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript"> function startTimer(strMessage) { //Set the DIV tag to the loading message //Add a loading animation next to loading message if (strMessage != '') strMessage = "<img src='images/loading.gif' align='absmiddle'> " + strMessage; document.getElementById('loadingMessage').innerHTML = strMessage; } </script> <style type="text/css"> .left { float: left; } </style> </head> <body> <form action="temp2.php" id="myForm" name="myForm" method="post"> <input type="submit" id="btnLogin" name="btnLogin" value="Login" onclick="startTimer('Logging In');"> <div class="left" style="margin: 5px 0 0 15px" id="loadingMessage" name="loadingMessage"></div> </form> </body> </html> |
  |
 
|
| Christian J |
Dec 30 2008, 02:36 PM
Post
#2
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(potato_chip @ Dec 30 2008, 07:35 PM)  for Firefox, only the text is displayed, and the image is not showing at all. Worked in my FF when I tested offline. QUOTE Firefox should be the statndard browser. Nit-pick: innerHTML is actually a non-standard property, but FF should indeed support it. QUOTE The image and text will disappear very quickly due to the page got redirected. However, on my real site, it takes a while since I need to verify the login data with a huge database! Doesn't the image appear on the DB site either? In any case you may want to preload the image, so it shows up right away. |
|
|
|
| Frederiek |
Dec 30 2008, 06:22 PM
Post
#3
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Try switching the double and single quotes in the javascript (first the single then the double quotes).
|
|
|
|
| potato_chip |
Dec 30 2008, 07:21 PM
Post
#4
|
|
Newbie Group: Members Posts: 12 Joined: 21-October 08 Member No.: 6,954 |
QUOTE(Frederiek @ Dec 30 2008, 06:22 PM) Try switching the double and single quotes in the javascript (first the single then the double quotes). no, it's still not working for Firefox. Here is what I did followed by your suggestion: strMessage = '<img src="../images/loading.gif" align="absmiddle"> ' + strMessage ; Any ideas? |
|
|
|
| Christian J |
Dec 30 2008, 08:04 PM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Can you upload a sample page where the image doesn't load?
|
|
|
|
| potato_chip |
Jan 2 2009, 03:05 PM
Post
#6
|
|
Newbie Group: Members Posts: 12 Joined: 21-October 08 Member No.: 6,954 |
QUOTE(Christian J @ Dec 30 2008, 08:04 PM) Can you upload a sample page where the image doesn't load? here is the smaple code: (it works perfect for IE, but for Firefox, the dynamic image "loading.gif" is not displaying, only 'Logging In' text is displaying. The image is attached.) CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Login</title> <!--- Style Sheets defined here ----------------------------------------> <link href='css/main.css' rel='stylesheet' type='text/css'> <!--- Fav icon set here ------------------------------------------------> <link rel="icon" href="favicon.ico" type="image/x-icon"> <script language="javascript"> function startTimer(strMessage) { //Set the DIV tag to the loading message //Add a loading animation next to loading message if (strMessage != '') /*strMessage = "<img src='../images/loading.gif' align='absmiddle'> " + strMessage;*/ strMessage = '<img src="../images/loading.gif" align="absmiddle"> ' + strMessage; //getSection('loadingMessage').innerHTML = strMessage; document.getElementById('loadingMessage').innerHTML = strMessage; // Reset error messages if (getSection('errorMessage')) //getSection('errorMessage').innerHTML = ''; document.getElementById('loadingMessage').innerHTML = ''; //var timerId = setTimeout("updateMessage(0)", 1000); } </script> <style type="text/css"> <!-- #login_box { margin: 20px 0 30px 30px; /*padding: 10px 40px 10px 10px; */ text-align: left; } #no_js_box { width: 500px; height: 300px; margin: 25px 0 0 23px; padding: 10px; border: 1px solid #a6a6a6; background:#e3a463; text-align: center; } ul { list-style-position: outside; list-style:none; line-height:1.8em; list-style-image:url('../images/arrow.gif'); margin:2px 0 0 30px; padding:2px 0 0 30px; } a.login:hover { background-color:#FFE2C6; padding-top:0.2em; padding-bottom:0.2em; padding-right:0.3em; } //--> </style> </head> <body onLoad="focusField('txtMemberID')" onUnload=""> <div id="frame_header"> <div id="header_bar"> <div id="header_bar1"><img src="../images/pixel.gif"></div> <div id="header_bar2"><img src="../images/pixel.gif"></div> <div id="header_bar3"><img src="../images/pixel.gif"></div> <div id="header_bar_clear"></div> </div> <div id="header_welcome">Welcome to</div> <div id="header_title">ABC COMPANY</div> <div id="header_sub_title">Technology drive. Customer focused.</div> <div id="header_logo"></div> <!--Start frame_menu--> <div id="frame_menu"> <!--Start frame_menu tabs--> <div id="frame_menu_tabs"> <div class="menu_tab" title=""> <div class="menu_tab_left_alt"></div> <div class="menu_tab_text_alt"><a class="nav" href="home.php">HOME</a></div> <div class="menu_tab_right_alt"></div> </div> <div class="menu_tab" title=""> <div class="menu_tab_left"></div> <div class="menu_tab_text"><a class="nav" href="contactUs.php">CONTACT US</a></div> <div class="menu_tab_right"></div> </div> </div><!--End frame_menu_tabs--> <!--Start frame_menu_sub--> <div id="frame_menu_sub"> <!--Start menu_sub_left--> <div id="menu_sub_left"> </div><!--End menu_sub_left--> <!--Start menu_sub_right--> <div id="menu_sub_right" style="text-align: right"> </div><!--End menu_sub_right--> </div><!--End frame_menu_sub--> </div><!--End frame_menu--> </div><!--End frame_header--> <!--start frame_body--> <div id="frame_body"> <div class="left"> <!---- LOGIN BOX ----> <div id="login_box" style="display:none"> <form action="login.php" id="myForm" name="myForm" method="post"> <span class="body_title">Login</span><br> <span class="medium alt_color">With Your ABC Account</span><br /> <br style="line-height: 10px"> <span class="normal">Subscriber/Member ID Number & Suffix:</span><br /> <input type="text" id="txtMemberID" name="txtMemberID" value="" size="15" maxlength="9" /> - <input type="text" id="txtSuffix" name="txtSuffix" value="" size="2" maxlength="2" /><br /> <br style="line-height: 15px"> <span class="normal">Enter Your Password</span><br /> <input type="password" id="txtPassword" name="txtPassword" size="20"><br /> <div style="font-size: 8pt; margin: 15px 0 10px 0">By continuing, you agree to the terms and conditions outlined in the ABC <a href="disclaimer.php" target="_blank" title="Disclosure and Agreement">Disclosure & Agreement</a>.</div> <input type="submit" id="btnLogin" name="btnLogin" value="Login" class="button" onclick="startTimer('Logging In');"> <div class="left" style="margin: 5px 0 0 15px" id="loadingMessage" name="loadingMessage"></div> <div class="clear"></div> </form> </div> </div> <div class="right" style="width: 250px; margin:20px 0 30px 0" align="center"><img src="../images/splash_left.jpg" align="middle" style="border: 1px solid black"></div> <div class="clear"></div> </div><!--end frame_body--> <div id="frame_footer"> <div id="footer_bar1"> <div id="footer_menu_alt"> </div> <div id="footer_menu"> <a class="white" href="home.php">HOME</a> <span class="menu_footer_divider">|</span> <a class="white" href="contactUs.php">CONTACT US</a> </div> </div> <div id="footer_bar2"> <div id="footer_legal"> <div class="left">Copyright 2009 - Western Growers Assurance Trust</div> <div class="right" style="margin-right: 10px"><span style="color: #575757">Best viewed at a resolution of 1024 x 768 or higher</span></div> <div class="clear"></div> </div> </div> </div> </body> </html> This post has been edited by potato_chip: Jan 2 2009, 03:07 PM Attached image(s) 
|
|
|
|
| Christian J |
Jan 2 2009, 05:39 PM
Post
#7
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(potato_chip @ Jan 2 2009, 09:05 PM) QUOTE(Christian J @ Dec 30 2008, 08:04 PM) Can you upload a sample page where the image doesn't load? here is the smaple code: I meant an online test page.  But never mind, this time it worked first time while FF asked if I wanted to submit the form data. Second time FF didn't ask me, and the URL specified in the form ACTION (I used a real online web page) loaded before the image, as if the form submission stops the image loading. But if I added an alertbox to interrupt the form submission it again worked.A crude solution might be to open an alertbox saying that the DB may take time, while the image gets time to load. Or maybe this timer works, but I'm not even sure if it's valid JS: CODE function foo() { return setTimeout('document.myForm.submit()', 10); } CODE <form action="http://example.com" onsubmit="foo(); return false;"> Side-note: the form fields were hidden with an inline style: CODE <div id="login_box" style="display:none"> I assume you later use JS to make them show up, but in that case you should use JS to hide them in the first place (in case users have JS disabled). |
|
|
|
| potato_chip |
Jan 5 2009, 10:36 AM
Post
#8
|
|
Newbie Group: Members Posts: 12 Joined: 21-October 08 Member No.: 6,954 |
Can somebody provide me with the correct syntax of doing setTimeout() to do the form submit. I tried to put "setTimeout("document.myForm.submit()", 10)" at the end of startTimer() function, but it doesn't work and looks like the function isn't called at all.
Thanks! QUOTE(Christian J @ Jan 2 2009, 05:39 PM) QUOTE(potato_chip @ Jan 2 2009, 09:05 PM) QUOTE(Christian J @ Dec 30 2008, 08:04 PM) Can you upload a sample page where the image doesn't load? here is the smaple code: I meant an online test page. But never mind, this time it worked first time while FF asked if I wanted to submit the form data. Second time FF didn't ask me, and the URL specified in the form ACTION (I used a real online web page) loaded before the image, as if the form submission stops the image loading. But if I added an alertbox to interrupt the form submission it again worked.A crude solution might be to open an alertbox saying that the DB may take time, while the image gets time to load. Or maybe this timer works, but I'm not even sure if it's valid JS: CODE function foo() { return setTimeout('document.myForm.submit()', 10); } CODE <form action="http://example.com" onsubmit="foo(); return false;"> Side-note: the form fields were hidden with an inline style: CODE <div id="login_box" style="display:none"> I assume you later use JS to make them show up, but in that case you should use JS to hide them in the first place (in case users have JS disabled). |
|
|
|
| potato_chip |
Jan 5 2009, 10:51 AM
Post
#9
|
|
Newbie Group: Members Posts: 12 Joined: 21-October 08 Member No.: 6,954 |
If I put add setTimeout in <form> tag like this:
CODE <form action="<?=$_SERVER['PHP_SELF']?>" id="myForm" name="myForm" method="post" onsubmit="setTimeout('document.myForm.submit()', 1000); return false;"> The 1000 milliseconds delay works in both IE and Firefox and the loading image shows (GREAT), but the form is not submitted and looks like all the variables are not submitted! What's the fix? Anybody knows? This post has been edited by potato_chip: Jan 5 2009, 10:53 AM |
|
|
|
| Christian J |
Jan 5 2009, 01:01 PM
Post
#10
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
This seems to work (i.e. if you change the form fields' content, the new content is submitted):
CODE <form action="" name="myForm" method="get"> <input type="text" name="firstname" value="foo"> <input type="text" name="lastname" value="bar"> <input type="submit" value="Send" onclick="setTimeout(function(){document.myForm.submit();}, 1000); return false;"> </form> But when I add the image it seems the form fields are reset to their default values (foo and bar) before being submitted: CODE <script language="javascript"> function startTimer() { document.body.innerHTML +='<img src="loading.gif"> Logging in'; } </script> <form action="" name="myForm" method="get"> <input type="text" name="firstname" value="foo"> <input type="text" name="lastname" value="bar"> <input type="submit" value="Send" onclick="startTimer(); setTimeout(function(){document.myForm.submit();}, 1000); return false;"> </form> |
|
|
|
| potato_chip |
Jan 5 2009, 01:34 PM
Post
#11
|
|
Newbie Group: Members Posts: 12 Joined: 21-October 08 Member No.: 6,954 |
Yes, Christian. That's the problem! I do need to add the image by calling the startTimer() function. But the form is not submitted with the new value if setTimeout() function is used!!!!????
|
|
|
|
| Christian J |
Jan 5 2009, 03:13 PM
Post
#12
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Here's a workaround that seems to work for me (only tested lastest FF):
CODE <script type="text/javascript"> function startTimer() { document.getElementById('loading').style.display='block'; } </script> <form action="" method="get"> <input type="text" name="firstname" value="foo"> <input type="text" name="lastname" value="bar"> <input type="submit" value="Send" onclick="startTimer();"> </form> <p id="loading" style="display: none;"><img src="loading.gif">Logging in</p> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 09:58 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC