Link to home
Start Free TrialLog in
Avatar of 14_east
14_eastFlag for United States of America

asked on

how to close a modal window with form button click?

I have a page that you can "reserve a table" by clicking on a floor plan, and choosing your table.  When clicked, it opens a modal window using fancybox.  in that modal, you can click on a button, which triggers some cold fusion code to set a session var.  I would also like it to close the modal after setting the session var, and then reload the page from which it originated.

Any ideas?  My (very basic) CF code is below:

<cfif isDefined ('form.reserveTable')>
<cfset session.myTableID = #form.vip_tableNumber#>

</cfif>

Open in new window

Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Is there any reason to use fancybox?

you could use cfwindow, which may do the same job.
Avatar of 14_east

ASKER

Yes, its already used, and there's no turning back;)
The coldfusion window  worked for me.


Here is a sample code.

<!--- COLDFUSION PAGE SESSIONFORM.CFM ---->

<cfif #isdefined("session")#>
<cfdump var="#session#"/>
</cfif>


<cfajaximport tags="cfform">
<cfajaximport tags="cfwindow">
<cfajaxproxy  cfc="sessionManager" jsclassname="sessionManager">


<script>
var sMgr= new sessionManager();
sMgr.setErrorHandler(showError);
sMgr.setCallbackHandler(handleResultAdd);

function showWindow() {
      ColdFusion.Window.show('MyWindow');
}

function hideWindow() {
      ColdFusion.Window.hide('MyWindow');      
}
function deleteWindow() {
      
      ColdFusion.Window.destroy('MyWindow');
}
function addAction(){
      alert("Hello");
      var fData = {};
      fData.variable1 = document.addForm.variable1.value;
      fData.variable2 = document.addForm.variable2.value;
      alert ('FDATA' + fData);
      sMgr.addField(fData);
}
function showError(res){      

      alert('Error ..'  + res);
}
function handleResultAdd(res){      

      hideWindow();

      window.location.reload(true);            
      
}
</script>

<div align="center" style="padding: 100px;">
      <p style="padding-bottom:50px;">Example of CFWindow Show and Hide</p>
      <cfform name="form1">
      <cfinput name="showBtn" type="button" value="Show Window" onclick="showWindow()"/>
      <cfinput name="hideBtn" type="button" value="Hide Window" onclick="hideWindow()"/>
      <!---cfinput name="deleBtn" type="button" value="Destroy Window" onclick="deleteWindow()"/--->
</cfform>
</div>

<cfwindow width="600" height="250" refreshOnShow="false" bodyStyle="background-color: ##FFF;
      background-repeat: no-repeat;
      background-position: right bottom;"
        name="MyWindow" title="Add a User"  center="true" headerStyle="background-color: ##f0f0f0; padding: 8px;"
        closable="true" draggable="false" resizable="false" initshow="false" modal="false">
       
<cfform name="addForm" method="post">
<table width="400" border="0" cellspacing="10" cellpadding="5">
    <tr>
      <td width="200" align="right">Variable Value 1</td>
      <td colspan="3"><cfinput type="text" name="variable1" class="forminput1"></td>
    </tr>
    <tr>
      <td width="200" align="right">Variable Value 2</td>
      <td colspan="3"><cfinput type="text" name="variable2" class="forminput1"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td colspan="3"><table width="100" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><cfinput type="button" name="Add Session Variable" onclick="javascript:addAction();" value="Add to Database" class="formbutton1"></td>
          <td>&nbsp;</td>
        </tr>
      </table></td>
    </tr>
  </table>
</cfform>
</cfwindow>



<!---- SESSIONMANAGER.CFC ---->
<cfcomponent>

      <!---- init ---->
      <cffunction name="init" returntype="any">
            <!--- Your Initialization will go here --->
            <cfreturn this />
      </cffunction>

<!--- Adds a  Session Field --->
      <cffunction name="addField" access="remote" output="yes" returntype="Any">
            <cfargument name="fields" type="struct" required="yes">
            <cfif #len(fields.variable1)#>
                  <cfset Session.Variable1 = #fields.variable1#>
            </cfif>
            <cfif #len(fields.variable2)#>
                  <cfset Session.Variable2 = #fields.variable2#>
            </cfif>
            <cfreturn 0>
      </cffunction>    
</cfcomponent>
Avatar of 14_east

ASKER

I'll take a look for future reference, but that will not work here...
Page reload code could be

window.location.reload(true);  

But I do not much about fancybox,
Sorry !
Avatar of 14_east

ASKER

maybe how to just invoke the js via cold fusion, after my setting of the session ID?  I know the actual syntax for closing fancybox... it is:

$.fancybox.close();

Open in new window

Since you have a handle on javascript/Jquery part of the solution,

Look in the example code posted earlier,

This shows, how you can  use cfajaxproxy to call cfc code from Javascript,

I am sure you  will eventually figure out.
ASKER CERTIFIED SOLUTION
Avatar of _agx_
_agx_
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of 14_east

ASKER

Yea, thats what I was thinking... its not working!
Avatar of 14_east

ASKER

HEY, _agx_, I changed to this:  parent.$.fancybox.close();   and it works great.  Thanks!
Avatar of 14_east

ASKER

Wait, _agx_, any idea on how to refresh the parent page also, right before closing modal or right after?
Avatar of 14_east

ASKER

Forget it... here's my final working code:

<cfif isDefined ('form.reserveTable')>
<cfset session.myTableID = #form.vip_tableNumber#>
<script type="text/javascript">
 parent.$.fancybox.close();
 parent.window.location.reload(true);
</script>
</cfif>

Open in new window

Sorry, I stepped away.  Glad you worked it out.
Btw, the window.location.reload(true); part was suggested by pravinasar - not me. So feel free to split the points if you want.