Why isn't my iframe editable when it is in a JQuery Dialog?

views:

262

answers:

Why isn't my iframe editable when it is in a JQuery Dialog?

I'm trying to develop a simple management system for press releases for my company and one of the requirements for this system is that it has a wysiwyg interface for the content of the press release. The company has four websites and want to put all the press releases in one place and have the four sites pull the necessary data from there. Anyway, the wysiwyg editor is to make it simpler for non-developers to enter the press releases.

So here's what I'm trying to do. To give it some pizzaz (if it looks good, the boss thinks it is good), I'm trying to use a JQuery modal dialog, populated with JQuery tabs to walk whoever through the process of entering the press release. On the last page, there is an iframe that should be editable using designMode = "on" and exeCommand...

When I just put this iframe in a normal page, it works fine. I can edit things, I can bold them, add italics, blah blah blah... However, when it's in the dialog, it is not editable. I can't type in it or anything.

I've been googling and found one place with the same problem, but no solution.

Would the brilliant people here at StackOverlfow have any idea why this is happening?

you may have competition between frameworks over the disposition of keyboard events. What happens if you set your JS debugger to break on next statement and then press a key? Does this behaviour happen across browsers in an identical way?

DDaviesBrackett 2009-06-29 20:36:43

Ya know, i should have checked IE first. It works in IE. But it does not work in Chrome, Firefox, Safari, or Opera. As for the debugging, I'm not even sure where to put a breakpoint for JQuery. The whole script is minimized so the variable names aren't exactly the clearest.

Brent Parker 2009-06-29 21:18:16

Rather than setting a breakpoint on a specific line of code, tell your debugger to Break On Next Statement (Firebug 1.4 betas have a button for that, and I'm sure WebKit does too somewhere).Also, you can find un-minimized versions of jquery on the jquery website; it'll be worth it to use them while you debug this problem.

DDaviesBrackett 2009-06-29 22:00:44

I'll have to take a look at that tomorrow. However, I'm not sure that's going to do me any good. I can't even get focus in the iframe. I can't even get to a cursor. It's as though the designMode is set to off, but when I inspect it with firebug it is definitely on. I've tried tabbing to it and it can be tabbed to, but I still don't have focus inside it.

Brent Parker 2009-06-29 22:44:02

I sort of fixed the problem. I had the dialog as modal. When I turned modal off, it allows me to edit the iframe. I would rather have it be modal but that's not completely necessary. Thanks for your help DDaviesBrackett! I appreciate it!

Brent Parker 2009-06-30 15:09:36

+1 A:

I had the same scenario. The solution is rather simple. The designmode=on property should be set on the IFRAME once you make the IFRAME visible. You cannot even put the iframe in left:-1000px and set "designmode = on". The IFRAME should be visible within the screen area. So the solution would be to show the IFRAME first and then set the design mode property to ON.

Prakash 2009-09-18 16:34:22

ansaurus

tags:

views:

answers:

Why isn't my iframe editable when it is in a JQuery Dialog?

related questions