jQWidgets Forums

Tagged: html5 tree control, jqxtree

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Dragging tree node hangs in Firefox .. “too much recursion” Posts

April 16, 2013 at 9:05 pm Dragging tree node hangs in Firefox .. “too much recursion” #19386

d_l

Member

I’ve included this jqxTree demo into a test page.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm#demos/jqxtree/treebindingtojson.htm

The selection of tree nodes works fine as expected.

I’ve tested in both Firefox and Opera,

I then added drag and drop functionality (see code below).

But in trying to drag a tree node Firefox hangs up.

I monitored dragStart using console.log in this code snippet using Firefox>Firebug

$(‘#jqxWidget’).jqxTree({ source: records, allowDrag: true, allowDrop: true, height: ‘300px’, width: ‘220px’, theme: theme,

dragStart: function (item) {

console.log (item.id);

if (item.id == “14”)

return false;

}

});

After several minutes Firefox 19.02 came out of this hung state and I could see this error message in console

“too much recursion”

….

The odd point is that jqxTree drag and drop of nodes seems to work in Opera without this hanging symptom seen. Other jqxWidgets work in Firefox.

April 17, 2013 at 4:42 am Dragging tree node hangs in Firefox .. “too much recursion” #19394

Peter Stoev

Keymaster

Hi,

We are unable to reproduce that with the latest version.
Please, provide step by step instructions for reproducing the reported behavior with FF.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

April 17, 2013 at 1:18 pm Dragging tree node hangs in Firefox .. “too much recursion” #19446

d_l

Member

I’m able to reproduce this problem at least in my localhost setup.

I’ve added a test code below with steps taken.

step (1): copy and paste the source code from here into testpage.html
step (2): comment out head links used in demo
step (3): modify links to refer to my localhost test configuration (jqxWidgets 2.8)
step (4): add link to jqxdragdrop.js
step (5): comment out demo jqxTree script which does not have drag and drop attributes
step (6): replace with #jqxWidget definition with drag and drop attributes
step (7): also add console.trace() for debugging in Firebug
and disable drag drop on last node .. id=”14″

step (8): load testpage.html in browser
step (9): initialise Firebug
step (10): reload testpage.html to observe in Firebug
step (11): select node to be dragged (I selected Cappuccino)

….

step (12): At this point there is some attempt seen in Firefox to drag Cappuccino node
but Firefox then “grays out”and take a few minutes to recover.

step (13): when Firefox recovers view the console in Firebug

step (14): check same testpage.html in Opera .. it’s o.k. with no hangups.

note there is a stuck div with InnerHTML containing text “Cappuccino” where drag and drop fails to complete.
I inspected the div element using Firebug.
I have a screenshot but can’t post it on this forum.
If needed I can post in some imagebin account.

I deleted this node (div element) and tried dragging another node.
Same effect seen.

….

I should add that in Firefox I’ve got drag and drop to work on the demo for dynamic loading.

ajaxloading.html

// ===================================================

test code now follows in next post.

// ===================================================

April 17, 2013 at 1:21 pm Dragging tree node hangs in Firefox .. “too much recursion” #19447

d_l

Member

HTML didn’t post correctly .. trying again .. using <pre tags ..

<!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>
    <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
    
<!-- step (1): copy demo into testpage.html as below -->
    
<!-- step (2): comment out head links used in demo
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    
-->
<!-- step (3): modify links to refer to localhost test configuration -->
    <link rel="stylesheet" href="http://localhost/jqwidgets-2.8/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/scripts/gettheme.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="http://localhost/jqwidgets-2.8/jqwidgets/jqxtree.js"></script>
<!-- step (4): add link to jqxdragdrop.js -->   
    <script type="text/javascript" src='http://localhost/jqwidgets-2.8/jqwidgets/jqxdragdrop.js'></script>
    
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var data = [
                { "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate",
                    "value": "$2.3"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "value": "$2.3"
            }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "value": "$2.3"
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano",
                    "value": "$2.3"
                    }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6",
                    "value": "$2.3"
                    }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6",
                    "value": "$2.3"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6",
                    "value": "$2.3"
                    }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12",
                    "value": "$2.3"
                    }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13",
                    "value": "$2.3"
                    }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13",
                    "value": "$2.3"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12",
                    "value": "$2.3"
                    }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
 
                
// step (5):  comment out demo jqxTree script which does not have drag and drop attributes               
                
                
            //    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
                
                
                               
// step (6): replace with #jqxWidget definition with drag and drop attributes
// step (7): also add console.trace() for debugging in Firebug
//           and disable drag drop on last node .. id="14"
		
		$('#jqxWidget').jqxTree({ source: records, allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragStart: function (item) {
			
			// console.trace ();
			console.trace();
			
                    if (item.id == "14")
                        return false;
                }
		});
			  
                
 // end of inserted drag and drop               
                
                              
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

April 17, 2013 at 2:07 pm Dragging tree node hangs in Firefox .. “too much recursion” #19454

Peter Stoev

Keymaster

Hi d_l,

Have you always tried that with Firebug running? Have you tried without it?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

April 17, 2013 at 3:52 pm Dragging tree node hangs in Firefox .. “too much recursion” #19466

d_l

Member

I was fairly sure that these symptoms occurred in Firefox .. with or without Firebug enabled.

But now I see that I can drag Cappuccino node correctly without Firebug enabled.

When I do enable Firebug the tree renders o.k. until I start dragging nodes.

cpu usage jumps to 100%.
After the cpu usage dies down to about 50% in system monitor (admittedly I do have a lot of tabs open in Firefox in an old laptop)

I see the error “too much recursion” …

too much recursion
http://localhost/jqwidgets-2.8/scripts/jquery-1.8.3.min.js
Line 2

Symptoms appear to be Firebug related. Firebug hangs up Firefox.
But if I disable Firebug I can resume drag and drop of nodes.
Perhaps I don’t have enough firepower in my old laptop.

Using console.trace () to trace the dragging of object label=”Cappuccino”

In console log there are several references only to
jquery-1.8.3.min.js line 2
and
jqxdragdrop.js line 7

Here is a dump of the console window .. hangs after mouse move ..


dragStart(item=Object { label=
"Cappuccino"
, id=
"10"
, parentId=
"6"
, more...})test-t...on.html (line 169)
defineInstance()jqxdragdrop.js (line 7)
a(e=
[div#jqxWidget.jqx-widget]
, n=function(), r=
undefined
)jquery....min.js (line 2)
defineInstance(g=Object { type=
"dragStart"
, timeStamp=
1366212474674
, jQuery183012356596205209625=
true
, more...})jqxdragdrop.js (line 7)
a(n=Object { type=
"dragStart"
, timeStamp=
1366212474674
, jQuery183012356596205209625=
true
, more...})jquery....min.js (line 2)
a(e=Object { type=
"dragStart"
, timeStamp=
1366212474674
, jQuery183012356596205209625=
true
, more...})jquery....min.js (line 2)
a(n=Object { type=
"dragStart"
, timeStamp=
1366212474674
, jQuery183012356596205209625=
true
, more...}, r=
[Object { type=
"dragStart"
,  timeStamp=
1366212474674
,  jQuery183012356596205209625=
true
,  more...}]
, s=div#jqxWidgetac2d85a78b1b.draggable, o=
undefined
)jquery....min.js (line 2)
a()jquery....min.js (line 2)
a(e=jQuery(div#jqxWidgetac2d85a78b1b.draggable), n=function(), r=
undefined
)jquery....min.js (line 2)
a(e=function(), t=
undefined
)jquery....min.js (line 2)
a(e=Object { type=
"dragStart"
, timeStamp=
1366212474674
, jQuery183012356596205209625=
true
, more...}, t=
undefined
)jquery....min.js (line 2)
defineInstance()jqxdragdrop.js (line 7)
c = 
0
e = Object { originalEvent=Event mousedown, type=
"mousedown"
, timeStamp=
1331636
, more...}
defineInstance(d=Object { originalEvent=Event mousedown, type=
"mousedown"
, timeStamp=
1331636
, more...})jqxdragdrop.js (line 7)
defineInstance(c=Object { originalEvent=Event mousemove, type=
"mousemove"
, timeStamp=
1332004
, more...})jqxdragdrop.js (line 7)
a(n=Object { originalEvent=Event mousemove, type=
"mousemove"
, timeStamp=
1332004
, more...})jquery....min.js (line 2)
a(e=mousemove clientX=87, clientY=154)

April 18, 2013 at 4:34 am Dragging tree node hangs in Firefox .. “too much recursion” #19487

Peter Stoev

Keymaster

Hi d_l,

I’ve noticed that it is FireBug related and that’s the reason I pointed you to that direction. Drag and Drop is an operation which updates the DOM dynamically and FireBug should update itself when there is DOM update, too. If it fails to update itself, then it will hang. However, we will continue testing whether there is an issue on our side, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.