469,950 Members | 1,757 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

home > topics > javascript > questions > adding rich text editor made me lose focus

Post your question to a community of 469,950 developers. It's quick & easy.

adding rich text editor made me lose focus

114 100+
I have a web page which used to work fine until i added a rich text editor.

the pages are in ASP and it is a news weblog, with a comments section where people click the headline of a comment and it opens into a pop up page ccalled "comment_view.asp" which has a reply button. If anyone wants to reply to the message, they click reply and it takes them to the parent page (view.asp) where there is a form for them to fill in,and submit the comment. It was setup to prefill the "subject" and focus on the "comment" section.

This used to work fine until i added a "rich text editor" to the comment box. What happens now, is that the subject DOES get prefilled, however, the cursor does not focus on the "comment". I did change some of the things in the comment submission form, however i can't see what the problem is. I need the cursor to focus on "comment" like it used to and send the comment into the taskbar, like before. Does anyone know what i need to add or change?

Here is the code from the page where the comment form is

Expand|Select|Wrap|Line Numbers
  1. <body OnLoad="initialiseWebWizRTE();">
  2.  
  3.  
  4.     <table align="center" width="400" cellpadding="2" cellspacing="0" border="0">
  5.                                         <form action="_comments.asp?ID=<%=NID%>" method="post" name="frm3" id="frm3" onSubmit="return ValidateComment()">
  6.                                         <tr>
  7.                                             <td width="100">Name</td>
  8.                                             <td width="300"><%=Session("PMMS_USERNAME")%></td>
  9.                                         </tr><tr>
  10.                                             <td>Country</td>
  11.                                             <td width="300"><%=Session("PMMS_COUNTRY")%></td>
  12.                                         </tr><tr>
  13.                                             <td>Subject*</td>
  14.                                             <td width="300"><input type="Text" name="subject" value="" maxlength="50" class="textbox" style="width: 100%"></td>
  15.                                         </tr><tr>                        
  16.                                                             <%
  17.  
  18.     'Declare the ASP variables used
  19.     Dim strFormName
  20.     Dim strTextAreaName
  21.  
  22.     'ID tag name of the HTML form the textarea is within
  23.     strFormName = "frm3"
  24.  
  25.     'ID tag name of HTML textarea being replaced
  26.     strTextAreaName = "comment"
  27.  
  28.     %>                            
  29.  
  30.         <td valign="top">Comment*</td>
  31.                                             <td width="300">    <!-- include the Web Wiz Rich Text Editor -->
  32.     <!--#include file="RTE_editor_inc.asp" -->    <textarea name="comment" id="comment" rows="6" cols="50"  style="width: 100%;" class="textbox"></textarea>                                        
  33.                                             <input type="Checkbox" name="allowE" value="1" />Allow readers to email me.
  34.                                             </td>
  35.                                         </tr><tr>
  36.                                             <td></td>
  37.                                             <td><input type="Submit" value="Leave Comment" /></td>
  38.                                         </tr>
  39.                                         <input type="Hidden" name="mode" value="set" /></form>
  40.                                         </table>

and this is the code on the comment page, which users click on to take them back to the parent page. The subject lines works fine, but the line at the end which says " opener.document.frm3.comment.focus(); " is the one i suspect lost focus somewhere? I can't see why, because the text area is still called "comment" even tho i did add an "id" called "comment" as well. Or maybe it's the body onload function in the parent page for the rich text editor that's causing the problem? Would appreciate any help or advice. Thanks in advance.

Expand|Select|Wrap|Line Numbers
  1.   <td width="20%" height="38" align="left" valign="middle"><%IF blLOGGED_IN = True THEN%>
  2.             <a href="javascript:Respond();" class="keyplayersmall style6">Post Reply</a>
  3.             <%END IF%>
  4.         &nbsp;</td>
  5.  
  6.     </table>
  7.  <script langauge="javascript">
  8. function Respond(){
  9. opener.document.frm3.subject.value="RE:<%=SUBJECT%>"
  10. opener.document.frm3.comment.focus();
  11.  
  12. }
  13.               </script>
Apr 23 '07 #1
11 5010
jhardman
3,406 Expert 2GB
This is viewable from the web? Could you post a link?

Jared
Apr 26 '07 #2
karen987
114 100+
This is viewable from the web? Could you post a link?

Jared
Hi Jared,

this isn't on the web yet, as im having a few other problems that need sorting out..it was before as a test and was working fine till the rich text editor was added,
i think it's "document.focus" the last line that is the problem..as it should focus on "comment" but since the rich text editor was added it doesn't focus on "comment" though it does prefill the sujject line. I added an "id" and something else, but i can't see why that should be the problem, unless its the bodyonload function that causes it ....
Apr 26 '07 #3
karen987
114 100+
since adding the rich text editor, this was added, i don't know if it has any bearing.....


Expand|Select|Wrap|Line Numbers
  1.                 <%
  2.  
  3.     'Declare the ASP variables used
  4.     Dim strFormName
  5.     Dim strTextAreaName
  6.  
  7.     'ID tag name of the HTML form the textarea is within
  8.     strFormName = "frm3"
  9.  
  10.     'ID tag name of HTML textarea being replaced
  11.     strTextAreaName = "comment"
  12.  
  13.     %>        
Apr 27 '07 #4
karen987
114 100+
by the way, this code
Expand|Select|Wrap|Line Numbers
  1. <!--#include file="RTE_editor_inc.asp" -->    <textarea name="comment" id="comment" rows="6" cols="50"  style="width: 100%;" class="textbox"></textarea>
calls up the following include file RTE_editor_inc.asp:


Expand|Select|Wrap|Line Numbers
  1. <!--#include file="RTE/functions/RTE_functions_common.asp" -->
  2. <!--#include file="RTE/RTE_configuration/RTE_setup.asp" -->
  3. <%
  4. '****************************************************************************************
  5. 'Response.Write(vbCrLf & vbCrLf & "<!--//" & _
  6. vbCrLf & "/* *******************************************************" & _
  7. vbCrLf & "Application: Web Wiz Rich Text Editor ver. " & strRTEversion & "" & _
  8. vbCrLf & "Info: http://www.richtexteditor.org" & _
  9. vbCrLf & "Copyright: ©2001-2006 Web Wiz. All rights reserved" & _
  10. vbCrLf & "******************************************************* */" & _
  11. vbCrLf & "//-->")
  12. '***** END WARNING - REMOVAL OR MODIFICATION OF THIS CODE WILL VIOLATE THE LICENSE AGREEMENT ******
  13.  
  14.  
  15.  
  16. 'Load default CSS and Javascript
  17. Response.Write(vbCrLf & vbCrLf & "<link href=""RTE_configuration/default_style.css"" rel=""stylesheet"" type=""text/css"" />")
  18. Response.Write(vbCrLf & "<script language=""JavaScript"" src=""RTE_javascript_common.asp"" type=""text/javascript""></script>")
  19.  
  20.  
  21. 'If this is an RTE enabled web browser load in the RTE content
  22. If RTEenabled() <> "false" Then
  23.  
  24.     'Load in Javascript for RTE browsers
  25.     Response.Write(vbCrLf & "<script language=""JavaScript"" src=""RTE_javascript.asp?textArea=" & Server.URLEncode(strTextAreaName) & """ type=""text/javascript""></script>")
  26.  
  27.  
  28.  
  29. 'If this is not an RTE enabled web browser load in the NON-RTE content
  30. Else
  31.  
  32.     'Load in Javascript for non-RTE browsers
  33.     Response.Write(vbCrLf & "<script language=""JavaScript"" src=""non_RTE_javascript.asp?textArea=" & Server.URLEncode(strTextAreaName) & """ type=""text/javascript""></script>")
  34.  
  35.     'Display an message that the user is using the non-RTE editor
  36.     Response.Write(vbCrLf & "<script language=""JavaScript"">")
  37.     Response.Write(vbCrLf & "    alert('Your web browser is not Rich Text Enabled.\nYou are using the standard text box area.');")
  38.     Response.Write(vbCrLf & "</script>")
  39. End If
  40.  
  41. 'Create Toolbar and Iframes
  42. Response.Write(vbCrLf & "<script language=""JavaScript"">WebWizRTEtoolbar('" & strFormName & "');</script>")
  43.  
  44. %>
Apr 27 '07 #5
jhardman
3,406 Expert 2GB
since adding the rich text editor, this was added, i don't know if it has any bearing.....


Expand|Select|Wrap|Line Numbers
  1.                 <%
  2.  
  3.     'Declare the ASP variables used
  4.     Dim strFormName
  5.     Dim strTextAreaName
  6.  
  7.     'ID tag name of the HTML form the textarea is within
  8.     strFormName = "frm3"
  9.  
  10.     'ID tag name of HTML textarea being replaced
  11.     strTextAreaName = "comment"
  12.  
  13.     %>        

Sorry, I keep hoping someone in the javascript forum will answer because I'm really not that good at it. the correct line should say something like this:
Expand|Select|Wrap|Line Numbers
  1. document.frm3.comment.focus();
  2.  
I'll try to get someone else to take a look.

Jared
May 7 '07 #6
iam_clint
1,208 Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. window.opener.document.frm3.subject.value="RE:<%=SUBJECT%>"
  2. window.opener.document.frm3.comment.focus();
  3.  
May 7 '07 #7
pbmods
5,821 Expert 4TB
Try using

Expand|Select|Wrap|Line Numbers
  1. window.opener.document.getElementById('comment').focus();
  2.  
Basically:
  • name is used when you type document.frm3.comment; multiple elements could have the same name.
  • id is unique to a particular element, so if you call document.getElementById('comment'), there should only be one element returned.

Are you getting an error, or is the script just not doing anything? Maybe it's focusing the wrong element. Try something crazy like:

Expand|Select|Wrap|Line Numbers
  1. window.opener.document.getElementById('comment').style.border = '5px solid red';
  2.  
and see if it puts a border around the correct element.
May 7 '07 #8
karen987
114 100+
Hi everyone, thanks for the tips above, which i tried, but no luck yet. I keep getting this debug invitation,



do you wish to debug?

can't move focus to the control because it is invisible, not enabled or of a type that does not accept the focus.

the error is on this line,

Expand|Select|Wrap|Line Numbers
  1. opener.document.frm3.comment.focus();
i've tried using
Expand|Select|Wrap|Line Numbers
  1. window.opener.document.getElementById('comment').focus();
but the results are the same, same error message.

I then tried it without the rich text editor and it works fine. The focus does go on "comment" and the pop up window diminishes into the bar at the bottom of the browser.

I think this is a problem in the rich text editor files. here is the one that initialises the RTE and it does say something about making the textarea invisible or hidden.


Expand|Select|Wrap|Line Numbers
  1. <%
  2. Response.AddHeader "pragma","cache"
  3. Response.AddHeader "cache-control","public"
  4. Response.CacheControl = "Public"
  5.  
  6. Dim strTextAreaName
  7.  
  8. strTextAreaName = Request.QueryString("textArea")
  9. %>
  10.  
  11. var colour;
  12. var htmlOn;
  13. var textAreaName = '<% = strTextAreaName %>';
  14.  
  15. <%
  16.  
  17.  
  18.  
  19. '***********************************************
  20. '***   JavaScript initialising RTE editor  *****
  21. '***********************************************
  22. %>
  23. //initialise RTE editor
  24. function initialiseWebWizRTE(){
  25.  
  26.  var textArea = document.getElementById(textAreaName);
  27.  var textAreaWidth = parseInt(textArea.offsetWidth);
  28.  var textAreaHeight = parseInt(textArea.offsetHeight);
  29.  
  30.  //hide textarea
  31.  textArea.style.display = 'none';
  32.  
  33.  //create the iframe
  34.  var iframe = document.createElement('iframe');
  35.  iframe.setAttribute('id', 'WebWizRTE');
  36.  textArea.parentNode.insertBefore(iframe, textArea);
  37.  
  38.  //style iframe
  39.  iframe.style.width = textAreaWidth + 'px';
  40.  iframe.style.height = textAreaHeight + 'px';
  41.  iframe.style.border = '#A5ACB2 1px solid';
  42.  
  43.  //make toolbar the same size
  44.  document.getElementById('toolbar').width = textAreaWidth + 2 + 'px';
  45.  
  46.  var editor = document.getElementById('WebWizRTE').contentWindow.document;
  47.  
  48.  //create iframe page content
  49.  var iframeContent;
  50.  iframeContent  = '<html>\n';
  51.  iframeContent += '<head>\n';
  52.  iframeContent += '<link href="RTE_configuration/default_style.css" rel="stylesheet" type="text/css" />\n';
  53.  iframeContent += '<style>html,body{border:0px;background-color:<% = strRTEbackgroundColour %>;}\ntd{border:1px dotted #C3E4ED;}\n</style>\n';
  54.  iframeContent += '</head>\n';
  55.  iframeContent += '<body leftmargin="1" topmargin="1" marginwidth="1" marginheight="1" class="RTEtextarea">\n';
  56.  iframeContent += textArea.value;
  57.  iframeContent += '</body>\n';
  58.  iframeContent += '</html>';
  59.  
  60.  editor.open();
  61.  editor.write(iframeContent);
  62.  editor.close();
  63.  
  64.  function initIframe(){
  65. <%
  66.  
  67. 'IE uses contentEditable instead of designMode to prevent runtime errors in IE6.0.26 to IE6.0.28
  68. 'IE uses proprietary attachEvent instead of following the W3C Events module and using addEventListener
  69. 'IE SUCKS!!
  70. If RTEenabled = "winIE" Then
  71.  
  72. %>  
May 9 '07 #9
pbmods
5,821 Expert 4TB
Expand|Select|Wrap|Line Numbers
  1. 'IE SUCKS!!
  2.  
A very pertinent comment coming from an ASP document!
[EDIT: I agree with you wholeheartedly :)]

What does this output:

Expand|Select|Wrap|Line Numbers
  1. alert(opener.document.frm3.comment + '\n' + opener.document.frm3.comment.nodeName + '\n' + opener.document.frm3.comment.style.display + '\n' + opener.document.frm3.comment.style.visibility);
  2.  
(I think that about covers it; the first two make sure you're getting the correct element, and the last two make sure it's visible.)

[EDIT: If you get an error instead of an alert box, then opener.document.frm3.comment is probably undefined. Try:
Expand|Select|Wrap|Line Numbers
  1. alert(opener.document.frm3.comment);
  2.  
to confirm it.]
May 9 '07 #10
karen987
114 100+
A very pertinent comment coming from an ASP document!
[EDIT: I agree with you wholeheartedly :)]

What does this output:

Expand|Select|Wrap|Line Numbers
  1. alert(opener.document.frm3.comment + '\n' + opener.document.frm3.comment.nodeName + '\n' + opener.document.frm3.comment.style.display + '\n' + opener.document.frm3.comment.style.visibility);
  2.  
(I think that about covers it; the first two make sure you're getting the correct element, and the last two make sure it's visible.)

[EDIT: If you get an error instead of an alert box, then opener.document.frm3.comment is probably undefined. Try:
Expand|Select|Wrap|Line Numbers
  1. alert(opener.document.frm3.comment);
  2.  
to confirm it.]
PBmods,

Thank you, but i've solved the problem now, as i suspected it involved adding the code from the RTE,

This code works now,

Expand|Select|Wrap|Line Numbers
  1. <script langauge="javascript">
  2. function Respond(){
  3. opener.document.frm3.subject.value="RE:<%=SUBJECT%>";
  4. opener.document.getElementById('WebWizRTE').contentWindow.focus();
  5.  
  6. }
  7.               </script>

Could you (or anyone else) suggest what i should add to the above to solve another little problem which is:

When someone clicks reply to the code above, the cursor now focusus on the RTE area, however, if the page is a long one, and the form is at the bottom, then the user doesn't see the cursor. He may not know that he has to scroll to the bottom of the page, to see the comment form he has to fill in. this is because even though the cursor has move to the RTE area, the page is still there, in the same spot even though the pop up comment window has diminished.

It would be good, if when the cursor hits the text area, and the pop up page is diminished in the bottom of the page, THE PAGE FOCUS MOVES TO THE TEXT AREA TOO.

Would appreciate any tips as to what to add to the javascript code above to make this happen.
May 10 '07 #11
excuse me, i saw that you solve problem but i tried all versions for work over my simplepage and result is just = 0. :( can you post to me your page code ( i have to look how you insert it) please i know maybe i disturb you but i never find the way. help or not thanx from now.. )
May 29 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics
Rich Text Editor
1 post views Thread by PC User | last post: by
(Free) Rich Text Box web control...
8 posts views Thread by EEEdiot | last post: by
Dynamically adding a control...I think! :)
2 posts views Thread by Web Team | last post: by
BYTES.COM © 2022
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.