?
Solved

how to close a modal window with form button click?

Posted on 2012-09-09
14
Medium Priority
?
839 Views
Last Modified: 2012-09-09
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

0
Comment
Question by:14_east
  • 7
  • 4
  • 3
14 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 38381117
Is there any reason to use fancybox?

you could use cfwindow, which may do the same job.
0
 

Author Comment

by:14_east
ID: 38381135
Yes, its already used, and there's no turning back;)
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 38381237
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>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:14_east
ID: 38381243
I'll take a look for future reference, but that will not work here...
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 38381272
Page reload code could be

window.location.reload(true);  

But I do not much about fancybox,
Sorry !
0
 

Author Comment

by:14_east
ID: 38381298
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

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 38381322
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.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 1500 total points
ID: 38381760
@14_east - I don't use fancybox either, but can't you just put it inside a <script> tag? It's just javascript? As long as the fancybox object is available it should work fine.


<cfif isDefined ('form.reserveTable')>
     <cfset session.myTableID = form.vip_tableNumber>
     <script type="text/javascript">
             $.fancybox.close();
     </script>
</cfif>
0
 

Author Comment

by:14_east
ID: 38381767
Yea, thats what I was thinking... its not working!
0
 

Author Comment

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

Author Comment

by:14_east
ID: 38381771
Wait, _agx_, any idea on how to refresh the parent page also, right before closing modal or right after?
0
 

Author Comment

by:14_east
ID: 38381775
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

0
 
LVL 52

Expert Comment

by:_agx_
ID: 38381811
Sorry, I stepped away.  Glad you worked it out.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 38381816
Btw, the window.location.reload(true); part was suggested by pravinasar - not me. So feel free to split the points if you want.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month16 days, 11 hours left to enroll

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question