ColdFusion and setting Focus on FORM field in CFDIV or CFWINDOW
Tags: ColdFusion 8, Coldfusion, Ajax UI, ColdFusion 9
I wanted to write about this because I read on another blog how he does it, and I am really surprised about it because it isn't the right way to do it.
I did try to contact the author as you can't post to his blog, nor can you contact him via is website. So I thought it would be best to explain why he is wrong here.
First lets look at the reason why he is wrong.
In the post he basically is using a form like the following that can be displayed inside of a cfdiv tag and/or cfwindow tag.
<input name="NameFirst" type="text" id="SetFocus" value="" />
<input name="NameLast" type="text" value="" />
<input name="Submit" type="submit" value="SUBMIT" />
</cfform>
And he then states that you need to do this on the main calling page.
fnSetFocus=function() {
document.getElementById("SetFocus").focus();
document.getElementById("SetFocus").select();}
</script>
<cfset AjaxOnLoad("fnSetFocus")>
The problem is that this might work with very short time loads, or page loads but in reality this is not the correct way to do it. The reason being is that he states that you need to do this on the main page, and use the AjaxOnLoad() to then call the function.
The problem here is that the AjaxOnLoad is used to execute any code that is needed to be run, after the framework is loaded. If you are in a situation where you need to click on something on the page, and have to load something inside of the div or window the code will always run because the condition of AjaxOnLoad will be true, as the framework has already loaded.
This creates a problem if the page that is being loaded takes awhile, and those fields are not yet available. Which will result in a JavaScript error, this can cause headaches further down the track if you start seeing these JS errors and you try to work out why they are not working.
When needing to use JavaScript in a cfdiv or even a cfwindow you will be able to use the JavaScript as you would have in normal pages, by just making sure that the code to set focus is at the end of the document. So in this example he would have been better to combine the whole thing into one file and returned that content in the cfdiv as shown below.
<input name="NameFirst" type="text" id="SetFocus" value="" />
<input name="NameLast" type="text" value="" />
<input name="Submit" type="submit" value="SUBMIT" />
</cfform>
<script>
document.getElementById("SetFocus").focus();
</script>
I hope others don't start falling into the trap thinking that AjaxOnLoad() is doing anything more than waiting for the framework to be loaded, because if you do then you will trying to find more bugs later on down the track.
ColdFusion and setting Focus on FORM field in CFDIV or CFWINDOW - http://cfbloggers.org/?c=44942
Oct 7, 2010
-
Sweet! Been wondering about this!
While on the subject, here's a related issue that has been driving me crazy. And I see this comment composition form is in a CFWindow, so you might be the perfect one to answer this for me...
I have a form that lets users add a new product to the sites catalog. When they want to add a new category to the form, I pop up a CFWindow so they can add, update, delete, or even select a new category. When they complete an action in the CFWindow, I would like the window to close as soon as the database updates, then have the CFDiv that contains the category selection in the main form refresh.
I can't get this to work. Once the form inside the CFWindow updates, I can't trigger an event to close the window and refresh the CFDiv on the main form. I've tried everything I can think of. The only way I can get this to work is:
After the action completes in the CFWindow, I have to show the user a message that the action completed. Then they have to click a link in that window. When they click that link, the CFWindow closes and the CFDiv on the main form refreshes. But the only way I can make all of that happen is for the user to click the link I put in the action response saying something like click to close.
Ideally, I would be able to flash a 2 second message in the CFWIndow saying that the action has completed, then the window would close and the CFDiv refreshes.
I really would like to save the user from having to click the close window link since its a pointless extra step.
I hope that was all clear enough...
Any ideas? -
There is a number of ways you can approach this, and the most simplest would be when you submit your data in the form, you run a piece of JavaScript code that does something like this.
ColdFusion.navigate('windowsource.cfm','name of CFDiv');
ColdFusion.Window.destroy('nameOfWindow',true);
When the above code is run it will tell the cfdiv what page needs to be loaded up, and then close the window down.
Hope that helps.# Posted By Andrew Scott | 10/7/10 6:30 PM -
I think you may have misunderstood the intention of the post you are quoting. The AjaxOnLoad call in not on the main page calling the cfdiv or cfwindow. It is the last item of the cfdiv or cfwindow, the javascript is in the main page.
The javascript, in the example, is only setting the focus of a form field in the cfdiv or cfwindow. Focus can not be set as a result of the main page loading but only after the ajax has loaded. The reason for the post was to point out that you can not use the onload attribute of a cfform to execute javascript while inside a cfdiv or cfwindow.
Thank you for your time.# Posted By Michael Ferguson | 1/17/11 7:28 AM -
I stand by my post on that issue.
# Posted By Andrew Scott | 1/17/11 6:11 PM
-
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.
# Posted By Michael Ferguson | 2/5/11 8:19 PM
TweetBacks