[d_lMember]

I’m surprised that my link (removed) to a standard jqueryui method .sortable conflicted with the forum policy ..

Do not mention other product vendors.

[d_lMember]

Solved

I’ve looked at *** and applied sortable method to my problem.

I embedded jqxPanels inside sortable containers.

I couldn’t find sortable methos in jqxWidgets. But if you can point to one I’ll try it.

I had to add link to jQuery-ui.js.

[d_lMember]

Thanks.

If you refer to the defaultfunctionality link above.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdragdrop/defaultfunctionality.htm?web

instead of dragging the left hand objects (the T-shirts) into the target area (the shopping cart) for my requirement I would like to ignore the target shopping cart and reorder the left hand objects by drag and drop in their parent container.

i.e. squeezing and snapping draggable between other objects. A sortable index board.

I’ve now created in a container draggable objects (jqxPanels) which are constrained to the parent div using property restrictor: ‘parent’ (which acts like jQuery-ui “containment” property).

However I’ve noticed that when these panels have scrollbars the dragging “cursor fist” does not switch to cursor arrow mode over the scrollbars.

So ideally the draggable target areas or “drag handles” should exclude the areas for the vertical and horizontal scroll bars.
Perhaps a header div above each jqxPanel which acts as drag handle?

[d_lMember]

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)

[d_lMember]

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>

[d_lMember]

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.

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

[d_lMember]

Thanks for prompt reply. I can see the (now obvious) error. I now have it working.

[d_lMember]

I followed the helpful advice in this post .. nesting jqxNavigationBar inside a content div in a parent jqxNavigatorBar.
The parent jqxNavigationBar is itself in a panel in a parent jqxDockPanel.

I had problems with no jqxNavigationBar rendering.
On retracing steps I found that to make it work I had to delete the attribute

sizeMode: ‘fitAvailableHeight’

I don’t know why this attribute doesn’t work inside jqxDockPanel panel. Version jqxwidgets 2.8.

This post is just for information since the nesting jqxNavigationBar seems to be working now in first tes.

[d_lMember]

I decided to start again from the ground up.

I recreated jqxDockPanel (with 10 panels) but initially without nested jqxWidgets.
That worked.

I nested jqxNavigationBar into a target panel in jqxDockPanel.
That worked.

I’ve not changed the embedded jqxNavigatorBar code which generated my earlier error.
So the conclusion is there is some conflict with other code..

I intend to keep adding widgets into panels one by one until I find where the framework breaks.

I’m hoping to find some sort of generic debugging process to use such as Firefox -> Firebug logging.

https://getfirebug.com/logging

This will be useful as I continue adding nested widgets.

I’ve found this online validator useful for flagging errors in element matching.

http://validator.w3.org

But unfortunately it doesn’t show where there are missing tags (if any).

[d_lMember]

I’ve been exploring API’s in other jqxWidgets and it’s true that there is cookie functionality in some API’s but not others.

However I’ve seen a jQuery-cookie plugin described here ..

http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery

and here ..

https://github.com/carhartl/jquery-cookie

Perhaps as an interim solution you could loop through the jxqSplitter elements properties and save in cookies
or better in php/MySql in case cookies are cleared by user.

[d_lMember]

Thanks for that solution.

I see that you’ve changed the symmetry of the jqxSplitters – using three instead of my four. It is close to what I want so I can build on this.

Some tweaks needs:

(1) The centre splitter-vertical-bar works as required (with the other vertical bars not moving).

(2) If either the left or right splitter-vertical-bars are dragged the other splitter-vertical bars should not move.

(3) I changed left panel collapse so that one or both of the centre panels are always visible and the outer panels callapse.

…

I will try adding some jQuery methods to allow left or right vertical bar not to move other vertical bars.

…

One tip for php users .. since it can be tricky adding content into the jqxSplitter divs (particularly if other jqxwidgets are to be nested or embedded) … I am using

<?php include_once ("include-file.inc") ?>

throughout and drawing on a library of snippets (html or javascript) to be included on page load.

Makes it easier to follow the logic.

[d_lMember]

Sorry, I lost the raw code I had posted. Here it is again in block.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="test nested vertical and horizontal splitters" />
    <title id='Description'>"nested vertical and horizontal splitters"
    </title>
 
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-documentation/scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxsplitter.js"></script>
<style type="text/css" media="screen">
        
    html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        
    #west-centre-Splitter { background: white; float: left; }
    #east-centre-Splitter { background: white; float: left; }
          
</style>   
<script type="text/javascript">
        $(document).ready(function () {
                            
            $('#west-Splitter').jqxSplitter({
                width: '20%',
                height: 500,
                orientation: 'horizontal',
                panels: [
                         { size: '50%', collapsible: true },
                         { size: '50%', collapsible: false }
                        ]
                });
            $('#east-Splitter').jqxSplitter({
                width: '20%',
                height: 500,
                orientation: 'horizontal',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
            $('#west-centre-Splitter').jqxSplitter({
                width: '50%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
                
            $('#east-centre-Splitter').jqxSplitter({
                width: '50%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
                 
            $('#total-Splitter').jqxSplitter({
                width: '100%',
                height: 500,
                orientation: 'vertical',
                panels: [
                         { size: '50%', collapsible: false },
                         { size: '50%', collapsible: true }
                        ]
                });
            
        }); // end
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
    
<div id="total-Splitter">
<div id="west-centre-Splitter">
    <div id="west-Splitter">
        <div>
            <div>west top panel</div>
        </div>
        <div>
            <div>west bottom panel</div>
        </div>
    </div><!-- end of #west-Splitter -->
        <div>
        <div>centre west panel</div>
        </div>
</div><!-- end of #west-centre-Splitter -->
<!-- split between #west-centre-Splitter and #east-centre-Splitter -->
<div id="east-centre-Splitter">
    <div>
        <div>centre east panel</div>
    </div>
    <div id="east-Splitter">
        <div>east top panel</div>
        <div>east bottom panel</div>
    </div>
</div><!-- end of #east-centre-Splitter -->
</div><!-- end of wrapper for #total-Splitter -->
</div><!-- end of wrapper for #jqxWidget -->            
</body>
</html>

.

[d_lMember]

I’ve experimented further since posting my question and I now see how I might use nested jqxSplitters to achieve the layout I want.

I read an adjacent thread which suggested that the jqxSplitter panels have each to be wrapped in a “blank div”. I tried that but it didn’t work. I don’t quite understand the rules or need for adding blank div containers or wrappers.

With trial and error I got to the following trimmed code which does not use blank div’s as wrappers..

Ideally I would like the centre splitterbar to be moved left or right without resizing the outer panels.

I suppose I might achieve this by some jQuery method which captures the positions of the panels before a vertical splitterbar is dragged and then reset outer panes to these positions.

Any other approaches to this issue of just moving centre splitterbar without affecting other splitterbars?

Thanks.

/================= code =======================

“nested vertical and horizontal splitters”

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}

#west-centre-Splitter { background: white; float: left; }
#east-centre-Splitter { background: white; float: left; }

$(document).ready(function () {

$(‘#west-Splitter’).jqxSplitter({
width: ‘20%’,
height: 500,
orientation: ‘horizontal’,
panels: [
{ size: ‘50%’, collapsible: true },
{ size: ‘50%’, collapsible: false }
]
});

$(‘#east-Splitter’).jqxSplitter({
width: ‘20%’,
height: 500,
orientation: ‘horizontal’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

$(‘#west-centre-Splitter’).jqxSplitter({
width: ‘50%’,
height: 500,
orientation: ‘vertical’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

$(‘#east-centre-Splitter’).jqxSplitter({
width: ‘50%’,
height: 500,
orientation: ‘vertical’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

$(‘#total-Splitter’).jqxSplitter({
width: ‘100%’,
height: 500,
orientation: ‘vertical’,
panels: [
{ size: ‘50%’, collapsible: false },
{ size: ‘50%’, collapsible: true }
]
});

}); // end

west top panel

west bottom panel

centre west panel

centre east panel

east top panel

east bottom panel

[d_lMember]

I should add that I ran the multiple (>2) panel code in Firefox with Firebug enabled and I saw this error message which gave the clue ..

uncaught exception: Invalid HTML Structure! jqxSplitter requires two nested DIV tags!

This led to me reading in release history (see above) that jqxSplitter 2.8.0 only allows two panels?

Is this correct?

[d_lMember]

I replaced my header links with links from the demo site but still hit problems in both Firefox and Opera.

In my localhost testing I see I’ve been using an earlier version of jqxSplitter (jQWidgets v2.6.1 (2013-Jan-18) which allowed me four panels in Opera (but not Firefox).

My understanding now is that jqxSplitter 2.8.0 only allows two panels.

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/releasehistory/releasehistory.htm

“jqxSplitter works with two split panels”.

I’m now upgrading to 2.8.0 and will try to nest jqxSplitter definitions to achieve a four panel configuration.

[Author]

Posts