Velocity Reviews - Browser crashes with below code.What is wrong in below code.

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)

- Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)

- - Browser crashes with below code.What is wrong in below code. (http://www.velocityreviews.com/forums/t943669-browser-crashes-with-below-code-what-is-wrong-in-below-code.html)

Browser crashes with below code.What is wrong in below code.

Hi,

All my browser are either hanging or crashing due to below code,Any ideas as what is happening.While debugging my jsp page, I narrowed down to below clone method of jquery.Also as per my understanding there are some tags in HTML5 which do not require to have end tags, does UL require end tag as per HTML5 ?.
Again I am no expert in Javascript but again trying to get my hands dirty either by reading books or trying on my own by googling here and there on net.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Simple Test Case</title>
</head>

<body>
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
</ul>

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script>
jQuery('ul').clone().appendTo('body');
</script>
</body>
</html>

Re: Browser crashes with below code.What is wrong in below code.

This is code which crashes browsers,below code do not have end UL tag.Though having end UL fixes the crash,but wanted to get this confirmed.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Simple Test Case</title>
</head>

<body>
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script>
jQuery('ul').clone().appendTo('body');
</script>
</body>
</html>

Re: Browser crashes with below code.What is wrong in below code.

On Sat, 3 Dec 2011 21:02:49 -0800 (PST), kiran <kiranmbadi@gmail.com>
wrote:

>This is code which crashes browsers,below code do not have end UL tag.Though having end UL fixes the crash,but wanted to get this confirmed.
>
><!DOCTYPE HTML>
><html>
><head>
><meta charset="utf-8">
><title>Simple Test Case</title>
></head>
>
><body>
><ul>
><li>Test1</li>
><li>Test2</li>
><li>Test3</li>
><li>Test4</li>
><li>Test5</li>
><li>Test6</li>
>
>
><script type="text/javascript" src="js/jquery-1.6.4.js"></script>
><script>
>jQuery('ul').clone().appendTo('body');
></script>
></body>
></html>

Having little knowledge of Javascript, and none of jQuery, this looks
fairly obvious.

The jQuery statement seems to be cloning your "ul" element and
appending it to the body.

<ul> requires a closing </ul>.

So, the cloning starts at the <ul>, and failing to find the closing
</ul> it clones to the end of the HTML, including the cloning request.
The cloned jQuery statement then sets about its work, and the process
loops until you run out of memory.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Re: Browser crashes with below code.What is wrong in below code.

On Dec 4, 4:52*pm, Swifty <steve.j.sw...@gmail.com> wrote:
> On Sat, 3 Dec 2011 21:02:49 -0800 (PST), kiran <kiranmb...@gmail.com>
> wrote:
>
>
>
>
>
>
>
>
>
> >This is code which crashes browsers,below code do not have end UL tag.Though having end UL fixes the crash,but wanted to get this confirmed.
>
> ><!DOCTYPE HTML>
> ><html>
> ><head>
> ><meta charset="utf-8">
> ><title>Simple Test Case</title>
> ></head>
>
> ><body>
> ><ul>
> ><li>Test1</li>
> ><li>Test2</li>
> ><li>Test3</li>
> ><li>Test4</li>
> ><li>Test5</li>
> ><li>Test6</li>
>
> ><script type="text/javascript" src="js/jquery-1.6.4.js"></script>
> ><script>
> >jQuery('ul').clone().appendTo('body');
> ></script>
> ></body>
> ></html>
>
> Having little knowledge of Javascript, and none of jQuery, this looks
> fairly obvious.
>
> The jQuery statement seems to be cloning your "ul" element and
> appending it to the body.
>
> <ul> requires a closing </ul>.
>
> So, the cloning starts at the <ul>, and failing to find the closing
> </ul> it clones to the end of the HTML, including the cloning request.
> The cloned jQuery statement then sets about its work, and the process
> loops until you run out of memory.

An interesting hypothesis, however a test in Safari and Firefox shows
that while a deep clone of an element that contains a script element
also clones the script, it isn't executed. e.g.

<ul>
<li>
<script>console.log('hey');</script>
</ul>
<script>
var el = document.getElementsByTagName('ul')[0].cloneNode(true);
document.body.appendChild(el);
</script>

only prints one "hey" in the console.

Similarly, placing a script element inside an element that clones the
containing element doesn't cause an endless loop of clones, e.g.

<ul>
<li>item
<script>console.log('hey');</script>
<script>
var el = document.getElementsByTagName('ul')[0].cloneNode(true);
document.body.appendChild(el);
</script>
</ul>

Leaving off the closing UL tag doesn't make any difference. In fact,
if an LI is added after the script element, it's not included in the
clone. So it would appear that the UL and its child nodes up to the
script are cloned, then appended after the the browser has performed
its error correction to close the UL.

I haven't tested the OPs claims regarding jQuery's behaviour.

--
Rob

Re: Browser crashes with below code.What is wrong in below code.

kiran, 2011-12-04 06:02:

> This is code which crashes browsers,below code do not have end UL tag.Though having end UL fixes the crash,but wanted to get this confirmed.
>
> <!DOCTYPE HTML>
> <html>
> <head>
> <meta charset="utf-8">
> <title>Simple Test Case</title>
> </head>
>
> <body>
> <ul>
> <li>Test1</li>
> <li>Test2</li>
> <li>Test3</li>
> <li>Test4</li>
> <li>Test5</li>
> <li>Test6</li>
>
>
> <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
> <script>
> jQuery('ul').clone().appendTo('body');
> </script>
> </body>
> </html>

Confirmed.

I assume the problem is caused by the missing end tag for the list,
since list is then not closed yet.

clone() will collect existing elements. appendTo() will then append
thoes elements. I did not have a look to the code of jquery, but i
assume clone() will also see those elements which get created by appendTo().

So this it what happens:

- clone() will fetch "Test1"
- appendTo() will create a copy of "Test1" and the end of the list
- clone() will fetch "Test2"
- appendTo() will create a copy of "Test2" and the end of the list
....
- clone() will fetch "Test6"
- appendTo() will create a copy of "Test6" and the end of the list

and NOW clone() will see the first copy of "Test1" since the list is not
closed by </ul> - therefore the whole process continues until the
browser crashes. Well - at least my FF 8.0.1 asks me after a while if i
want to stop the script ;-)

--
Arno Welzel
http://arnowelzel.de
http://de-rec-fahrrad.de

Re: Browser crashes with below code.What is wrong in below code.

On Dec 5, 12:04*am, Arno Welzel <use...@arnowelzel.de> wrote:
> kiran, 2011-12-04 06:02:
>
> > This is code which crashes browsers,below code do not have end UL tag.Though having end UL fixes the crash,but wanted to get this confirmed.
>
> > <!DOCTYPE HTML>
> > <html>
> > <head>
> > <meta charset="utf-8">
> > <title>Simple Test Case</title>
> > </head>
>
> > <body>
> > <ul>
> > <li>Test1</li>
> > <li>Test2</li>
> > <li>Test3</li>
> > <li>Test4</li>
> > <li>Test5</li>
> > <li>Test6</li>
>
> > <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
> > <script>
> > jQuery('ul').clone().appendTo('body');
> > </script>
> > </body>
> > </html>
>
> Confirmed.
>
> I assume the problem is caused by the missing end tag for the list,
> since list is then not closed yet.

Nothing to do with the missing closing tag, the browser deals with
that. Adding a closing tag doesn't fix the issue. Moving the script
element out of the UL does.

> clone() will collect existing elements.

The expression jQuery('ul') does that, clone calls clone the clone
method of a jQuery object, which then calls .map which calls
jQuery.clone() which finally gets around to calling clonNode(true) -
and then does lost of weirdness, probably trying to fix "edge cases".

> appendTo() will then append
> thoes elements. I did not have a look to the code of jquery, but i
> assume clone() will also see those elements which get created by appendTo().

There is certainly some weirdness going on. If you look at the code,
jQuery always creates a deep clone, then tries to fix attached events
(since those added with attachEvent are cloned but those added with
addEventListener aren't) and tries to fix obscure differences with
attributes on some elements.

In amongst all that, it gets lost. A jQuery object calls this
function:

clone: function( dataAndEvents, deepDataAndEvents ) {
dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
deepDataAndEvents = deepDataAndEvents == null ?
dataAndEvents : deepDataAndEvents;

return this.map( function () {
return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
});
},

which calls map and passes it jQuery.clone as the "callback"

map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},

and jQuery.clone is:

jQuery.extend({
clone: function( elem, dataAndEvents, deepDataAndEvents ) {
var clone = elem.cloneNode(true),
srcElements,
destElements,
i;

if ( (!jQuery.support.noCloneEvent || !
jQuery.support.noCloneChecked) &&
(elem.nodeType === 1 || elem.nodeType === 11) &&
!jQuery.isXMLDoc(elem) ) {
// IE copies events bound via attachEvent when using cloneNode.
// Calling detachEvent on the clone will also remove the events
// from the original. In order to get around this, we use some
// proprietary methods to clear the events. Thanks to MooTools
// guys for this hotness.

cloneFixAttributes( elem, clone );

// Using Sizzle here is crazy slow, so we use
getElementsByTagName
// instead
srcElements = getAll( elem );
destElements = getAll( clone );

// Weird iteration because IE will replace the length property
// with an element if you are cloning the body and one of the
// elements on the page has a name or id of "length"
for ( i = 0; srcElements[i]; ++i ) {
// Ensure that the destination node is not null; Fixes #9587
if ( destElements[i] ) {
cloneFixAttributes( srcElements[i], destElements[i] );
}
}
}

// Copy the events from the original to the clone
if ( dataAndEvents ) {
cloneCopyEvent( elem, clone );

if ( deepDataAndEvents ) {
srcElements = getAll( elem );
destElements = getAll( clone );

for ( i = 0; srcElements[i]; ++i ) {
cloneCopyEvent( srcElements[i], destElements[i] );
}
}
}

srcElements = destElements = null;

// Return the cloned set
return clone;
},

In true jQuery style, it disappears up its own arse in convoluted
calls to all sorts of functions to "fix" things along the way. Someone
might care to trawl through all that to find the issue but I'm not
bothered.

> So this it what happens:

No point guessing, it has nothing to do with the missing closing tag.
It is certainly something to do with the script element being within
the element being cloned, but why is for someone else to discover.

Care to log it as a bug? :-)

--
Rob

Re: Browser crashes with below code.What is wrong in below code.

Thanks Rob and everyone for confirming this.I will bring this to the notice of jQuery team and see what they have to say on this.

Re: Browser crashes with below code.What is wrong in below code.

On Dec 6, 1:06*am, kiran <kiranmb...@gmail.com> wrote:
> Thanks Rob and everyone for confirming this.I will bring this to the notice of jQuery team and see what they have to say on this.

Some thoughts from jQuery-o-philes:

<URL: http://stackoverflow.com/questions/8...rowser-to-hang
>

--
Rob

Re: Browser crashes with below code.What is wrong in below code.

RobG wrote:
> On Dec 6, 1:06*am, kiran <kiranmb...@gmail.com> wrote:
>
>> Thanks Rob and everyone for confirming this.I will bring this to the notice of jQuery team and see what they have to say on this.
>
> Some thoughts from jQuery-o-philes:
>
> <URL:http://stackoverflow.com/questions/8...-causes-browse...

Doctor, it hurts when I do this...

:-)

Re: Browser crashes with below code.What is wrong in below code.

http://bugs.jquery.com/ticket/10955

They feel its code issue and not an issue with jQuery.

I am somewhat surprised.