14_east
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:
Any ideas? My (very basic) CF code is below:
<cfif isDefined ('form.reserveTable')>
<cfset session.myTableID = #form.vip_tableNumber#>
</cfif>
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="sessionManage r">
<script>
var sMgr= new sessionManager();
sMgr.setErrorHandler(showE rror);
sMgr.setCallbackHandler(ha ndleResult Add);
function showWindow() {
ColdFusion.Window.show('My Window');
}
function hideWindow() {
ColdFusion.Window.hide('My Window');
}
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(tru e);
}
</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-colo r: ##FFF;
background-repeat: no-repeat;
background-position: right bottom;"
name="MyWindow" title="Add a User" center="true" headerStyle="background-co lor: ##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> </td>
<td colspan="3"><table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><cfinput type="button" name="Add Session Variable" onclick="javascript:addAct ion();" value="Add to Database" class="formbutton1"></td>
<td> </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>
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="sessionManage
<script>
var sMgr= new sessionManager();
sMgr.setErrorHandler(showE
sMgr.setCallbackHandler(ha
function showWindow() {
ColdFusion.Window.show('My
}
function hideWindow() {
ColdFusion.Window.hide('My
}
function deleteWindow() {
ColdFusion.Window.destroy(
}
function addAction(){
alert("Hello");
var fData = {};
fData.variable1 = document.addForm.variable1
fData.variable2 = document.addForm.variable2
alert ('FDATA' + fData);
sMgr.addField(fData);
}
function showError(res){
alert('Error ..' + res);
}
function handleResultAdd(res){
hideWindow();
window.location.reload(tru
}
</script>
<div align="center" style="padding: 100px;">
<p style="padding-bottom:50px
<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-colo
background-repeat: no-repeat;
background-position: right bottom;"
name="MyWindow" title="Add a User" center="true" headerStyle="background-co
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> </td>
<td colspan="3"><table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><cfinput type="button" name="Add Session Variable" onclick="javascript:addAct
<td> </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>
ASKER
I'll take a look for future reference, but that will not work here...
Page reload code could be
window.location.reload(tru e);
But I do not much about fancybox,
Sorry !
window.location.reload(tru
But I do not much about fancybox,
Sorry !
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();
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yea, thats what I was thinking... its not working!
ASKER
HEY, _agx_, I changed to this: parent.$.fancybox.close(); and it works great. Thanks!
ASKER
Wait, _agx_, any idea on how to refresh the parent page also, right before closing modal or right after?
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>
Sorry, I stepped away. Glad you worked it out.
Btw, the window.location.reload(tru e); part was suggested by pravinasar - not me. So feel free to split the points if you want.
you could use cfwindow, which may do the same job.