Server-Side callback function to solve JS-CF execution order dependency?

Question

I would like to call a form as pop-up window (a form with some input fields and a submit button) and then read the user selected results from the session. The problem is that the mixing of JS code (pop-up window) with CF (server-side) code, as is expected, causes the process to output the session variable before the process updates it. For better understanding, hereunder is the scenario together with some relevant code snippets:

Scenario:

       1. User calls ShowForm(..)
       2. ShowForm(..) displays a pop-up window and waits for the user
to submit his selection
       3. The result gets stored in the session
       4. The function returns the user-submitted result

form.cfc

    <cffunction name="ShowForm" access="public" output="true" returntype="string">

        <script>
         window.showModalDialog('formpage.cfm',null,"dialogHeight=400px,dialogLeft=150px"); 
    </script>

        <cfreturn session.form_result> <!--- @toFix: The return of form_result is happening before the actual form_result is set. ---> 
   </cffunction>

formpage.cfm

    <cfajaxproxy cfc="components.sess_mgr" jsclassname="JSMaskProxy">


    <script>
    function submitSelection(formObj)
    {

     for (i=0; i<intSelValue.length; i++)
      result.push(intSelValue[i]);

       var instCfProxy = new JSMaskProxy();                 
      instCfProxy.setToSession(result);     // updates session.form_result
      //window.returnValue=result;  
      window.close();
    }
    </script>

     <form name="frmDtls">
        <td align="center"><input type="button" id="selectButton" name="selectButton" onClick="submitSelection(details);">
     </form>

What's your take on this? How to solve this problem?

ColdFusion.navigate(..) function can have a callback function and an error handler but the thing is that the callback function can only be a client-side function. If the function could be a CF function or maybe a server-side page I think that would solve this dependency problem.

Something on the side, ideally I would love to read the value from window.showModalDialog rather than reading it from the session, but this is just a sketch and the main point here is how to overcome this JS-CF intermingling problem.

Answer 1

Rather than using window.showModalDialog use something like cfwindow, jQuery dialog or an extjs window. All of these have some form of callback or event listener. cfwindow has a onHide function, jQuery dialog has a close option to which a function can be assigned, ext.window has onHide, as well as event listeners.

All of these will allow you to open a new "window" and run some function when the window is hidden or closed. Those functions should all have access to anything from the window as well as being able to access the main window.

Ray Camden has a cfwindow example : http://www.coldfusionjedi.com/index.cfm/2008/9/26/Ask-a-Jedi-Another-CFWINDOW-Example

jQuery dialog has an example of what you're after : http://jqueryui.com/demos/dialog/#modal-form

Sencha's Ext.Window examples show passing values to the main window when a dialog is closed : http://dev.sencha.com/deploy/dev/examples/message-box/msg-box.html

Plenty of options there. I hope they help.

Answer 2

Problem solved!

The solution adopted is based on Stephen Moretti idea which is that of replacing window.showModalDialog with cfwindow call. This alone does not solve the problem. However, I worked when replacing the script tag with cfscript, and then inside the cfscript I simply do a server-side redirection to the page with cfwindow tag.