NEW! can't edit fields in jQuery UI modal dialog

[psyafter]

when using CKEditor in UI Dialog there is a problem with editors popups.

jsfiddle: ​http://jsfiddle.net/psyafter/dUThT/

1) click on button

2) in ckeditor double click on text "click me"

3) in editor dialog there is a problem edit textboxes

past bugs reports that now any solution not work:

​https://dev.ckeditor.com/ticket/5779

​http://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

​http://bugs.jqueryui.com/ticket/4727

[pmckensey]

jsfiddle: ​​http://jsfiddle.net/psyafter/dUThT/

1. Open ckeditor in a jqueryui dialog
2. click the font size drop down then click the font drop down without clicking in the editor area.

It seems that if you click the editor area before selecting one of the other drop downs the error does not happen.

[pmckensey]

There is also a error happening on the text and background color selectors while in the jqueryui dialog.

Click the text color then click the background color without clicking in the editor area.

This the error that is generated:

Uncaught TypeError: Cannot call method 'setStyle' of null ckeditor.js:564 c.ui.add.onOpen ckeditor.js:564 d.onShow ckeditor.js:542 CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.proto.showBlock ckeditor.js:560 e ckeditor.js:541 c.execute ckeditor.js:536 (anonymous function) ckeditor.js:537 (anonymous function) ckeditor.js:26 CKEDITOR.tools.callFunction ckeditor.js:27 onclick

[Jakub Ś]

#10016 was marked as duplicate.

[Jakub Ś]

1. CKEditor in plain modal dialog works.

2. There are bugs in jQuery and jQuery admitted that problem is on their side - ​http://bugs.jqueryui.com/ticket/4727 and ​http://bugs.jqueryui.com/ticket/9087. Please see that second ticket was fixed two days ago thus problem might be gone after upgrading to UI version 1.10.2.

3. For those that can't wait there is a simple workaround. Please use jQuery 1.6.4 and jQuery UI 1.8.16 and in configuration specify - config.baseFloatZIndex = 102000;. There might be newer versions working with this trick but you will have to check it on your own.

4. @psyafter please see attached file. This is in fact your script but modified to use trick described in point 3. As you can see it works.

[Jakub Ś]

I'm confirming this bug and marking it as can't fix. It would be nice however if any of you guys could leave a comment if jQuery UI will fix 10.0.2 this issue.

[Jakub Ś]

This issue is now fixed by jQuery. To get it working correctly you need to use code mentioned in ​http://bugs.jqueryui.com/ticket/9087#comment:14 before creating dialog. Sample page index.html shows how to do it.

[Kevin Kamel]

@j.swiderski

Actually, no. Not at all. Had you taken a few minutes to test the proposed fix within your linked solution you would have seen that the jQuery proposed solution cannot work for us. It's pretty obvious if you just read the code as to why.

I have posted a general solution into ​http://bugs.jqueryui.com/ticket/9087, but it is not clear what is going to be the best solution overall for the community. By prematurely closing this ticket a lot of confusion has been created that can be seen in the forums, stackoverflow, as well as other areas. The problem is unresolved, although I am close to having something workable now.

[Kevin Kamel]

To be clear it's completely impossible for that fix to have ever solved any of the related problems here, which is a conclusion you can very quickly reach if you play with the original fiddle containing the proposed solution.

The original problem was a z-index related issue whereby various windows from jqueryUI and CKEditor would conflict with eachother. The logic attached to 9087 doesn't "fix" the problem per se, but it does provide a workaround that is good enough for now. Hopefully in the future we're going to see a proper fix.

I found literally dozens of threads on jquery, jqueryUI and CKEditor forums pointing at this post and indicating that the solution doesn't work, so it's important for people to know that the final solution in ​​http://bugs.jqueryui.com/ticket/9087 does appear to be a successful workaround. Currently it is deployed with a few thousand people using it, and no issues found. If issues are found the fix will be posted to ​​http://bugs.jqueryui.com/ticket/9087.

[Jakub Ś]

@kamelkev yes you are right the proposed workaround doesn't work. Yours on the other hand (thanks to hooks provided by jQuery) seems to solve this problem.
I'm not sure right now whether something got cached or perhaps I was checking some older version of jQuery anyway I would appreciate if your comments weren't so rude. Everyone can make mistake you know. Offending people doesn't make you bigger.

Back to the issue - I have attached index2.html page (with @kamelkev fix) that does seem to solve this particular problem and allows editing dialog fields even in jQuery UI 10.0.0+