Thursday, December 8, 2011

Error - CFForm, CFDiv, ColdFusion.Navigate, AJAX, and input="button"

I was killing myself trying to figure out what was going wrong here.  I had a cfform inside a cfdiv that was refreshing the entire page instead of refreshing through AJAX.  The idea was that a button was going to be used for the submit action, which would call a js function to use cfnavigte to refresh the cfdiv.  It went something like this.

<cfdiv id="refreshdiv">
     <cfform name="refreshform">
          <input type="hidden" value="#thatvalue#" name="valuetoupdate">
          <input type="button" src="images/mybutton.jpg" onClick="refreshfunction('refreshform')" />
     </cfform>
</cfdiv>

Javascript:

function refreshfunction(form) {
coldfusion.navigate(http://....../update.cfm,'refreshdiv',null,null,Post,form);
};

In any other case, that would submit the form and cause an AJAX refresh of just the div leaving any content before or after unaffected.  The example though refreshes the entire page.

I finally pieced this apart to realize that type="button" is the culprit.  I switched to a regular img tag instead of the input tag and it worked fine.  Maybe that's common knowledge, but I had no idea.  What a PITA.