CFWINDOW and a form submit not working as expected

Report · Feb 10, 2011

Hello, everyone.

I currently have a page that allows certain users the ability to edit content directly, without having to log on to a CMS; the user can click an edit button if they have permission which will open a CFWINDOW that contains the pre-populated form for editing.

If I open the form directly in a browser (IE7 on WinXP SP3) and click the submit button, all is well.

However, when I use the EDIT link and open the form in the CFWINDOW, clicking submit will post all form data EXCEPT the input="file"; upon submit, I get an error saying that the field for file doesn't exist.

Any idea what could be causing this?

Thanks,

^_^

PS. If required, I can post some code; but I cannot provide a link as this is on a private internal network that the public does not have access to.

Report · Feb 10, 2011

I did find some information that this is related to AJaX submitting the form; if anyone knows of a solution/workaround, please let me know.

Thanks,

^_^

Report · Feb 10, 2011

Yes, It's a browser/AJAX limitation rather than CF. Simply put, you cannot do this.

However, we can do an iframe hack that goes around this. Do realize that the iframe content knows nothing of the ajax surroundings, so theoretically we might have a problem closing the window automatically after submitting... but we can go around this too by calling the parent document's javascript function which does the closing for us. Notice that when you include the iframe tag within cfwindow, browsers stop rendering any content from there on. You have to place your cfwindow code at the bottom of the document, it seems.

You can experiment with this set of files - and compare how things work with and without iframes.

test.ajaxfile.cfm:

function myhandler() {}

function myerrorhandler() {}

function windowclose(windowname){

ColdFusion.Window.hide(windowname);

}

</script>

</head>

<body>

<a href="Javascript:ColdFusion.Window.show('window1');">Show window</a>

</cfwindow>

</body>

</html>

---

test.ajaxfile.windowcontent.cfm:

</cfform>

--

test.ajaxfile.process.cfm

myfile existed: <cfoutput>#isDefined("myfile1")#</cfoutput>

<br>

<a href="Javascript:ColdFusion.Window.hide('window1');">Hide window (normally)</a><br>

<a href="Javascript:windowclose('window1');">Hide window (javascript root document function)</a><br>

<a href="Javascript:parent.window.windowclose('window1');">Hide Window (use this form within an IFRAME!</a><br>

Report · Feb 11, 2011

Here's the code I have, thus far.

Main webpage (this calls the CFWINDOW):

<cfoutput>
     <div class="more-info">
     [<a href="javascript:void(0);" onclick="windowModal('Edit_NU','#trim(url.thisNav)#',500,700,'Edit News & Updates - #ucase(url.thisNav)#','edit_nu.cfm?thisNav=#trim(url.thisNav)#',true)">edit</a>]
     </div>
</cfoutput>

windowModal function:

function windowModal(win_name,TID,h,w,t,f,m){ 
     var windowName = typeof win_name === 'undefined' ? 'CFWindowName' : win_name;
     var thisID = typeof TID === 'undefined' ? 0 : TID;
     var thisHeight = typeof h === 'undefined' ? 400 : h;
     var thisWidth = typeof w === 'undefined' ? 700 : w; 
     var thisTitle = typeof t === 'undefined' ? "_" : t;
     var thisDocument = typeof f === 'undefined' ? "faq.cfm?faqID="+thisID+"" : f;
     var thisModal = typeof m === 'undefined' ? true : m;
     ColdFusion.Window.create(windowName,
          thisTitle,
          thisDocument,
          {width:thisWidth,height:thisHeight,center:true,resizable:true,modal:thisModal,draggable:thisModal});
     
     //ColdFusion 9 bug fix
     ob = ColdFusion.Window.getWindowObject(windowName);
    ob.center();
     ob.body.applyStyles("background-color:#fff");
     
     ColdFusion.Window.onHide(windowName,destroyWindow);
}

function destroyWindow(name){
     ColdFusion.Window.destroy(name,true);     
}

edit_nu.cfm

<cfset client.thisNav = trim(url.thisNav) />
<iframe src="edit_nu2.cfm" name="NU_update" width="100%" 
     marginwidth="0" height="100%" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">
Your browser does not support iFrame and cannot be used for this action.
</iframe>

edit_nu2.cfm:

<cfoutput query="resultset">
<cfform action="edit_nu2.cfm?nuid=#resultset.NU_ID#&thisNav=#trim(url.thisNav)#" method="post" enctype="multipart/form-data" preloader="no" format="html" onsubmit="return getFileName();">
<cfswitch expression="#val(resultset.active_ind)#"><cfcase value="1"><cfset variables.yesChecked = 1><cfset variables.noChecked = 0></cfcase><cfcase value="0"><cfset variables.yesChecked = 0><cfset variables.noChecked = 1></cfcase></cfswitch>
<table width="100%">
     <tr>
          <td style="width:25%; text-align:right; vertical-align:center;">Page & ID: </td>
          <td style="width:75%; text-align:left; vertical-align:top;">#client.thisNav# - #resultset.NU_ID#      Active:<cfinput type="radio" name="active_ind" value="1" checked="#val(variables.yesChecked)#" /> Y <cfinput type="radio" name="active_ind" value="0" checked="#val(variables.noChecked)#" /> N</td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top;">Large HL: </td>
          <td style="text-align:left; vertical-align:top;"><cfinput type="text" name="large_headline" visible="true" style="width:98%;" value="#resultset.NU_large_headline#" maxlength="100" /></td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top;">Small HL: </td>
          <td style="text-align:left; vertical-align:top;"><cfinput type="text" name="small_headline" visible="true" style="width:98%;" value="#resultset.NU_small_headline#" maxlength="50" /></td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top; height:130px;">Image: </td>
          <td style="text-align:left; vertical-align:top;"><cfif isDefined("resultset.NU_large_image") AND len(resultset.NU_large_image) gt 0><cfset variables.imageData = resultset.NU_large_image /><cfset variables.thisWidth = 300 /><cfimage action="writeToBrowser" source="#ToBinary(variables.imageData)#" width="200" /><cfelse>None</cfif></td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top;">Upload/Replace: </td>
          <td style="text-align:left; vertical-align:top;"> </td>
     </tr>
     <tr>
          <td style="text-align:center; vertical-align:top;" colspan="2"><input type="file" name="NU_image" style="width:95%;" /><br /><input type="hidden" name="NU_image_name" /></td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top;">Article: </td>
          <td style="text-align:left; vertical-align:top;"> </td>
     </tr>
     <tr>
          <td style="text-align:center; vertical-align:top;" colspan="2"><cftextarea richtext="yes" name="article_content" tooltip="Content" value="#resultset.NU_article_content#" style="width:97%;" height="350"></cftextarea></td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top;">Inserted: </td>
          <td style="text-align:left; vertical-align:top; font-weight:bold;">#resultset.NU_inserted_by# on #DateFormat(resultset.NU_inserted_dttm,'mm-dd-yyyy')# #TimeFormat(resultset.NU_inserted_dttm,'hh:mm tt')# </td>
     </tr>
     <tr>
          <td style="text-align:right; vertical-align:top;">Last Updated: </td>
          <td style="text-align:left; vertical-align:top; font-weight:bold;">#resultset.NU_updated_by# on #DateFormat(resultset.NU_updated_dttm,'mm-dd-yyyy')# #TimeFormat(resultset.NU_updated_dttm,'hh:mm tt')# </td>
     </tr>
     <tr>
          <td colspan="2" height="*" style="text-align:center; vertical-align:top;"><cfinput type="submit" name="submitBtn" value="Update"></td>
     </tr>
</table>
</cfform>
</cfoutput>

I've got the form inside an iFrame, already. If I open edit_nu2.cfm directly in a browser, it works with no problem. But opening it in the JS created CFWINDOW prevents the contents of the input type="file" from being recognized.

^_^

Report · Feb 13, 2011

Fernis wrote:
Yes, It's a browser/AJAX limitation rather than CF. Simply put, you cannot do this.

It is indeed a limitation of ColdFusion.Ajax.submitForm. See this recent thread on AJAX form submission. You could use the form tag instead of cfform.

Report · Feb 14, 2011

BKBK wrote:
Fernis wrote:
Yes, It's a browser/AJAX limitation rather than CF. Simply put, you cannot do this.
It is indeed a limitation of ColdFusion.Ajax.submitForm. See this recent thread on AJAX form submission. You could use the form tag instead of cfform.

Unfortunately, I am trying to use the richtext="yes" parameter of the CFTEXTAREA element, and CFTEXTAREA will not work without CFFORM. They want to have the ability to upload thumnail images to associate with the link that will take the user to the article.

^_^

Report · Feb 14, 2011

I replied to this, and for some reason it's not being saved, so I'm replying again, hoping that it doesn't disappear.

BKBK wrote:
Fernis wrote:
Yes, It's a browser/AJAX limitation rather than CF. Simply put, you cannot do this.
It is indeed a limitation of ColdFusion.Ajax.submitForm. See this recent thread on AJAX form submission. You could use the form tag instead of cfform.

Unfortunately, I am trying to use the richtext feature of a CFTEXTAREA tag, and that will not work without CFFORM. They want to be able to upload a thumbnail image that will be associated with the link to the article, itself. And the version of fckEditor that comes with CF9 doesn't allow for uploading of images, only placement of images that already exist on the server.

^_^

OH SURE.. now that I've re-entered my reply, they are both showing. Sigh.

Message was edited by: WolfShade