Submit Form to CFWINDOW

  • February 8, 2017
  • Posted by: user
  • Category: Uncategorized
No Comments

This may be wrost title. Basically I need to submit form and submit page should render in cfwindow object, another issue was there are some javascript code/function on my submit page as well which should be render to.

Normally CFWINDOW will execute script of rendering page and you many not able to call function defined in rendering page. Below code how you can submit form to CFWINDOW with loading script as well.

[code:cf]
<cfajaximport tags="cfwindow">
<html>
    <head>
        <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>
        <script>
            function submitMe(){
                var frm = window.document.frmTest;
                ColdFusion.Window.create("Windowresponse","Response Window","",{x:100,y:100,height:200,width:400,modal:true,closable:true,draggable:true,resizable:true,center:true,initshow:true});
                objWin = ColdFusion.Window.getWindowObject("Windowresponse");
                var objupdate = objWin.getUpdater();
              objupdate.update({url:frm.action,params:Ext.lib.Ajax.serializeForm("frmTest"), method:"POST",scripts:true});
            }
    </script>
</head>
<body>
     <form name="frmTest" action="testresponse.cfm">
         <input type="text" name="field1" value="hello there!"/>
        <input type="button" name="btnSubmit" onclick="submitMe()" value="Submit Me">
    </form>
</body>
</html>[/code]

In first line we need to import cfwindow tag as we are going to create CFWindow through javascript this will load necessary javascript. Coldfusion doesn’t include ext-base.js script file but to utilize ExtJs functions we may need to include it, as ext-base.js should added before ext-all.js we need to add script for ext-all.js right after that. Even though ext-all.js included by ColdFusion but this will be top of our code so this may not work for us.

ColdFusion.Window.create will create cfwindow and use getWindowObject function to get ExtJs object of cfwindow. ExtJs.Updater class will let you post content to cfwindow and update ajax call. objWin.getUpdater() function will retrun object of Ext.Updater which will be use to submit form through ajax call.

Now let’s call objupdate.update() function to call remote content. Notice option scripts: true this will let you load content with javascript and Ext.lib.Ajax.serializeForm("frmTest") will serialize form fields to url encoded string. 

That’s it…. Your form submitted to cfwindow including javascript.