HOME | FERGUSON Digital Blog

Focus FORM field in CFDIV or CFWINDOW

ColdFusion Add comments

Here is how to set the focus of a form field in a CFDIV or a CFWINDOW so that when triggered the user only has to start typing and is not forced to select a specific text field first. This is accomplished by placing a JavaScript function on the main page and using the AjaxOnLoad tag in the CFDIV or CFWINDOW to execute the function.

On our main page is the JavaScript function:

<script type="text/javascript">
   fnSetFocus=function() {
      document.getElementById("SetFocus").focus();
      document.getElementById("SetFocus").select();}
</script>

The first getElementById actually sets the focus to the specified ID, the second one selects or highlights any entries that may exist in that field as a result of previous data collection.

Inside the CFDIV or CFWINDOW (AjaxOnLoad is placed at the bottom and is executed as soon as the Ajax has completed loading):

<cfform action="#CGI.SCRIPT_NAME#" method="get" name="FormEmployee">
   <input name="NameFirst" type="text" id="SetFocus" value="" />
   <input name="NameLast" type="text" value="" />
   <input name="Submit" type="submit" value="SUBMIT" />
</cfform>

<cfset AjaxOnLoad("fnSetFocus")>

The OnLoad attribute in the CFFORM will not trigger a JavaScript call since it is inside either a CFDIV or CFWINDOW, because it is generated through Ajax. This is why the AjaxOnLoad call has to be used to reference a JavaScript function on the main page.

If you find this post useful please leave a comment and let me know how you used the information.

5 responses to “Focus FORM field in CFDIV or CFWINDOW”

  1. Michael Ferguson on Seems this post is being misquoted elsewhere. To clear things up, please note that the AjaxOnLoad is to be included at the bottom of your CFDIV or CFWINDOW, not on the page calling the CFDIV or CFWINDOW.

    The purpose of this blog entry is to show you how to set the focus to a field inside a CFFORM loaded by a CFDIV or CFWINDOW since the OnLoad attribute of the CFFORM will not fire a JavaScript function.

    If there is any more confusion, please let me know.
  2. Andrew Scott on If you bothered to read my post, you don't need the script on the main page that you are using.

    Secondly, there are also known issues with using the AjaxOnLoad() within ajax driven content.

    Now my post clearly stated without going through the trouble of using the AjaxOnload(), or using the onload of the form. You can still achieve what you are tyring to do without the extra overheads of your method.
  3. Michael Ferguson on Reposted from the gentleman's own blog site.

    You bring up valid points about timings... issues with extensive content delivered through a cfdiv or cfwindow, but to quote you: "The problem here is that the AjaxOnLoad is used to execute any code that is needed to be run, after the framework is loaded". You restate the point of my post in your argument against it. That is exactly what is covered by the example; code that needed to be run after the framework was loaded without being able to rely on an onload attribute of the cfform (specifically to illustrate how the onload attribute of a cfform inside a cfdiv or cfwindow is not going to work). The example wasn't about loading a cfdiv or cfwindow that contained some content that the user might need to click on to load other content, it was about setting focus to a cfform field inside ajax.

    You are entitled to stand by your post, but what you are commenting on was my mine. You are correct, the same can be achieved by placing a script to execute the focus (not a function call, but inline) at the end of the cfdiv or cfwindow. In the large projects as you describe, where page delivery is slowed by length of content...you will sacrifice separation of "content and behavior" by placing script at the bottom of the code however. I have not had many good experiences with this organization practice especially when it leads to problems created with DOM triggers when created at the bottom of the document. Not to mention the headaches it gives me when documenting and organizing the source code when inline script calls appear throughout the body.

    Maybe it was the method of presentation or wording, but the object of the article was supposed to be concentrating on the onload of the cfform not working like someone with less experience than us might expect. I have found also, that inline script calls at the end of ajax pages don't fire like one might expect either, so for this example there may not be a best of any situation for a solution. This is the best part of writing in ColdFusion, there is usually more than one way to accomplish something and what keeps us employed is that one way isn't always the best way for every situation.

    I look forward to your continued content, please keep up the posts. Every piece of knowledge we can share for free in an open forum such as this only strengthens the ColdFusion community.
  4. laptop akku on . I have found also, that inline script calls at the end of ajax pages don't fire like one might expect either, so for this example there may not be a best of any situation for a solution. This is the best part of writing in ColdFusion, there is usually more than one way to accomplish something and what keeps us employed is that one way isn't always the best way for every situation.
  5. hermes brikin on The view that I have found also, that inline script calls at the end of ajax pages don't fire like one might expect either is so unique for me, i agree.

Leave a Reply




© Copyright 1997-2024, All Rights Reserved Coldfusion and MS SQL2008
Powered by Mango Blog.   Design by FERGUSON Digital
o:Event name="beforeHtmlBodyEnd" />