• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 851
  • Last Modified:

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

0
14_east
Asked:
14_east
  • 7
  • 4
  • 3
1 Solution
 
Pravin AsarPrincipal Systems EngineerCommented:
Is there any reason to use fancybox?

you could use cfwindow, which may do the same job.
0
 
14_eastAuthor Commented:
Yes, its already used, and there's no turning back;)
0
 
Pravin AsarPrincipal Systems EngineerCommented:
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
14_eastAuthor Commented:
I'll take a look for future reference, but that will not work here...
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Page reload code could be

window.location.reload(true);  

But I do not much about fancybox,
Sorry !
0
 
14_eastAuthor Commented:
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
 
Pravin AsarPrincipal Systems EngineerCommented:
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
 
_agx_Commented:
@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
 
14_eastAuthor Commented:
Yea, thats what I was thinking... its not working!
0
 
14_eastAuthor Commented:
HEY, _agx_, I changed to this:  parent.$.fancybox.close();   and it works great.  Thanks!
0
 
14_eastAuthor Commented:
Wait, _agx_, any idea on how to refresh the parent page also, right before closing modal or right after?
0
 
14_eastAuthor Commented:
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
 
_agx_Commented:
Sorry, I stepped away.  Glad you worked it out.
0
 
_agx_Commented:
Btw, the window.location.reload(true); part was suggested by pravinasar - not me. So feel free to split the points if you want.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 7
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now