jqxDockingLayout Error: Uncaught Invalid property: width

[NotAFanParticipant]

Hello,
Try to get your DockLayout working. I have tryed your fluid demo but it dont work: I got the Error Uncaught Invalid property: width.

I now try to build a realy simple Version my self to get finally started:

var hevDockLayoutHevidoStructure =
‘<div id=”hevDockLayoutHevidoStructure”>’+
‘<div data-container=”Document1Panel”>test</div>’+
‘<div data-container=”Document2Panel”>test</div>’+
‘</div>’;
var hevDockLayoutHevido = [{
type: ‘layoutGroup’,
orientation: ‘vertical’,
width: 500,
items: [{
type: ‘documentGroup’,
height: 400,
minHeight: 200,
items: [{
type: ‘documentPanel’,
title: ‘Document 1’,
contentContainer: ‘Document1Panel’
}, {
type: ‘documentPanel’,
title: ‘Document 2’,
contentContainer: ‘Document2Panel’
}]
}]
}];

jQuery(“#hevHomeMainArea”).append( hevDockLayoutHevidoStructure );
jQuery(‘#hevDockLayoutHevidoStructure’).jqxDockingLayout({ width: 800, height: 600, layout: hevDockLayoutHevido });

Whats the problem with this?

I’m prooving, if I don’t waste my money and a lot of time with your controls. I’m not interested in playing around or be a beta-tester for you.
I have already asked you several questions by mail and did not get an answer.
The Registration-Form of this forum dos not send a registration mail. Only after I have used the “Set password back” Function I finally got a response.

[NotAFanParticipant]

Additon: Tryed it with the other demos: every time the same error.
I have to use the control on a wordpress page.

[DimitarParticipant]

Hello DirkHeymer,

We tested your code (https://www.jseditor.io/?key=jqxdockinglayout-append-dyncamically) and it works as expected – no errors are thrown. Please make sure you are using the latest version of jQWidgets (4.5.3) and that you have also read our help topic How to Use jQWidgets in WordPress. If the issue persists, please share more information about what other widgets (if any) you are using on your page and any other details you think might help us determine the source of the issue. A screenshot of your browser console (with error thrown) might be helpful as well.

Best Regards,
Dimitar

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

[NotAFanParticipant]

Hello Dimitar,
thank you very much for your response.
* I use the latest Version 4.5.3 and for the Moment the source-version to better track the error.
* I use the latest WordPress Version.
* I read carefolly your instructions “How to.. WordPress”
* I have disabled all other plugins. (I use your components in my own plugin.)
* I changed the design to Twenty Sixteen and try also Twenty thirteen

HC.konferenz-system.com/TEMP/Error.jpg

The Error still resists.
Any Ideas?
Thanks.

Best Regards,
Dirk

[NotAFanParticipant]

Hello Dimitar,
i solved the problem. Seems to have something to do with the order, in witch to enqueue the scripts in WordPress.
Is there a recommendation for all the order of all your controls?
Thanks.
With regards,
Dirk

By the way: just tryed jqx-all als an alternative solution.
But unfotulally its seems to be useless for wordpress plugin developers. This is the resault:

globalize.culture.de-DE.js?ver=4.5.3:1 Uncaught TypeError: Cannot read property ‘addCultureInfo’ of undefined
at globalize.culture.de-DE.js?ver=4.5.3:1
at globalize.culture.de-DE.js?ver=4.5.3:1
(anonymous) @ globalize.culture.de-DE.js?ver=4.5.3:1
(anonymous) @ globalize.culture.de-DE.js?ver=4.5.3:1
(index):60 hevbase_dur.php -> hevDurationProof 26
hev_ui.js?ver=3.17.6:102 Uncaught TypeError: jQuery.jqx.response is not a constructor
at hevGenHeaderMenu (hev_ui.js?ver=3.17.6:102)
at hevGenUI (hev_ui.js?ver=3.17.6:21)
at hevInitHomePage (hev_home.js?ver=3.17.6:19)
at HTMLDocument.<anonymous> ((index):83)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

[DimitarParticipant]

Hello Dirk,

• The file jqxcore.js has to be included before any other widget file. There are other cases in which the order of scripts is important, such as including jqxgrid.js before any of the auxiliary jqxGrid files (such as jqxgrid.sort.js). In the case of jqxDockingLayout, you need to include the file jqxlayout.js before jqxdockinglayout.js. You can also refer to each widget’s Getting Started help topic to see the recommended order.
• jqx-all.js should be suitable in your case. Note, however, that you also need to reference globalization files (such as globalize.js) separately as they are not part of jqx-all.js.

Best Regards,
Dimitar

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

[NotAFanParticipant]

Hello Dimitar,
thank you for the explanation. I would use jqx-all. But If I try, I get the following error message:

jqx-all.js?ver=4.5.3:24 Uncaught TypeError: $ is not a function
at jqx-all.js?ver=4.5.3:24
at jqx-all.js?ver=4.5.3:24

hev_ui.js?ver=3.17.6:46 Uncaught TypeError: jQuery.jqx.response is not a constructor
at hevGenHeaderMenu (hev_ui.js?ver=3.17.6:46)
at hevGenUI (hev_ui.js?ver=3.17.6:29)
at hevInitPageHome (hev_page_home.js?ver=3.17.6:38)
at HTMLDocument.<anonymous> ((index):74)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

When using the single components, all works fine now. Could this happen, because I use your components in a wordpress-plugin?

With regards,
Dirk

[DimitarParticipant]

Hello Dirk,

Please make sure you have referenced a version of jQuery, too (before jqx-all.js). If that fails to solve your issue, please use the separate jQWidgets scripts.

Best Regards,
Dimitar

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

[Author]

Posts