[CrisiumParticipant]

are you making any progress on this?

[CrisiumParticipant]

thanks but your example is for angular, I can still read it and use what I need, but you are basically doing the same. I started to get more problems with the layout not closing the floating dialogs correctly and it would save them even though they are not there. So, I went back to my spike to see if I could simulate the problem and guess what I was able to simulate ALL the problems. What I changed in my spike test was instead of the saving the data from the saveLayout to a local variable I saved it to a media, in the spike case I saved it to local storage. When I fresh the page and try to load it I get the famous double floating dialog (they are on top of each other, but you can drag the one away).

I have published a simple test for this as you have requested; https://github.com/Crisium/jqtest

clone it
npm init

you should now be able to reproduce the error. this was done on windows 10

good luck

[CrisiumParticipant]

Hi Yavor,

I understand you need a test setup and I actually did create a test setup using npm that can be installed. The only problem is that works in the test setup. I don’t know why it works there and not in the main project, since they are basically the same for the exception the test setup up doesn’t import other local libraries (which should not influence the results).

I am confused why the error shows up in the main projects and why it can be resolved by loading it twice?!

I am using npm, typescript which means I use createInstance for the docking layout. This does have other weirdness besides the bug reported here, for example: saveLayout and loadLayout do not exist on the instance created for the docklayout. I have to do a jquery on a selector and call the method by a string supplied (this is not correct if one uses createInstance).

I wish there was a way to let you test it without having the full project (which is big and would have to be cleaned for hardcoded development information about the server).

The way I would test it if I had the source was to hook into the method that creates the floating dialog and see where it is getting the second instancing from?

[CrisiumParticipant]

Things keep getting weirder.

If I call loadLayout twice then it works correctly.

(<any>$(‘#jqxDockingLayout’)).jqxDockingLayout(‘loadLayout’, JSON.parse(json_layout));
(<any>$(‘#jqxDockingLayout’)).jqxDockingLayout(‘loadLayout’, JSON.parse(json_layout));

if I call it only once my floatGroup which has only one item in it shows up twice!

I cannot figure this out with the minimized library, I would need the source code to debug it.

[CrisiumParticipant]

I actually changed to the way you are showing and it works (a little).. but this is just wrong. I am using imports and exports and the jqxDockingLayout is not typed which means i have to force an <any> around it to just make it compile.

I can save the layout just fine, the data looks good. The strange part is when I load it my floatGroup gets loaded two times!

[CrisiumParticipant]

I have also looked into the jqxDocking script and can find addFloatGroup but saveLayout is missing? so, I am thinking perhaps there is a script file I need to include?

[CrisiumParticipant]

are you doing exactly the same as above not accessing it using a selector?

the above code is exactly how it is done, just add () to the saveLayout

Peter

[CrisiumParticipant]

SOLVED: finally I got it. I can see that the docs has a different way of creating the widgets then the examples.

I was doing:

(<any>$(‘#jqxDockingLayout’)).jqxDockingLayout({ width: “100%”, height: “100%”, layout: layout });

which does work, but didn’t want the <any>

The docs states to do this instead:

jqwidgets.createInstance(‘#jqxDockingLayout’, ‘jqxDockingLayout’, { width: “100%”, height: “100%”, layout: layout });

which also works and now I have the correct types.

doing this: /// <reference path=”node_modules/jqwidgets-scripts/jqwidgets-ts/jqwidgets.d.ts” />
is terrible!

we should be using the tsconfig.json and add to the “types”: [“jqwidgets-scripts”] or something in that line.

anyone after two days of headaches this problem is now resolved.

[CrisiumParticipant]

seems like this thread went dead.

I tried all combinations of jquery with jqwidgets and I cannot get past this error without having to resort to using <any>

>D:\Projects\testme5\app.ts(54,25): error TS2339: Build:Property ‘jqxDockingLayout’ does not exist on type ‘JQuery<HTMLElement>’.

I am compiling the typescript using develoeper studio set for a typescript project (meaning I am not using a commandline to compile the typescript nor do I wish to do that).

any suggestions how to move on?

[CrisiumParticipant]

btw.. it would be cleaner if typing was done with the tsconfig instead of the brute force reference in the code.

peter

[CrisiumParticipant]

Then I am doing something wrong, because I did follow those instructions even before you showed me the link.

>D:\Projects\testme5\app.ts(54,25): error TS2339: Build:Property ‘jqxDockingLayout’ does not exist on type ‘JQuery<HTMLElement>’.

and I do have the d.ts file reference on the top of the file:

/// <reference path=”node_modules/jqwidgets-scripts/jqwidgets-ts/jqwidgets.d.ts” />

so what do I do? I can force an <any> for the jquery part and it will compile and run perfectly, but then I have no typing.

peter

[CrisiumParticipant]

I should probably add that I am using npm and I cannot see how to import or require modules?

[Author]

Posts