cflayout: getElementById doesn't work when included in a source file
If I create a layout in CF9 using cflayout as below:
<cfajaximport tags="cfform">
<cflayout type="border" name="example">
<cflayoutarea position="center" name="_center" source="/example/center.cfm" />
</cflayout>
and then create a center.cfm file to be included:
<cfform name="myForm" id="myForm" action="post">
<cfinput name="field1" type="text"><br/>
</cfform>
<script>
ThisForm = document.getElementById('myForm');
alert(ThisForm.id);开发者_如何学编程
</script>
I get an error:
Error processing JavaScript in markup for element cf_layoutarea_center
But if I move the contents of center.cfm into the tag (and remove the source parameter) the code works as expect. Can anyone tell me how I can get this to work using the center.cfm file? Or explain why this doesn't work?
Thanks for your time.
Cheers Mark
(Dan provided the answer already. But just to show it can work ..)
This worked fine for me under CF9. I am not sure why adding the tags did not work for you.
test.cfm
<cfajaximport tags="cfform" />
<cflayout type="border" name="example">
<cflayoutarea position="center" name="_center" source="myForm.cfm" />
</cflayout>
myForm.cfm
<html>
<head>
<script type="text/javascript">
function myLoadFunction(){
ThisForm = document.getElementById('myForm');
alert(ThisForm.id);
}
</script>
</head>
<body>
<cfform name="myForm" id="myForm" action="post">
<cfinput name="field1" type="text"><br/>
</cfform>
</body>
</html>
<cfset AjaxOnLoad("myLoadFunction") />
You need to use the AjaxOnLoad ColdFusion method in order to fire off your javascript once the child page finishes loading. You need to define your function like this inside of center.cfm:
<script>
myLoadFunction = function(){
ThisForm = document.getElementById('myForm');
alert(ThisForm.id);
}
</script>
Then, anywhere in center.cfm, add the following ColdFusion:
<cfset AjaxOnLoad("myLoadFunction") />
That should fire the myLoadFunction as soon as center.cfm has finished loading in your cflayout tag.
EDIT: The Adobe LiveDocs has a section on how to handle dynamically included javascript.
The relevant section:
All JavaScript function definitions on pages that you include dynamically, for example by using a bind expression, the ColdFusion.navigate function, or a form submission within a ColdFusion Ajax container tag, must have the following syntax format: functionName = function(arguments) {function body}
Function definitions that use the following format might not work: function functionName (arguments) {function body}
It did not seem right to me that the center.cfm file needed to have the html, body and body tags, so I tried this (a combination of Dan & Leigh's solutions):
Main Page:
<html>
<head>
<script type="text/javascript">
function myLoadFunction(){
ThisForm = document.getElementById('myForm');
alert(ThisForm.id);
}
</script>
<cfajaximport tags="cfform">
</head>
<body>
<cflayout type="border" name="example">
<cflayoutarea position="center" name="_center" source="center.cfm" />
</cflayout>
</body>
</html>
And then center.cfm is simply:
<cfform name="myForm" id="myForm" action="post">
<cfinput name="field1" type="text"><br/>
</cfform>
<cfset AjaxOnLoad("myLoadFunction") />
THis works as expected, and we are not sending another html tag, etc in content that is being loaded via AJAX and added to the page.
Call function argument with ID name value.
I call the javascript function with ID value, then use ID value with getElementByID:
<script>
myLoadFunction = function(clickid){
ThisForm = document.getElementById(clickid);
alert(ThisForm.id);
}
</script>
加载中,请稍侯......
精彩评论