adding rich text editor made me lose focus

karen987

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

 <body OnLoad="initialiseWebWizRTE();">
 
    <table align="center" width="400" cellpadding="2" cellspacing="0" border="0">

                                        <form action="_comments.asp?ID=<%=NID%>" method="post" name="frm3" id="frm3" onSubmit="return ValidateComment()">

                                        <tr>

                                            <td width="100">Name</td>

                                            <td width="300"><%=Session("PMMS_USERNAME")%></td>

                                        </tr><tr>

                                            <td>Country</td>

                                            <td width="300"><%=Session("PMMS_COUNTRY")%></td>

                                        </tr><tr>

                                            <td>Subject*</td>

                                            <td width="300"><input type="Text" name="subject" value="" maxlength="50" class="textbox" style="width: 100%"></td>

                                        </tr><tr>                        

                                                            <%
 
    'Declare the ASP variables used

    Dim strFormName

    Dim strTextAreaName
 
    'ID tag name of the HTML form the textarea is within

    strFormName = "frm3"
 
    'ID tag name of HTML textarea being replaced

    strTextAreaName = "comment"
 
    %>                            
 
        <td valign="top">Comment*</td>

                                            <td width="300">    <!-- include the Web Wiz Rich Text Editor -->

    <!--#include file="RTE_editor_inc.asp" -->    <textarea name="comment" id="comment" rows="6" cols="50"  style="width: 100%;" class="textbox"></textarea>                                        

                                            <input type="Checkbox" name="allowE" value="1" />Allow readers to email me.

                                            </td>

                                        </tr><tr>

                                            <td></td>

                                            <td><input type="Submit" value="Leave Comment" /></td>

                                        </tr>

                                        <input type="Hidden" name="mode" value="set" /></form>

                                        </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

   <td width="20%" height="38" align="left" valign="middle"><%IF blLOGGED_IN = True THEN%>

            <a href="javascript:Respond();" class="keyplayersmall style6">Post Reply</a>

            <%END IF%>

        &nbsp;</td>
 
    </table>

 <script langauge="javascript">

function Respond(){

opener.document.frm3.subject.value="RE:<%=SUBJECT%>"

opener.document.frm3.comment.focus();
 
}

              </script>

jhardman

This is viewable from the web? Could you post a link?

Jared

karen987

Quote:

Originally Posted by jhardman

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 ....

karen987

since adding the rich text editor, this was added, i don't know if it has any bearing.....

Expand|Select|Wrap|Line Numbers

                 <%
 
    'Declare the ASP variables used

    Dim strFormName

    Dim strTextAreaName
 
    'ID tag name of the HTML form the textarea is within

    strFormName = "frm3"
 
    'ID tag name of HTML textarea being replaced

    strTextAreaName = "comment"
 
    %>

karen987

by the way, this code

Expand|Select|Wrap|Line Numbers

 <!--#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

 <!--#include file="RTE/functions/RTE_functions_common.asp" -->

<!--#include file="RTE/RTE_configuration/RTE_setup.asp" -->

<%

'****************************************************************************************

'Response.Write(vbCrLf & vbCrLf & "<!--//" & _

vbCrLf & "/* *******************************************************" & _

vbCrLf & "Application: Web Wiz Rich Text Editor ver. " & strRTEversion & "" & _

vbCrLf & "Info: http://www.richtexteditor.org" & _

vbCrLf & "Copyright: ©2001-2006 Web Wiz. All rights reserved" & _

vbCrLf & "******************************************************* */" & _

vbCrLf & "//-->")

'***** END WARNING - REMOVAL OR MODIFICATION OF THIS CODE WILL VIOLATE THE LICENSE AGREEMENT ******
 
'Load default CSS and Javascript

Response.Write(vbCrLf & vbCrLf & "<link href=""RTE_configuration/default_style.css"" rel=""stylesheet"" type=""text/css"" />")

Response.Write(vbCrLf & "<script language=""JavaScript"" src=""RTE_javascript_common.asp"" type=""text/javascript""></script>")
 
'If this is an RTE enabled web browser load in the RTE content

If RTEenabled() <> "false" Then
 
    'Load in Javascript for RTE browsers

    Response.Write(vbCrLf & "<script language=""JavaScript"" src=""RTE_javascript.asp?textArea=" & Server.URLEncode(strTextAreaName) & """ type=""text/javascript""></script>")
 
'If this is not an RTE enabled web browser load in the NON-RTE content

Else
 
    'Load in Javascript for non-RTE browsers

    Response.Write(vbCrLf & "<script language=""JavaScript"" src=""non_RTE_javascript.asp?textArea=" & Server.URLEncode(strTextAreaName) & """ type=""text/javascript""></script>")
 
    'Display an message that the user is using the non-RTE editor

    Response.Write(vbCrLf & "<script language=""JavaScript"">")

    Response.Write(vbCrLf & "    alert('Your web browser is not Rich Text Enabled.\nYou are using the standard text box area.');")

    Response.Write(vbCrLf & "</script>")

End If
 
'Create Toolbar and Iframes

Response.Write(vbCrLf & "<script language=""JavaScript"">WebWizRTEtoolbar('" & strFormName & "');</script>")
 
%>

jhardman

Quote:

Originally Posted by karen987

since adding the rich text editor, this was added, i don't know if it has any bearing.....

Expand|Select|Wrap|Line Numbers

                 <%
 
    'Declare the ASP variables used

    Dim strFormName

    Dim strTextAreaName
 
    'ID tag name of the HTML form the textarea is within

    strFormName = "frm3"
 
    'ID tag name of HTML textarea being replaced

    strTextAreaName = "comment"
 
    %>

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

document.frm3.comment.focus();

I'll try to get someone else to take a look.

Jared

iam_clint

Expand|Select|Wrap|Line Numbers

 
window.opener.document.frm3.subject.value="RE:<%=SUBJECT%>"

window.opener.document.frm3.comment.focus();

pbmods

Try using

Expand|Select|Wrap|Line Numbers

window.opener.document.getElementById('comment').focus();

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

 
window.opener.document.getElementById('comment').style.border = '5px solid red';

and see if it puts a border around the correct element.

karen987

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

opener.document.frm3.comment.focus();

i've tried using

Expand|Select|Wrap|Line Numbers

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

 <%

Response.AddHeader "pragma","cache"

Response.AddHeader "cache-control","public"

Response.CacheControl = "Public"
 
Dim strTextAreaName
 
strTextAreaName = Request.QueryString("textArea")

%>
 
var colour;

var htmlOn;

var textAreaName = '<% = strTextAreaName %>';
 
<%
 
'***********************************************

'***   JavaScript initialising RTE editor  *****

'***********************************************

%>

//initialise RTE editor

function initialiseWebWizRTE(){
 
 var textArea = document.getElementById(textAreaName);

 var textAreaWidth = parseInt(textArea.offsetWidth);

 var textAreaHeight = parseInt(textArea.offsetHeight);
 
 //hide textarea

 textArea.style.display = 'none';
 
 //create the iframe

 var iframe = document.createElement('iframe');

 iframe.setAttribute('id', 'WebWizRTE');

 textArea.parentNode.insertBefore(iframe, textArea);
 
 //style iframe

 iframe.style.width = textAreaWidth + 'px';

 iframe.style.height = textAreaHeight + 'px';

 iframe.style.border = '#A5ACB2 1px solid';
 
 //make toolbar the same size

 document.getElementById('toolbar').width = textAreaWidth + 2 + 'px';
 
 var editor = document.getElementById('WebWizRTE').contentWindow.document;
 
 //create iframe page content

 var iframeContent;

 iframeContent  = '<html>\n';

 iframeContent += '<head>\n';

 iframeContent += '<link href="RTE_configuration/default_style.css" rel="stylesheet" type="text/css" />\n';

 iframeContent += '<style>html,body{border:0px;background-color:<% = strRTEbackgroundColour %>;}\ntd{border:1px dotted #C3E4ED;}\n</style>\n';

 iframeContent += '</head>\n';

 iframeContent += '<body leftmargin="1" topmargin="1" marginwidth="1" marginheight="1" class="RTEtextarea">\n';

 iframeContent += textArea.value;

 iframeContent += '</body>\n';

 iframeContent += '</html>';
 
 editor.open();

 editor.write(iframeContent);

 editor.close();
 
 function initIframe(){

<%
 
'IE uses contentEditable instead of designMode to prevent runtime errors in IE6.0.26 to IE6.0.28

'IE uses proprietary attachEvent instead of following the W3C Events module and using addEventListener

'IE SUCKS!!

If RTEenabled = "winIE" Then
 
%>

pbmods

Quote:

Originally Posted by karen987

Expand|Select|Wrap|Line Numbers

'IE SUCKS!!

A very pertinent comment coming from an ASP document!
[EDIT: I agree with you wholeheartedly :)]

What does this output:

Expand|Select|Wrap|Line Numbers

 
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);

(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

alert(opener.document.frm3.comment);

to confirm it.]

karen987

Quote:

Originally Posted by pbmods

A very pertinent comment coming from an ASP document!
[EDIT: I agree with you wholeheartedly :)]

What does this output:

Expand|Select|Wrap|Line Numbers

 
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);

(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

alert(opener.document.frm3.comment);

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

 <script langauge="javascript">

function Respond(){

opener.document.frm3.subject.value="RE:<%=SUBJECT%>";

opener.document.getElementById('WebWizRTE').contentWindow.focus();
 
}

              </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.

olympiatr

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.. )

adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

re: adding rich text editor made me lose focus

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about