Skip to main content
WolfShade
WolfShade
Legend
February 10, 2011
Question

CFWINDOW and a form submit not working as expected

  • February 10, 2011
  • 1 reply
  • 3665 views

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.

    This topic has been closed for replies.

    1 reply

    WolfShade
    WolfShadeAuthor
    Legend
    February 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,

    ^_^

    Fernis
    Fernis
    Inspiring
    February 11, 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:

    <cfajaximport tags="cfwindow,cfform">

    <html><head>

    <script>

    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 name="window1" title="Window 1" initshow="true" modal="true">

    <iframe id="myiframe" width="98%" height="98%" src="test.ajaxfile.windowcontent.cfm">

    <!---<cfinclude template="test.ajaxfile.windowcontent.cfm"> comment the iframe tag if you uncomment this line --->

    </cfwindow>

    </body>

    </html>

    ---

    test.ajaxfile.windowcontent.cfm:

    <cfform name="myform1" action="test.ajaxfile.process.cfm" id="myform1">

    <cfinput type="file" name="myfile1"><br>

    <cfinput type="submit" name="submit2" value="Normal Submit" ><br>

    <cfinput type="button" name="submit" value="Programmatic Submit" onclick="ColdFusion.navigate('test.ajaxfile.process.cfm','window1',myhandler,myerrorhandler,'POST','myform1');"><br>

    </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>

    WolfShade
    WolfShadeAuthor
    Legend
    February 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.

    ^_^

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices