Link to home
Start Free TrialLog in
Avatar of JohnMac328
JohnMac328Flag for United States of America

asked on

CF - CFwindow problem

I am trying to get a pop up to work. The pop up works until I try to get the form inside to run correctly.  When I have the form action set to the page with the pop up is where it bombs.  Any help is appreciated
<cfajaximport tags="cfwindow">

<cfif isDefined("FORM.Deleting")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#FORM.IntranetFile#',
			Title='#FORM.Title#',
			Dept='#Form.Dept#',
			Display='2'
where ID=#FORM.ID#
	</cfquery>
    <cfelseif isDefined("FORM.Editing")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#FORM.IntranetFile#',
			Title='#FORM.Title#',
			Dept='#Form.Dept#',
			Display='1'
where ID=#FORM.ID#
	</cfquery>
</cfif>

<cfquery name="getFiles" datasource="#datasource#">
	SELECT *
	FROM Files order by IntranetFile
</cfquery>

<cfwindow initShow="false" title="Welcome to <CFWINDOW>"
         center="true" resizable="true"
         draggable="false" name="mywin">
         
 <cfoutput query="getFiles"> 
     
  <cfform method="post" style="margin:0px" action="Test.cfm">
	<cfinput type="hidden" name="ID" value="#ID#">
   <cfinput type="text" name="IntranetFile"
			value="#IntranetFile#" size="50" class="#Display#">
   <cfinput type="text" name="Title"
			value="#Title#" size="50" class="#Display#">
   <cfinput type="text" name="Dept"
			value="#Dept#" size="5" class="#Display#">         
 <cfselect name="Display">
 
      <option value='1' <cfif Display EQ 1>SELECTED</cfif> >Displayed</option>
                <option value='2' <cfif Display EQ 2>SELECTED</cfif> >Removed</option>
  </cfselect>
  <cfinput type="submit" name="editing"
			value="RESTORE" style="font-size:xx-small"> 
   
         
		<cfinput type="submit" name="deleting"
			value="REMOVE" style="font-size:xx-small">
	
		
</cfform>
</cfoutput>
  
  
  <form>
  <input type="button" value="Close Me!" onClick="ColdFusion.Window.hide('mywin')">
  </form>
  
  </cfwindow>
  
  <p>
  <a href="javaScript:ColdFusion.Window.show('mywin')">Show Window</a><br />
  
  </p>

Open in new window

Avatar of JohnMac328
JohnMac328
Flag of United States of America image

ASKER

Is there a way to get the form to run without the action calling a page?
Hi please try the following code, I tested it. It is working. it is submitting the form to the test.cfm file.
<!--- <cfajaximport tags="cfwindow"> --->

<cfif isDefined("FORM.Deleting")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#FORM.IntranetFile#',
			Title='#FORM.Title#',
			Dept='#Form.Dept#',
			Display='2'
where ID=#FORM.ID#
	</cfquery>
    <cfelseif isDefined("FORM.Editing")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#FORM.IntranetFile#',
			Title='#FORM.Title#',
			Dept='#Form.Dept#',
			Display='1'
where ID=#FORM.ID#
	</cfquery>
</cfif>

<cfquery name="getFiles" datasource="#datasource#">
	SELECT *
	FROM Files order by IntranetFile
</cfquery>

<html>
    <head>
    </head>
    <body>
<cfwindow initShow="false" title="Welcome to <CFWINDOW>"
         center="true" resizable="true"
         draggable="false" name="mywin">
         
 <cfoutput query="getFiles"> 
     
  <cfform method="post" style="margin:0px" action="Test.cfm">
	<cfinput type="hidden" name="ID" value="#ID#">
   <cfinput type="text" name="IntranetFile"
			value="#IntranetFile#" size="50" class="#Display#">
   <cfinput type="text" name="Title"
			value="#Title#" size="50" class="#Display#">
   <cfinput type="text" name="Dept"
			value="#Dept#" size="5" class="#Display#">         
 <cfselect name="Display">
 
      <option value='1' <cfif Display EQ 1>SELECTED</cfif> >Displayed</option>
                <option value='2' <cfif Display EQ 2>SELECTED</cfif> >Removed</option>
  </cfselect>
  <cfinput type="submit" name="editing"
			value="RESTORE" style="font-size:xx-small"> 
   
         
		<cfinput type="submit" name="deleting"
			value="REMOVE" style="font-size:xx-small">
	
		
</cfform>
</cfoutput>
  
  
  <form>
  <input type="button" value="Close Me!" onClick="ColdFusion.Window.hide('mywin')">
  </form>
  
  </cfwindow>
  
  <p>
  <a href="#" onclick="javaScript:ColdFusion.Window.show('mywin')">Show Window</a><br />
  
  </p>
</body>
</html>

Open in new window

The cf window tag embeds the form and it's accompanying action within the page you are currently running, it's doing html requests via ajax and pulling the requested page on demand almost like a cfinclude. So if you don't define a location for the action then the action returns the form variable to the page that called it. So the above suggestion should work if your action pushes the variables to another page where you define methods or actions to be performed on those changes.
Maestropsm

If I change the form action from  Test.cfm to Edit.cfm, would I just have the queries on the edit.cfm page?
Yes you do all your queries for modifying the database on the action page where your form is submitted and then refresh the original page.
You can also leave the action blank and put the queries for updates on the original page where the cfwindow is loaded - or do an if statement and if the variables for updating the form exist - then cfinclude the queries page.

So if you have a page page1.cfm that has a cfwindow on it that calls cfwindow.cfm
Then in the window you have a submit button <cfinput type="submit" name="UpdateVariables" value="UPDATE">
Then at the top of page1.cfm you would put
<cfif IsDefined("UpdateVariables")>
<cfinclude template="queriesUpdatePage.cfm">
</cfif>

That way if the window is submitted it calls the update queries and then continues to refresh the original page1.cfm
Ok, getting confused.  Here is the test.cfm and the edit.cfm   I had to rename them to .txt to upload. Test.cfm has the link and brings up the popup with the form and the fields displayed to be updated.  The action on that form goes to edit.cfm but it still does not work so I am missing something.
Test.txt
and here is edit.cfm
Edit.txt
Actually this is what I started with but the popup had none of the edit.cfm contents in the box, it was blank.  If this would work it would take care of all the issues.
<td><cfinput type="button" name="x" value="Create Window" 
        onClick="ColdFusion.Window.create('Window1', 'This is a CF window',
        'http://localhost//edit.cfm',
        {x:100,y:100,height:500,width:700,modal:false,closable:true,
        draggable:true,resizable:true,center:true,initshow:true,
        minheight:200,minwidth:200 })"></td>

Open in new window

Move everything except the following code from the test page:

Then move all your queries to the edit page.
I would rename the Restore button value to UPDATE or MODIFY - since you're doing more than just restoring the file.

You're missing the cfform tag in the cfajaxinclude, and the cfwindow source="edit.cfm", I put the modal tag in there so you can see how the window grays out the background to make your eye focus on the window so it's clear where you should be focussing your attention.

And they must have changed the cfwindow behaviors in version 9 - in version 8 what I said earlier was true but apparently in version 9 CF now handles everything within the window like you would think it would.

Also you don't need FORM - before each variable when called from a form. You can just reference them directly.
The variables you reference in the queries should be unified - you have some caps and some not.
And last - I would put labels in front of your inputs on the form so people know what they are editing.

<cfajaximport tags="cfform,cfwindow"> 

<html>
    <head>
    </head>
    <body>

<cfwindow initShow="false" title="Modify File" center="true" resizable="true" refreshOnShow="true" modal="false" source="edit.cfm" draggable="false" name="mywin"></cfwindow>

<form>
<input type="button" value="Close Me!" onClick="ColdFusion.Window.hide('mywin')">
</form>
<p>
<a href="#" onClick="javaScript:ColdFusion.Window.show('mywin')">Show Window</a><br />
</p>
</body>
</html>

Open in new window

BTW - you don't need the close button on the calling page since windows come with a closing [x] in the top right corner.
Ok, I did make the changes.  I still get just a blank screen in the popup.  As for the buttons I am only showing a file on the screen based on its role, it is either showing or not.  That is why I have display and restore.  In this stripped down version I don't have labels but I do in the final version.  

What I posted a couple of messages back is what I tried to get working in the first place.  It seems so straight forward, any reason why this does not work?


<td><cfinput type="button" name="x" value="Create Window" 
        onClick="ColdFusion.Window.create('Window1', 'This is a CF window',
        'http://localhost//edit.cfm',
        {x:100,y:100,height:500,width:700,modal:false,closable:true,
        draggable:true,resizable:true,center:true,initshow:true,
        minheight:200,minwidth:200 })"></td>

Open in new window

Can you copy the code for both pages up here
Up where?
in the code option here in EE
I have the code for ID 33597200 and my original edit.cfm.  The pop up is blank
ASKER CERTIFIED SOLUTION
Avatar of Shaun McNicholas
Shaun McNicholas
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
I did a view source and it did not display an error, when the blank popup comes up, how did you see the error?
Ok, I added the

<cfajaximport tags="cfform,cfwindow">

and now this works by itself

<cfinput type="button" name="x" value="Edit Files"
        onClick="ColdFusion.Window.create('Window1', 'This is a CF window',
        'http://localhost/Intranet/edit.cfm',
        {x:100,y:100,height:500,width:700,modal:false,closable:true,
        draggable:true,resizable:true,center:true,initshow:true,
        minheight:200,minwidth:200 })">

Now the strange this is the "Restore" button works but the "Remove" does not inside the window.  I have the same form outside the pop up window and both functions work.  Any idea why one would change a value in the table but the other will not change the same value?  Sorry about this being such a frustrating question, I appreciate your patience.
Show me both queries as you currently have them on the page.
You can have only one submit button in a form. try subbmiting form from javascript function in your code for one button and let anoher button be submit buton.
@ansudhindra - that's actually not true - you just have to give each submit button a different name and then in your if statements you determine which button was pressed - which is how John has his buttons setup. I use this method all the time.
Here they are, I tried to find some difference.  Maybe another set of eyes
<cfif isDefined("FORM.Deleting")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#FORM.IntranetFile#',
			Title='#FORM.Title#',
			Dept='#Form.Dept#',
			Display='2'
where ID=#FORM.ID#
	</cfquery>
    <cfelseif isDefined("FORM.Editing")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#FORM.IntranetFile#',
			Title='#FORM.Title#',
			Dept='#Form.Dept#',
			Display='1'
where ID=#FORM.ID#
	</cfquery>
</cfif>

Open in new window

What happens if you change all the form variables to their names without Form in front of them and set the Deleting to deleting and Editing to editing. Maybe your web server is case sensitive.

And is your #datasource# defined?
At the top of the page are you setting datasource to the name of your CF DSN(data source name)?

<cfif isDefined("deleting")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#IntranetFile#',
			Title='#Title#',
			Dept='#Dept#',
			Display='2'
        WHERE ID=#ID#
	</cfquery>
    <cfelseif isDefined("editing")>
	<cfquery datasource="#datasource#">
		UPDATE Files
		SET IntranetFile='#IntranetFile#',
			Title='#Title#',
			Dept='#Dept#',
			Display='1'
        WHERE ID=#ID#
	</cfquery>
</cfif>

Open in new window

I tried everything you said except removing Form.  I tried that and still the Restore button works and the Remove button does not.  Outside the pop up window they both work with no problem.  I guess I will just not use a pop up but it bugs me because if one button works they both should.  I may try taking out the <cfelseif and making two separate cfif and see what happens