Blank screen in Firefox with jQuery 1.2.3

torgosPizza - March 18, 2008 - 20:46
Project:TinyMCE
Version:5.x-1.9
Component:Code
Category:bug report
Priority:normal
Assigned:Unassigned
Status:won't fix
Description

When viewing pages that have the TinyMCE editor attached to textareas, using the latest stable build of jQuery (as of now, 1.2.3) - this error occurs in Firebug:

$ is not defined - collapse.js

Causing the entire screen to become blank except for the Enable rich-text link.

Replacing jQuery with the Drupal version solves this, but unfortunately means less features which are needed. For now I have disabled the editor.

Here is the entire dump from Firebug:

$ is not defined
(no name)()collapse.js (line 56)
e([legend, legend, legend, 1 more...], function(), undefined)jquery.js (line 11)
e(function(), undefined)jquery.js (line 11)
(no name)()collapse.js (line 55)
e()jquery.js (line 11)
e()jquery.js (line 11)
e([function(), function(), function(), 4 more...], function(), undefined)jquery.js (line 11)
e()jquery.js (line 11)
[Break on this error] var fieldset = $(this.parentNode);

Note that this bug does not occur in IE7. (Haven't checked others)

#1

torgosPizza - March 18, 2008 - 20:48
Title:Does not display in Firefox with jQuery 1.2.3» Blank screen in Firefox with jQuery 1.2.3

Edited title to better reflect issue

#2

jersu - March 27, 2008 - 23:21

I'm having the same issue. I've had to downgrade back to jquery 1.1.2 to edit any node with tinymce. Would appreciate a workaround / fix.

This website says to load tinymce before jquery, but I don't really see how that is possible in drupal without breaking other stuff : http://brian.pontarelli.com/2007/09/12/how-to-get-jquery-and-tinymce-to-...

This tracking issue suggests there is a workaround involving a patch, but seems like there is no solid resolution to the issue : http://drupal.org/node/118747

#3

torgosPizza - March 28, 2008 - 03:34

To be honest, the only workaround I've found so far was to switch to fckeditor. Happier trails... but if TinyMCE gets fixed for the new jQuery I might consider going back.

#4

mikl - April 8, 2008 - 14:17

I have this problem as well. Does anyone have a clue as to why this happens. My JavaScript debugger tells me nothing helpful...

#5

cbovard - May 7, 2008 - 20:11

subscribing

#6

TheRec - May 14, 2008 - 00:26

Hello,

I have exactly the same issue. I would really appreciate any fix, I've been searching a lot but I didn't find anything to make it work in Firefox :
That is the only JS error I get from Firebug :

$ is not defined
/misc/collapse.js
Line 57

Another thing, this error only happens with a specific content type : "Webforms". I can edit every other content types (default and custom ones) with TinyMCE editor without any problem.

Maybe that issue should be reported for jQuery_update module too, since they usually try to maintain downward compatibility ?
What's odd is that it doesn't work only in Firefox (tried latest Firefox 2 and Firefox 3 beta 5), I also tested in IE6, IE7 and Opera and it works flawlessly in those :S

As temporary "fix" to edit those node, I just disable Javascript before clicking on "Edit".

#7

hass - May 20, 2008 - 06:46

#8

TheRec - May 20, 2008 - 08:10

I upgraded to jQuery 1.2.4 (http://jqueryjs.googlecode.com/files/jquery-1.2.4.pack.js), jquery_update shows the good version (1.2.4, no error in the Status report of Drupal) and I still get the same issue unfortunately. Oh and I use the jquery_update because were still talking about 5.x ... I'm not really sure about the support for 1.2.4 of jquery_update, this version has been released less than a day ago ;)

#9

hass - May 20, 2008 - 08:48

Oh, missed this is a D5 case.

#10

sun - May 30, 2008 - 16:55

Just wanna let you guys know that I have forked TinyMCE module into Wysiwyg Editor module with plenty of improvements (some of which have been in TinyMCE's queue for ages). I'll publish a first official release shortly, so you might want to track http://drupal.org/project/wysiwyg

This particular bug is already fixed in Wysiwyg Editor. The new module also imports your existing settings from TinyMCE.

#11

hass - May 30, 2008 - 17:10

I'm very interested if this linked project will really become the D6 editor or if this is only a try...!?

#12

sun - May 30, 2008 - 17:52

There will never be *the* editor for Drupal. Wysiwyg as well as Wysiwyg Editor are API modules, and the goal is to support any client-side script-based editor in the wild. For now, it supports TinyMCE. We'll work on abstracting the logic of the current module to support other editors, like FCKeditor, nicEdit, aso.

#13

hass - May 30, 2008 - 18:47

I thought the plan is to integrate *a* basic WYSIWYG editor into core and not only an API... that's how i read Dries.

#14

TheRec - May 31, 2008 - 17:50

Since you have fixed this bug in the fork, could you please give some clues (or even a patch) how to solve it within TinyMCE module ? I'll sure check the Wysiwyg Editor module (the idea behind it is excellent by the way, I can't wait to use the first official release), but I'd like to get this working for a site that will be published pretty soon (so using a -dev version isn't really a solution in this case). Thanks in advance !

#15

sun - May 31, 2008 - 18:28

I don't see a way to fix this in TinyMCE. So, go ahead, download the dev snapshot and check what's not working for you yet.

#16

TheRec - May 31, 2008 - 23:54

Sorry, I didn't mention it before... I tested with the dev snapshot of Wysiwyg module and it works fine, no blank screen.
I also tried the dev snapshot of TinyMCE module but unfortunately it doesn't work, I get a blank screen (except the "disable rich-text", as described before)... oh and in both cases the "tinymce" directory were the same (I mean, same version, 2.1.3, clean install) and the jQuery version was the same (of course if I don't update jQuery, with the jquery_update module it works in every case).

#17

sun - June 1, 2008 - 16:06

Nice to hear. However, Wysiwyg Editor is a major re-write of TinyMCE module due to this patch #118747: Upgrade to jquery, improve obsolete js approaches, which actually also fixed this issue and has been in TinyMCE's queue for more than one year. If you look at http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/tinymce/?pa... you'll see that the last commit for TinyMCE module was 1 year ago. If you look at length of TinyMCE's queue, you'll see that this project is currently unmaintained.

If you have tested another patch in TinyMCE's queue that works and fixes or improves something that is still missing in Wysiwyg Editor, feel free to move the issue holding that patch over to Wysiwyg's queue. However, please ensure that the issue actually exists also in Wysiwyg Editor first.

#18

Andrew M Riley - June 10, 2008 - 14:16

This isn't a long term fix but if you really need it working, in tinymce.module:

find

//settings are saved as strings, not booleans
if ($profile->settings['show_toggle'] == 'true') {
// Make sure to append to #suffix so it isn't completely overwritten
$element['#suffix'] .= $wysiwyg_link;
}

and comment it out

/*
//settings are saved as strings, not booleans
if ($profile->settings['show_toggle'] == 'true') {
// Make sure to append to #suffix so it isn't completely overwritten
$element['#suffix'] .= $wysiwyg_link;
}
*/

This will kill the ability for you to enable/disable tinymce on a form field by form field basis but at least I don't get the dreaded whitescreen with disable rich text string. I've verified this on Firefox 3, IE 6, IE7 with Drupal 5.7 with TinyMCE module 5.x-1.9.

#19

katbailey - June 14, 2008 - 18:44

Hi All,
it seems you can get this to work without forgoing the enable/disable functionality by using jQuery to append the enable/disable link instead of doing document.write. So, in tinymce.module replace line 187, i.e.

    document.write("<div><a href=\"javascript:mceToggle('edit-$textarea_name', 'wysiwyg4$textarea_name');\" id=\"wysiwyg4$textarea_name\">$link_text</a></div>");

with
    $('#edit-$textarea_name').parent().append("<div><a href=\"javascript:mceToggle('edit-$textarea_name', 'wysiwyg4$textarea_name');\" id=\"wysiwyg4$textarea_name\">$link_text</a></div>");

I've so far only had a chance to test this on a mac but I tried it with both the old and new versions of jQuery and it works fine.

#20

TheRec - June 14, 2008 - 23:02

Great one, it works fine in Firefox 2.0.0.14 and Firefox 3.0 RC2 and RC3 (all those weren't working before), still works in the other browsers I've mentioned in my previous messages :) Good thinking trying to use jQuery to do the job cleaner ! And you found it just 2 days before my customer's site has to be published (not that it would have prevented it, but anyways it's way easier like this). Thanks a lot.

#21

katbailey - June 15, 2008 - 03:36
Status:active» needs review

OK, here's a patch - I changed it slightly so that it uses .after() instead of .parent().append()
Also, tested it in IE6 and it works fine.

AttachmentSize
tinymce_jqupdate2.patch 586 bytes

#22

Nall - June 18, 2008 - 14:43

Popped in the patch re #21, using tinyMCE 5.x-1.9 and jQuery 1.2.6, renders fine here. Definite +1, thanks.

#23

juroon - June 19, 2008 - 00:41

#21 worked for me too. Phew, I was in a tight spot. Thanks!

#24

Eugef - July 1, 2008 - 15:07

Thanks for the patch! It works great even for old jquery versions!

#25

armyofda12mnkeys - July 10, 2008 - 12:46

cool works for me, thanks!

#26

chirale - July 11, 2008 - 07:22
Status:needs review» reviewed & tested by the community

#21 works fine with JQuery Update 5.x-2.0-rc1 (JQuery 1.2.6) and TinyMce 5.x-1.9 (under Drupal 5.8). Thanks. I hope this patch will be submitted soon.

#27

ianchan - July 11, 2008 - 22:16

subscribing - same issue for me.

Only the Webform and Project content types go to blank screen (with link to disable rich-text). If I disable toggle rich-text in the TinyMce settings or if I rollback jQuery, the problems go away. Will try patch in #21

#28

tobiass - July 19, 2008 - 12:10

Hi

Same issue for me.

As a workaround I just disabled tinymce on pages with user/* since I don't need TinyMCE for user profiles.

#29

katbailey - July 19, 2008 - 17:20

Just in case it's not clear, this only happens when one of your textareas is in a collapsible fieldset, so for example if you're using Workflow module for content moderation you'll have a "comments" textarea within a collapsible fieldset and this causes tinymce to act up if you don't have the above patch.

#30

txcrew - July 25, 2008 - 16:12

I was having problem with Webforms edit screen.

Patch in #21 worked for me. Thanks!

txcrew

#31

sun - July 26, 2008 - 00:47

Friends,

of course you can keep on posting here. However, it might be worth to have a look at the list of RTBC issues, which could have been committed to this module a long time ago.

See also comment #17 above.

#32

AdrianB - July 29, 2008 - 13:39

Just wanted to add to the observation in #29, about collapsible fieldsets. I too experienced this when using CCK to group fields together. Whenever I put an rich text area in a group (and thus in a collapsible fieldset) the error occurred in Firefox.

Re #31: Yes, it's a dead end, but your Wysiwyg module isn't ready yet, so until then we have to use the old TinyMCE module and "make it work". I tried Wysiwyg for a while but eventually switched back to TinyMCE because it works better for me (although not unmodified).

#33

danbryant - July 29, 2008 - 14:01

Same idea but not jQuery based; Nothing against jQuery of course, its INCREDIBLE!

// as noted previously: tinymce.module (5.x-1.9) ; line ~187
else{
   var TinyMCEArea = document.getElementById('edit-$textarea_name');
   if(TinyMCEArea != null){     
      document.write("<div><a href=\"javascript:mceToggle('edit-$textarea_name', 'wysiwyg4$textarea_name');\" id=\"wysiwyg4$textarea_name\">$link_text</a></div>");
   }
}

Additionally I've tracked this to a problem with cck. Somehow cck will spontaneously transform a single line text field (lines set to 1 in the field configuration) into a multiple line textarea. The text field is still set to be a single line but it show up as a textarea. I am able to get the text field to behave by setting the "lines" to 2, saving the field, re-editing it to set the lines to 1, saving it again (... pain in the A$$).

#34

Shane Birley - August 1, 2008 - 05:08

#21 worked for me.

#35

mattq1982 - August 1, 2008 - 05:52

#21 worked for me too. Thanks.

Any idea when this is going to be rolled into the devel version of the module?

#36

katbailey - August 1, 2008 - 14:17

It probably never will. This module is now defunct I think and WYSIWYG module has taken over from it. The patch should just be used as a stop-gap solution if for some reason you can't switch to WYSIWYG.

#37

sun - August 1, 2008 - 14:43

@Katherine: Thanks & btw: your jQuery know-how would be very welcome for taking Wysiwyg to the next stage! (i.e. supporting multiple editors and multiple editor versions)

@all: Repeating myself from #17:
If you have tested another patch in TinyMCE's queue that works and fixes or improves something that is still missing in Wysiwyg Editor, feel free to move the issue holding that patch over to Wysiwyg's queue.
However, please ensure that the issue actually still exists also in Wysiwyg Editor first.

#38

robert_hanley - August 13, 2008 - 03:16

Greetings,

Thanks a bunch...I've been have a problem with this and the fix worked in:
ff 3.0.1
IE 7.0.5730.11 it opens the editor with tages (athough this may be caused by some combination of settings I have);
Safari 3.1.2 (no tags when the editor opens); and
Opera 9.25.

Thanks again!

#39

pcorbett - August 21, 2008 - 16:55

#21 Works for me, too. Thanks!

jquery 1.2.6
drupal 5.10
tinymce 5.x-1.9 / 2.1.0 (2-13-2007 release)

#40

1.kenthomas - August 19, 2008 - 21:58

Running jquery 1.2.6, TinyMCE 3.1.1/ module 5.x-1.9, encountered same problem. Not solved by patches above, rather, via http://drupal.org/node/234380. Which left me with nodewords incompatibility (http://drupal.org/node/249665) and admin/build/block incompatibility (turned off). FWIW.

#41

xell - September 23, 2008 - 05:06

#21 - This works for me! cool patch, thanks a lot :)

#42

naderat - October 29, 2008 - 03:57

This patch (#21) fixed my problem. Thanks katbailey :-)

#43

yogitha - October 29, 2008 - 11:57

Hi,

For my site i am using drupal5.x version .
i installed timymce and followed install.txt file for installing and enable(in this format sites/all/modules/tinymce/tinymce) .
For me every thing is working fine but, i am getting JavaScript error on page in IE6 & IE7(and i am not getting javascript errors in browsers Mozilla &Y Netscape).

Plz have a look at the attached image.

Do any one know solution for this.

AttachmentSize
javascript error on page.jpg 57.01 KB

#44

sun - December 4, 2008 - 02:47
Status:reviewed & tested by the community» won't fix

Please have a look at the TinyMCE project page. Marking as won't fix.

#45

melezhik - March 11, 2009 - 12:16

katbailey
Thanks you a lot!!!
Yor solution pretty works for me, that's delisious
!!!

#46

greenlite - April 3, 2009 - 18:28

Patch from #21 worked.

Incredible!

#47

GaryA - April 7, 2009 - 20:23

The Fix in #21 worked for me as well. With FireFox 3.07, Drupal 5.5, JSQuery 1.2.6 (JSQuery Update 2). Like others it worked before hand with IE 8.

#48

null_pointer - April 28, 2009 - 20:51

#21.... cool! thk!

#49

Adine - August 12, 2009 - 00:59

Thank you, you have just saved me so much time!

#50

zcferres - October 16, 2009 - 20:45

#21 worked for me as well.

 
 

Drupal is a registered trademark of Dries Buytaert.