Ask a Jedi: Why isn't my form reloading the whole page?
This blog entry actually covers something I've covered a few times, but as I keep getting questions, I figure it can't hurt to cover it again. Rual asks:
I have a simple question about AJAX, CFDIV and links, I have a little page that uses the CFDIV tag to include a file depending on the selected value in a combobox, currently works great with the BIND attribute, but when the included page in the CFDIV have a cfform and a submit button, the page reloads "inside" the CFDIV and doesnt replace the whole page, how can I make it so it replaces the page? links on the included page in the CFDIV will in fact replace the whole page but the submit buttons of the form, it wont.
Is this a bug?
No, it's a feature! Seriously. When it comes to CFDIV (and other things you can put content in, like the CFWINDOW, etc), Adobe used the following rules:
- For forms that use the FORM tag, the post will replace the entire page.
- For forms that use the CFFORM tag, the post will replace just the contents of the div/window/etc.
- Normal HTML links will replace the entire page.
- Links generated via the AjaxLink function will stay inside the div/window/etc.
So the idea is - you have some control over whether or not you want to stay inside the element.
Comments
My second guess was a hidden feature :) Thanks
# Posted By Raul Riera
| 10/31/07 3:51 PM
So would it not have been easier to add an option to all the above to select page/div refresh? From memory there are other differences between form/cfform than this one that mean that this will limit the usefuless of one or the other?
Just a beginners question tbh
Peter
Just a beginners question tbh
Peter
# Posted By Peter Doyle
| 10/31/07 4:29 PM
I LOVE the CFDIV tag. I'm completely rebuilding my CMS, and the CFDIV tag has been the centerpiece of it. Reloading within the div is really fantastic.
As a general rule, if you are surprised by behavior generated by server-side code, do a 'view source' of the page in question. It's the best way to see what is happening on the client side.
# Posted By Gus
| 10/31/07 9:01 PM
This ability to keep the cfform post action within the cfdiv, etc., is, to me, one of the great features of these tags. The user can complete the business intuitively associated with the popped-up cfwindow, etc., without disturbing the underlying page.
# Posted By James Edmunds
| 11/1/07 8:57 AM
When we designed CFDIV, we tried to think of default behaviours that would be useful to developers, and keeping form submission local to the CFDIV was on the top of the list. There is still an easy way to get the whole page to submit - use ColdFusion.Ajax.submitForm() in the onclick event of the form submission button.
I have just come across an interesting 'feature', not sure if anyone has seen this. I have a cfdiv containing a cfform which I want to stay in the cfdiv on submission. This works as expected and the form submits to the action page, I see a 'Loading...' message and the form then come back with the changes applied - all good.
Then if I click the submit button again the form is submitted but not in the cfdiv and I lose the rest of my page and end up with just the form taking up the whole page.
I'll see if I can create a demo - it may be a quirk somewhere else in my code that is causing to jump out of the cfdiv.
Then if I click the submit button again the form is submitted but not in the cfdiv and I lose the rest of my page and end up with just the form taking up the whole page.
I'll see if I can create a demo - it may be a quirk somewhere else in my code that is causing to jump out of the cfdiv.
# Posted By Dave Phipps
| 12/20/07 5:00 AM
Further investigation: If the action page does a cflocation back to the form page then the next time the form is submitted results in the form submission jumping out of the cfdiv into the main page. I don't have a live cf8 server to provide a demo but see the code below:
cfdivtest.cfm:
<cfajaximport tags="cfform,cfdiv">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>CF DIV form test</title>
</head>
<body>
<h1>Cfdiv test</h1>
<p>This text is above the cfdiv</p>
<cfdiv style="clear: both;" id="divtest" bind="url:cfdivform.cfm" />
<p>This text is below the cfdiv</p>
</body>
</html>
cfdivform.cfm:
<cfif isdefined("url.testtext")>
<p>Submitted</p>
<cfoutput><p>#url.testtext#</p></cfoutput>
</cfif>
<cfform name="testfrm" id="testfrm" action="cfdivformresult.cfm" method="post">
<label for="testtext">Enter Text:</label> <cfinput type="text" name="testtext" id="testtext" size="20" maxlength="255" />
<input type="submit" name="submitbtn" id="submitbtn" value="Submit Test" />
</cfform>
cfdivformresult.cfm:
<cflocation url="cfdivform.cfm?testtext=#form.testtext#" addtoken="false" />
Submit the form then submit the form a second time and you will see that the surrounding text disappears.
Is this a bug or a 'feature' and if so how do we fix it? I would rather not have to remove the cflocation which seems to be the culprit.
cfdivtest.cfm:
<cfajaximport tags="cfform,cfdiv">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>CF DIV form test</title>
</head>
<body>
<h1>Cfdiv test</h1>
<p>This text is above the cfdiv</p>
<cfdiv style="clear: both;" id="divtest" bind="url:cfdivform.cfm" />
<p>This text is below the cfdiv</p>
</body>
</html>
cfdivform.cfm:
<cfif isdefined("url.testtext")>
<p>Submitted</p>
<cfoutput><p>#url.testtext#</p></cfoutput>
</cfif>
<cfform name="testfrm" id="testfrm" action="cfdivformresult.cfm" method="post">
<label for="testtext">Enter Text:</label> <cfinput type="text" name="testtext" id="testtext" size="20" maxlength="255" />
<input type="submit" name="submitbtn" id="submitbtn" value="Submit Test" />
</cfform>
cfdivformresult.cfm:
<cflocation url="cfdivform.cfm?testtext=#form.testtext#" addtoken="false" />
Submit the form then submit the form a second time and you will see that the surrounding text disappears.
Is this a bug or a 'feature' and if so how do we fix it? I would rather not have to remove the cflocation which seems to be the culprit.
# Posted By Dave Phipps
| 12/20/07 5:22 AM
Dave - I've seen issues with doing cflocation in a container before. I'd move away from that. Post to the same file instead of another file with the cflocation.
Or - don't submit at all. Use ColdFusion.Ajax.submitForm() to do it.
Or - don't submit at all. Use ColdFusion.Ajax.submitForm() to do it.
# Posted By Raymond Camden
| 12/20/07 8:20 AM
Thanks Ray, I have now modified the code to avoid the cflocation. It was force of habit to prevent a reload from resubmitting a form, but of course this doesn't apply to containers as you can't reload the individual containers by hitting refresh.
# Posted By Dave Phipps
| 12/20/07 9:20 AM
so is it possible to use a cflocation inside the cfdiv to replace the whole page?
I like the idea of staying in the div, but sometimes you just want out.
I like the idea of staying in the div, but sometimes you just want out.
# Posted By michael grove
| 5/23/08 1:08 AM
You have to remember that Ajax requests are different. If you say that a cfdiv points to foo.cfm, the browser makes a request for foo.cfm and expects content back. cflocation returns a header that says go someplace else. So I'm not sure how the Ajax will handle that - but it won't replace the entire page. If you want to do that - I'd just use javascript.
# Posted By Raymond Camden
| 5/23/08 5:39 AM
hi Ray
form post, ajaxlink() works fine now. but thing is, when i reinit app over this URL http://localhost/index.cfm/reinit/1, the ajaxified area performs INFINITE LOOPS.
do you have face same kind of problem?
form post, ajaxlink() works fine now. but thing is, when i reinit app over this URL http://localhost/index.cfm/reinit/1, the ajaxified area performs INFINITE LOOPS.
do you have face same kind of problem?
# Posted By Sinuy
| 5/28/08 9:23 AM
Sounds like a logic error in your code. Nothing about ajaxlink would cause this out of the box.
# Posted By Raymond Camden
| 5/28/08 12:13 PM