Jump to content

JS/Jquery while loop crashing browser - why?


Drongo_III
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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).

 

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.