Raymond Camden's ColdFusion Blog: Ask a Jedi: Why isn't my form reloading the whole page?

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.

This entry was posted on Wednesday, October 31, 2007 at 3:45 PM. It was filed in the following categories: ColdFusion. It has been viewed 3,530 times and has 14 comments.

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

Comment 1 written by Raul Riera on 31 October 2007, at 3:51 PM

My second guess was a hidden feature :) Thanks
Comment 2 written by Peter Doyle on 31 October 2007, at 4:29 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
Comment 3 written by Ian on 31 October 2007, at 6:39 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.
Comment 4 written by Gus on 31 October 2007, at 9:01 PM

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.
Comment 5 written by James Edmunds on 1 November 2007, at 8:57 AM

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.
Comment 6 written by Ashwin on 3 November 2007, at 8:32 PM

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.
Comment 7 written by Dave Phipps on 20 December 2007, at 5:00 AM

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.
Comment 8 written by Dave Phipps on 20 December 2007, at 5:22 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.
Comment 9 written by Raymond Camden on 20 December 2007, at 8:20 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.
Comment 10 written by Dave Phipps on 20 December 2007, at 9: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.
Comment 11 written by michael grove on 23 May 2008, at 1:08 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.
Comment 12 written by Raymond Camden on 23 May 2008, at 5:39 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.
Comment 13 written by Sinuy on 28 May 2008, at 9:23 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?
Comment 14 written by Raymond Camden on 28 May 2008, at 12:13 PM

Sounds like a logic error in your code. Nothing about ajaxlink would cause this out of the box.