Solved

Display problems using CFTextarea richtext="yes" in a CFWindow tag

Posted on 2009-05-06
7
941 Views
Last Modified: 2013-12-20
I've got a form within a CFWindow. Within the form, I'm using cftextarea with richtext="yes" toolbar="Basic".

It works fine except for one problem: When you are editing within the cftextarea, and you hit the [return] key, the whole cfwindow pops down to the bottom of the page. I've tried lots of different settings for the cfwindow tag itself - center=true, center=false,, x=0, y=0, modal=true/false, etc. The only thing that makes a difference is to remove "richtext=yes" from the cftextarea. Then the window doesn't pop to the bottom of the page any longer. But I'd like to keep that functionality, *and* have the window stay in the middle of the screen. Any ideas?

Thanks!
<cfform action="/_Forms/ManageEmails.cfm?tag=sendEmail" method="post" name="myForm" onsubmit="ColdFusion.Window.onHide('EmailAnswer#url.EmailID#',onhide)">
<h3>Answer this email</h3>
<p align="left">Type your answer to this email in the box below. If this is not a final answer, check the "pending" box before clicking "Send" and the email will stay active and assigned to you for further correspondence.</p>
<p align="left">The sender's original email will be appended to the bottom of the email that you send to them.</p>
<cftextarea name="txtEmailSent" height="220" width="630" richtext="yes" toolbar="Basic" style="padding:5px; margin:5px;"><cfoutput>
<p>Dear #incoming.strFName# #incoming.strLName#,</p>
<p>&nbsp;</p>
<p>Sincerely,<br />
#division# Customer Service<br />
Phone: #divisionPhone#</p>
</cfoutput></cftextarea>
<br /><br />
<span class="highlightArea">
<Label for="bitPending" class="radioSelect">
<input type="checkbox" id="bitPending" name="bitPending"> Pending</Label></span>
<cfoutput>
<input type="hidden" name="EmailID" value="#url.EmailID#">
<input type="hidden" name="strCSType" value="#url.type#" />
<input type="hidden" name="type" value="#url.type#" />
<input type="hidden" name="subject" value="#url.subject#" />
<input type="submit" class="buttons" value="Send" style="margin-left:250px;">&nbsp;&nbsp;<input type="button" value="Cancel" class="buttons" onClick="ColdFusion.Window.hide('EmailAnswer#url.EmailID#'),location.href='/_Forms/ManageEmails.cfm?tag=cancelAnswer&type=#url.type#&EmailID=#url.EmailID#&subject=#URLEncodedFormat(url.subject)#'">
</cfoutput>
</cfform>

Open in new window

0
Comment
Question by:LilyGE
  • 4
  • 2
7 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 24322454
I do not see your described effects so it depends perhaps on your cfwindow settings.
Please post the parent page source.
0
 

Author Comment

by:LilyGE
ID: 24327230
Thanks Zvonko,

Here's the code I use to call the cfwindow.

<cfform name="test">
                    <cfinput type="button" name="btnLock#incoming.EmailID#" class="emailButton" style="font-weight:bold;" value="Reply" onClick="ColdFusion.Window.create('EmailAnswer#incoming.EmailID#','Answer this Email','/_Forms/EmailForms.cfm?tag=Answer&EmailID=#incoming.EmailID#&type=#url.type#&subject=#URLEncodedFormat(incoming.strEmailSubject)#',{height:600,width:700,modal:true,closable:true,draggable:true,resizable:true,center:true,initshow:true })" tooltip="Reply to this customer's email here." />
</cfform

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 24378448
Sorry for the delay but I still do not see the drop down of the cfwindow when I click [return] in the rich text editor field.
I test with IE6.0 and FF3.0.8

0
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 

Expert Comment

by:ojohnson
ID: 24390550
you most likely want to remove the onsubmit JavaScript in the cfform. hitting enter in a form typically means submit.
0
 

Author Comment

by:LilyGE
ID: 24390928
Thanks to both of you for your comments  - and thanks Zvonko for trying to reproduce my issue! I'd sidelined this briefly and am just now getting back to it. I actually just uninstalled Apache, and Coldfusion, and set up IIS7 and reinstalled ColdFusion (for other reasons), and I'm still getting the error. I *only* get the error when I hit return in a cftextarea with richtext="yes".

I did try removing the onsubmit tag in the cfform tag (I use it there to hide the window once the user has submitted the form.) That didn't have any effect, unfortunately. That's an interesting point, though, about [return] submitting a form. I tested that out in another cfwindow form on that page, and it only has an effect if the button has the focus. (Made sense after I thought about - otherwise you wouldn't be able to put carriage returns in a textarea.)

I'm creating the cfwindows using a function, instead of using the CFwindow tag. I had a good reason for it initially (can't remember why), but I think I can change that to a tag and see if that fixes the issue. If it does, I'll post that here for posterity.
0
 

Accepted Solution

by:
LilyGE earned 0 total points
ID: 24651285
No real solution to this one. It stopped happening - not sure why. Other users aren't having the problem. Oh well!
0
 

Author Comment

by:LilyGE
ID: 24845134
Finally figured this one out. This issue only happens in Firefox - not IE. Customer Service were all using IE to interact with the forms, and so they didn't run into this issue. Unfortunately, IE7 appears to have a memory leak with CFWindow - at least it did for us. So I switched Customer Service to Firefox when using the Email management application. Then of course, they started to have this "jumping window" problem.

An instance of CFWindow will "jump" down the page when:
  • there is a form with a CFTextArea object within it,
  • and the CFTextArea has richtext set to "yes",
  • and the user hits the "return" key within the cftextarea box,
  • and the original form is long and the cfwindow create button requires a scroll down the page to get to.
I finally figured out that the CFWindow wasn't jumping "down" the page - the background page was moving up, leaving the CFWindow half below the bottom of the browser window. The solution was to force the browser to the top when creating the CFWindow. So I added "window.scrollTo(0,0); return false" to the onClick event when creating the CFWindow instance. (see code snippet) In order to return the user to the original location in the list of emails to manage, I also pass the "next email" id in the URL and set that as the target after the form's action page executes.

<cfinput type="button" name="btnLock#incoming.EmailID#" class="emailButton" style="font-weight:bold;" value="Reply" onClick="window.scrollTo(0,0); return false, ColdFusion.Window.create('EmailAnswer#incoming.EmailID#','Answer this Email','/_Forms/EmailForms.cfm?tag=Answer&EmailID=#incoming.EmailID#&type=#url.type#&nextEmail=#nextEmail#&subject=#URLEncodedFormat(incoming.strEmailSubject)#',{height:600,width:900,modal:true,closable:true,draggable:true,resizable:true,center:true,initshow:true, })" tooltip="Reply to this customer's email here." />

Open in new window

0

Featured Post

Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question