Drongo_III Posted October 17, 2011 Share Posted October 17, 2011 Hi Guys Trying to write a while loop to do validate a form. However when i came to testnig out a simple while loop it keeps crashing the browser and i'm not sure why. When i say 'crashes' the browser just endless appears to be loading and i can't refresh the page. Any ideas what is wrong with the following? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery_ui.js"></script> <script> $(document).ready(function () { var i = 0; while(i <= 5) { document.write("The number is " + i); document.write("<br />"); i++; } }); </script> </head> <body> </body> </html> Any help is greatly apprecaited! Drongo Quote Link to comment Share on other sites More sharing options...
AyKay47 Posted October 17, 2011 Share Posted October 17, 2011 1. you are not specify what type of language is to be parsed.. you will need to specify.. <script type='text/javascript'> 2. this function is not a listener.. and ouputs to the browser, so it should be placed in the body of your page instead of the head Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted October 17, 2011 Author Share Posted October 17, 2011 Hi AyKay I've modified the code as follows but still no joy :/ Any ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery_ui.js"></script> </head> <body> <script type="text/javascript" > $(document).ready(function () { var i = 0; while(i <= 5) { document.write("The number is " + i); document.write("<br />"); i++; } }); </script> </body> </html> 1. you are not specify what type of language is to be parsed.. you will need to specify.. <script type='text/javascript'> 2. this function is not a listener.. and ouputs to the browser, so it should be placed in the body of your page instead of the head Quote Link to comment Share on other sites More sharing options...
Adam Posted October 17, 2011 Share Posted October 17, 2011 The never-ending loading is Firefox-specific. The main problem here is that you're writing to the document after it's finished loading (using jQuery's document ready event), which is effectively starting a new document stream and you're loosing the previous content. Firefox continues to load because technically this document hasn't been closed, other browsers just close it automatically. If you added document.close() after your loop you will see it stops. As I said though, you're going to always overwrite your previous content here, you need to either write in-line (within the body without the ready event) or just append the contents to an element (recommended). Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted October 17, 2011 Author Share Posted October 17, 2011 Genius! That worked and i think i now understand the issue a bit better. I changed my code to remove document write which means i don't need document.close - which in the true spirit of learning has spurred anotehr question. Can you tell me why this code only outputs the final version of the loop. What i mean is instead of repeatedly writing: "loop number 1", "loop number 2" it just prints "Loop number 5". Should i use append in a loop to see the recursive state? Thank you so much for your help thus far! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery_ui.js"></script> </head> <body> <script type="text/javascript" > $(document).ready(function () { var i = 0; while(i <= 5) { $("#text1").html("Loop number" + " " + i ); i++; } }); </script> <div id="text1" style="width: 400px; height: 300px; border: 1px solid #000;"> </div> </body> </html> The never-ending loading is Firefox-specific. The main problem here is that you're writing to the document after it's finished loading (using jQuery's document ready event), which is effectively starting a new document stream and you're loosing the previous content. Firefox continues to load because technically this document hasn't been closed, other browsers just close it automatically. If you added document.close() after your loop you will see it stops. As I said though, you're going to always overwrite your previous content here, you need to either write in-line (within the body without the ready event) or just append the contents to an element (recommended). Quote Link to comment Share on other sites More sharing options...
Adam Posted October 17, 2011 Share Posted October 17, 2011 You're overwriting the contents with each call to html(), you need to use append(). Quote Link to comment Share on other sites More sharing options...
Drongo_III Posted October 17, 2011 Author Share Posted October 17, 2011 Oh if i could reach out and kiss ya i would! Thank you adam for entertaining my noobish questions and for pointing me on the right track! Hurrah! You're overwriting the contents with each call to html(), you need to use append(). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.