JC asks:
Have you had any success placing focus on a text field inside a cflayoutarea? Is this possible or am I chasing a red herring?
I had not tried this before, but it wasn't too hard. First consider a simple CFLAYOUT page:
<cflayout type="border"><cflayoutarea position="left" align="center" size="400" collapsible="true" title="Menu"> <p> Menu 1 </p> <p> Menu 2 </p> <p> Menu 3 </p> </cflayoutarea>
<cflayoutarea position="center"> <p> <form id="someform"> <input type="text" name="username" id="username"> </form> </p> </cflayoutarea>
</cflayout>
Notice I've placed a form inside the main layout box. I want to run code to set focus when the page loads, and ColdFusion provides a function for this - ajaxOnLoad():
<cfset ajaxOnLoad("setfocus")>The code for setfocus is no different than any other JavaScript code to set focus:
<script> function setfocus() { var myfield = document.getElementById("username"); myfield.focus(); } </script>The only thing to watch out for is that ajaxOnLoad is a bit picky. It requires your JS function to be inside <HEAD> tags. So a complete example would be:
<html> <head> <script> function setfocus() { var myfield = document.getElementById("username"); myfield.focus(); } </script> </head><body> <cflayout type="border">
<cflayoutarea position="left" align="center" size="400" collapsible="true" title="Menu"> <p> Menu 1 </p> <p> Menu 2 </p> <p> Menu 3 </p> </cflayoutarea>
<cflayoutarea position="center"> <p> <form id="someform"> <input type="text" name="username" id="username"> </form> </p> </cflayoutarea>
</cflayout>
<cfset ajaxOnLoad("setfocus")>
</body> </html>
Archived Comments
Holy bold code text Batman. Sup with that? :)
Eh? I don't see any bold text. FF/OSX.
Yeah, I'm on FF/Windows. Your code areas are suddenly bold. Just pointing it out, nothing more. Poke me if you need a screenshot.
Well, is it readable? :)
Should this work if I place the js code in a htmlhead block?
I must have missed something if it should.
Thanks, Ray.
Had been beating my head trying figure out how to do this on a form inside cfwindow.
The example you gave worked fine in cfwindow, too.
Keith
Michael: What happens when you do that? I never use cfhtmlhead. I don't like it much.
Does anyone know how to set the focus in a field, in a page, being called to the "center" of a cflayout via"
ColdFusion.Layout.collapseArea('HomeLayout','left'); ColdFusion.navigate('formPage.cfm', 'main');"
I tried your above post but received errors, and never got the focus...is the script and ajaxonload able to be in the page being opened?
TD
I found a solution to this. It seems that IE has a problem setting focus on a new element added to the DOM (FF works fine, of course).
To get around this, do exactly what Ray showed above but add myfield.select() before the myfield.focus(). Place the script on the main page (mine works both inside and outside of the head tag) and place the ajaxonload on the page you're loading (in my case, I'm loading the page into a cfdiv). Hope that helps.