[midasxl]

Hello once again, and thank you for your time and talents!

I have a coldfusion script that initially uploads images to a folder structure and a database. Then I have these images display on a page via a cfloop query which gathers them and lays them out nice and neat. I also have a form that is generated for each image which gives the end user the option of deleting the image, rotating the image, resizing the image, or adding a caption.

All is well, except the add caption part. Check out the code...

This is the display page generated via cfloop query. It lays out all the images with a mini-form below each one with all the editing options.

<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
					<cfif tc eq 0><!---If table columns = 0 --->
			  <tr bordercolor="000"></cfif>
				<td align="center" valign="middle" <cfif #columndisplay# is 3 > width="33%"<cfelse>width="25%"</cfif>>
				
				<div id="style"><form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">
			 
					<cfoutput><font face="Arial, Helvetica, sans-serif" size="2">
					<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" border=1 
					height=110 alt="Click for Fancy-Ass Big Shot!"></a>
					</font>
					
					
				<fieldset class="radio">
					<label for="ninety">
						<input type="checkbox" name="ninety" value="#imgid#">90
					</label>
					<label for="oneeighty">
						<input type="checkbox" name="oneeighty" value="#imgid#">180
					</label>
					<label for="delete">
						<input type="checkbox" name="delete" value="#imgid#">Delete
					</label>
					<label for="caption">
						<input type="text" name="caption" value="" size=19>Add Caption
						<INPUT TYPE="hidden" NAME="imgid" VALUE="#imgid#"> 
					</label>
				</fieldset>
						</div>
					</cfoutput>
										
					<cfset tc=#tc#+1>
	 			</td>
				<cfif tc eq #columndisplay#>
			 </tr>
	 				<cfset tc=0> 
					</cfif>
				</cfloop>
				
				<a href="../FlexFileUpload.html" target="_self">Return to Upload Module</a></br>
				<a href="../flash_gallery/ncdoc_photo.html" target="_self">View Image Gallery</a></p>
				
				<input name="Submit" type="submit" value="Modify Selected Data" class="submit"></br>
				
					</form>

Here is the action page, trimmed to just show the activity on the add caption portion of the form...

<cfif isDefined("form.caption")>

<cfloop list="#form.caption#" index="i">

	  <cfquery name="InsertCaption" datasource="#datasource#">
	  UPDATE gallery 
	  SET caption='#i#' 
	  WHERE imgID = #imgid#
	  </cfquery>
	  
</cfloop>

</cfif>

So this says to me, loop through all the images to find out which ones have information in their input=text field, get the values and assign them to index=i.

Then access the database, and update the gallery table with the caption data, but only on the records that have an imgID equal to the imgid of the images adding caption. #imgid# is established in the form via a hidden field which gets it's value from a prior cfquery.

This works great when there is only one image. when I add another image, I get the following error...

Error Executing Database Query.  
[Macromedia][SequeLink JDBC Driver][ODBC Socket][Microsoft][ODBC Microsoft Access Driver] Syntax error (comma) in query expression 'imgID = 218,219'.  
  
The error occurred in C:\ColdFusion8\wwwroot\local\multiGallery\gallery\delete_images.cfm: line 110
 
108 :	   UPDATE gallery 
109 :	   SET caption='#i#' 
110 :	   WHERE imgID = #imgid#
111 :	   </cfquery>
112 :	  
-------------------------------------------------------------------------------- 
SQLSTATE   42000 
SQL	UPDATE gallery SET caption='asdf' WHERE imgID = 218,219  
VENDORERRORCODE   -3100 
DATASOURCE   multiGallery

I can see very clearly what's going on here. The form is passing the caption value of only the first image, but both the imgid's of the images, resulting in an #imgid# = 216, 218.

This makes sense, but I don't know how to get the information to be treated separately. I suspect it may be an additional loop of some kind? I'm playing around with it, but any tips would be greatly appreciated. Thanks!

[sansclue]

midasxl, on 29 Jan, 2009 - 08:26 AM, said:

This makes sense, but I don't know how to get the information to be treated separately.

Putting aside your question for the moment, and a few code problems with how the <form>'s are generated, I am confused about how the form is supposed to function. I can see it displays multiple images, with a set of checkbox options next to each one. That is fine. However, the options are checkboxes, which means users can select _multiple_ options for each image. Now that is not necessarily a problem, but from a user perspective it might be confusing. For example, does it really make sense to allow a user to select all 4 of these options?

Options:
[checkbox] 90
[checkbox] 180
[checkbox] Delete
[textbox] Caption

What would you expect to happen if the user selected "90,180,Delete and entered a caption"? It seems like your options should be radio buttons, not checkboxes.

Could you elaborate on how the form should behave? (ie What options are users allowed to make, and what should happen for each one. ) That would make it easier to advise on how to best structure the form to get the desired results.

[midasxl]

Thanks for your response!

The purpose of the app is to allow a user to manipulate a group of images (bulk uploaded)by either rotating them 90 or 180 degrees, deleting the image altogether if it is not needed, and then adding a caption via a text input field.

Yes, you are correct, those should be radio buttons. The problem I was having with them being radio buttons was that if I selected radio button 90 under one image and then selected radio button 90 under another image, it cleared the first radio button, just like it should if they were in the same form.

But I thought the way these were being laid out it was creating separate forms, all with the same action. Here is the code which loops through a recordset and creates the display of images and their respective form elements with radio buttons...

<cfquery name="getdetails" datasource="#datasource#">
SELECT thumb,imgID
FROM gallery
</cfquery>
<cfinclude template="prev_next.cfm">
<table width="650" align="center">

<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
<cfif tc eq 0>		  
<tr bordercolor="000">
</cfif>
				
<td align="center" valign="middle" <cfif #columndisplay# is 3 > width="33%"<cfelse>width="25%"</cfif>>
				
<div id="style"><form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">

<cfoutput><font face="Arial, Helvetica, sans-serif" size="2">
<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" border=1 height=110 alt="Click for Large Image"></a>
</font>
					
					
<fieldset class="radio">
<label for="ninety"><input type="radio" name="ninety" value="#imgid#">90
</label>
<label for="oneeighty"><input type="radio" name="oneeighty" value="#imgid#">180
</label>
<label for="delete"><input type="radio" name="delete" value="#imgid#">Delete
</label>
<label for="addcaption"><input type="checkbox" name="addcaption" value="#imgid#">Add Caption
</label>
<label for ="caption"><input type="text" name="caption" value="" size=19>						
</label>
</fieldset>
</cfoutput>
</div>
										
<cfset tc=#tc#+1>
</td>
<cfif tc eq #columndisplay#>
</tr>
<cfset tc=0> 
</cfif>
</cfloop>

At this point I have two images that display just for simplicity. When I select the radio button 90 under image one, it appears as selected. Then I select radio button 90 under image two and it appears as selected, but it clears radio button 90 under image one. This prevents me from rotating two images at once by 90 degrees (or 180)with the same radio button. It also prevents me from deleting more than one image at a time. Thanks for your input!

[sansclue]

midasxl, on 3 Feb, 2009 - 10:10 AM, said:

But I thought the way these were being laid out it was creating separate forms, all with the same action.

No. Because of the way the <form> and <cfloop> tags are nested (in the original code) it is being treated as a single form. You could create a _separate_ form for each image, but that would mean a user could only manipulate one image at a time. Not necessarily a bad thing, since image functions are memory intensive. But which is your goal?

1. Create a form allowing users to manipulate one image at a time OR
2. Create a form allowing users to manipulate multiple images at a time

For option #1 you would need separate forms for each image. For option #2 you would need a single form, with a few changes to the field names.

<!--- Option #2 This would create a single form because the loop is _inside_ the <form> tags --->
<form method="post" action="yourActionPage.cfm" enctype="multipart/form-data">

   <cfoutput>
   <cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
	   ...
	   <input ....>

   </cfloop>
   </cfoutput>

   <input name="Submit" type="submit" value="Modify Selected Data" class="submit">

</form>


<!--- Option #1 This would create separate forms for each image because the form tags are _inside_ the loop --->
<cfoutput>
<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
   <form method="post" action="yourActionPage.cfm" enctype="multipart/form-data">
	   ...
	   <input name="Submit" type="submit" value="Modify Selected Data" class="submit">

   </form>
</cfloop>
</cfoutput>

[danny83]

Hi Midas,

you can always ensure your form can handle all displayed images, by simply repeating the query in your action-file, and to ensure that you bury your Primary Id on each field... (see below)

modified form:

<form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">
	<!--- ensure we know our max and starting record --->
	<cfoutput>
		<input type="hidden" name="displayNext" id="displayNext" value="#displayNext#" />
		<input type="hidden" name="startRecord" id="startRecord" value="#startRecord#" /></cfoutput>

<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
	<cfif tc eq 0><!---If table columns = 0 --->
		<tr bordercolor="000">
	</cfif>
		<td align="center" valign="middle" <cfif #columndisplay# is 3 > width="33%"<cfelse>width="25%"</cfif>>
			<div id="style">
				<cfoutput>
					<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" border="1" height="110" alt="Click for Fancy Big Shot!"></a>
					<fieldset class="radio">
						<input type="checkbox" name="ninety_#getdetails.currentrow#" id="ninety_#getdetails.currentrow#" value="#imgid#"><label for="ninety_#getdetails.currentrow#">90</label>
						<input type="checkbox" name="oneeighty_#getdetails.currentrow#" id="oneeighty_#getdetails.currentrow#" value="#imgid#"><label for="oneeighty_#getdetails.currentrow#">180</label>
						<input type="checkbox" name="delete_#getdetails.currentrow#" id="delete_#getdetails.currentrow#" value="#imgid#"><label for="delete_#getdetails.currentrow#">Delete</label>
						<input type="text" name="caption_#getdetails.currentrow#" id="caption_#getdetails.currentrow#" value="" size="19"><label for="caption_#getdetails.currentrow#">Add Caption</label>

						<INPUT TYPE="hidden" NAME="imgid_#getdetails.currentrow#" VALUE="#imgid#">
					</fieldset>
			</div>
				</cfoutput>
			<cfset tc=#tc#+1>
		</td>
	<cfif tc eq #columndisplay#>
	</tr>
	<cfset tc=0>
	</cfif>
</cfloop>
	<tr>
		<td colspan="<cfoutput>#columndisplay#</cfoutput>" align="center">
			<input type="submit" name="btnGo" id="btnGo" value="modify selected data" /><br />
			<p>
				<a href="../FlexFileUpload.html" target="_self">Return to Upload Module</a></br>
				<a href="../flash_gallery/ncdoc_photo.html" target="_self">View Image Gallery</a>
			</p>
		</td>
	</tr>
</form>

suggested action script:

<cfloop query="getdetails" startrow="#form.startRecord#" endrow="#form.displayNext#">
	<cfset ourId = getdetails.imgid>
	<cfset actions = "">

	<cfif IsDefined("form.ninety_#ourId#")>
		<cfset actions = actions & ",ninety">
	</cfif>
	<cfif IsDefined("form.oneeighty_#ourId#")>
			<cfset actions = actions & ",oneeighty">
	</cfif>
	<cfif Len(Trim(evaluate("form.caption_#ourId#")))>
		<cfset actions = actions & ",caption">
	</cfif>
	<cfif IsDefined("form.delete_#ourId#")>
		<cfset actions = actions & ",delete">
	</cfif>
	
	<cfloop list="#actions#" delimiters="," index="a">
		<cfswitch expression="#a#">
			<cfcase value="ninety">
				<!--- code for ninety degree turn goes here (use #ourId# for image id) --->
			</cfcase>
			<cfcase value="oneeighty">
				<!--- code for 180 degree turn goes here (use #ourId# for image id) --->
			</cfcase>
			<cfcase value="caption">
				<!--- update the caption here ... use #ourId# for image id --->
			</cfcase>
			<cfcase value="delete">
				<!--- code for deletion here --->
			</cfcase>
			<cfdefaultcase>
				<cfoutput>
					Sorry, you have selected an action that does not exist, please try again.<br />
					You chose: <strong>#a#</strong>
				</cfoutput>
				<cfexit method="exitTemplate">
			</cfdefaultcase>
		</cfswitch>
	</cfloop>
	
</cfloop>

don't have time at the mo to detail the code (sorry!)... but reply if you don't get it and i will explain in detail


warning ... always specify the ID attribute on your input's when using labels around the text as this makes the text a label for the form field

This post has been edited by danny83: 03 February 2009 - 04:07 PM

[sansclue]

danny83, on 3 Feb, 2009 - 03:04 PM, said:

you can always ensure your form can handle all displayed images, by simply repeating the query in your action-file, and to ensure that you bury your Primary Id on each field... (see below)

<cfloop query="getdetails" startrow="#form.startRecord#" endrow="#form.displayNext#">

Running a second query and looping through it to process the results is not a good idea. It incorrectly assumes the data will not change in between when the form was generated and when it was submitted. If the data changes, one or more of the selections will be skipped entirely.

danny83, on 3 Feb, 2009 - 03:04 PM, said:

<cfif Len(Trim(evaluate("form.caption_#ourId#")))>

Evaluate is not needed and should generally be avoided. All modern versions of CF make most variables available in a structure. So to access dynamic variables, it is better to use array notation:

<cfset something = form["caption_"& x ]>

[danny83]

So store the query in the session scope and refresh it at the listing, session.getdetails will be the same for both listing and action

danny83, on 3 Feb, 2009 - 03:04 PM, said:

you can always ensure your form can handle all displayed images, by simply repeating the query in your action-file, and to ensure that you bury your Primary Id on each field... (see below)

<cfloop query="session.getdetails" startrow="#form.startRecord#" endrow="#form.displayNext#">

[sansclue]

danny83, on 3 Feb, 2009 - 10:54 PM, said:

So store the query in the session scope and refresh it at the listing, session.getdetails will be the same for both listing and action

Yes, but it is really not needed It also seems like an over complication and usage of memory variables. To iterate through the selected values, it is simpler to just give each set of field names a unique name. Associating the fields by using common suffix. A contiguous number like a counter is a good choice.

<form ...>
<cfset counter = 0>
<cfoutput>
<cfloop query="...">
	  <!--- increment the counter --->
	  <cfset counter = counter + 1>

	  <!--- create the fields --->
	 <input name="someField_#counter#" ...>
	 <input name="otherField_#counter#" ...>
</cfloop>

<!--- store the total number of fields --->
<input type="hidden" name="totalFields" value="#counter#">

</form>
</cfoutput>

Then the total number of items is stored in a hidden field, just outside the loop. That value is then used on the action page, to iterate through the fields and retrieve the values using array notation. The rest is just simple processing of the selected actions.

<cfif structKeyExists(form, "totalFields")>
   <cfloop from="1" to="#form.totalFields#" index="counter">
		<cfset someFieldValue = form["someField_"& counter]>		
		<cfset otherFieldValue = form["otherField_"& counter]>		
		...
   </cfloop>
</cfif>

Of course this is assuming midasxl actually wants the form to process multiple items. They probably do, but IMO it is good to think out the purpose of the form first. Catch any problems or logic errors. Once that is clear, the rest usually falls into place. Then it is just a matter of coding

[midasxl]

sansclue, on 3 Feb, 2009 - 01:04 PM, said:

But which is your goal?

1. Create a form allowing users to manipulate one image at a time OR
2. Create a form allowing users to manipulate multiple images at a time

The goal is to allow the user to manipulate multiple images at one time. i.e. select a 90 degree rotation on image one, a 180 degree rotation on image two, delete image three, and add a caption to image four. Once all these selections are made, a single submit button would process all of them in succession.

I understand the difference in the placement of the form (inside or outside the loop)
If a separate form is generated for each image, then a separate submit button is obviously also generated. This could result in a page with 30+ submit buttons. The bulk upload of images are sometimes high.

The other option of a single form does not allow me to select the same radio buttons (i.e. 90 degree rotation) for multiple images because they are within the same form.

I've included a screen shot of the two images so you may get a sense of what I am going for.

All comments and suggestions so far have really helped to jumpstart my brain and try different things. Thanks!

Attached image(s)

• 

[sansclue]

midasxl, on 4 Feb, 2009 - 05:29 AM, said:

The goal is to allow the user to manipulate multiple images at one time. i.e. select a 90 degree rotation on image one, a 180 degree rotation on image two, delete image three, and add a caption to image four. Once all these selections are made, a single submit button would process all of them in succession.

Okay. Then you will need a single form, with some slight changes to the field names. Here is how I might approach the form:

- As mentioned, I would change the checkboxes to radio buttons so users could only select a single action for each image. With that in mind, I would also include a radio button for "Add Caption", right before the caption text box. I think it would create a more consistent feel for the options.

Also, I would probably add a button labeled "No Change" and make it checked by default. Then if a user selects "delete", but changes their mind, they can cancel it by re-selecting the "No Change" option. Another benefit is they would not be forced to select an action for every image. So, the new options would be:


[radio] No Change (selected by default)
[radio] 90
[radio] 180
[radio] Delete
[radio] Add Caption
[textbox] New Caption

midasxl, on 4 Feb, 2009 - 05:29 AM, said:

The other option of a single form does not allow me to select the same radio buttons (i.e. 90 degree rotation) for multiple images because they are within the same form.

Yes, it is that but also how the buttons are named. The current naming is creating the wrong grouping, resulting in the wrong behavior. Because all of your 90 degree rotation buttons have the same name, it means you can only select the 90 degrees option for _one_ of the images at a time. Instead you need to give each set of buttons the same name, but give each _set_ a unique name. Then each set of buttons will behave independently.

You can create unique names for the fields using the #counter# variable method I mentioned above. Each _set_ of fields will be generated with a common suffix, so you can can easily grab the related values like imgID or caption text.

<!--- the first group --->
form.imageAction_1
form.imageCaption_1
form.imgID_1

<!--- the second group --->
form.imageAction_2
form.imageCaption_2
form.imgID_2

....etc ...

<form ...>
<!--- intialize the counter --->
<cfset counter = 0>

<cfoutput>
<cfloop query="...">
	  <!--- increment the counter --->
	  <cfset counter = counter + 1>

	  <!--- create the fields --->
		 <!--- make the button values the 'action' you want to perform on the processing page --->
	 <input type="radio" name="imageAction_#counter#" value="No Change"> No Change
	 <input type="radio" name="imageAction_#counter#" value="90"> 90
	 <input type="radio" name="imageAction_#counter#" value="180"> 180
	 <input type="radio" name="imageAction_#counter#" value="Delete"> Delete
	 <input type="radio" name="imageAction_#counter#" value="Add Caption"> Add caption
	 <input type="text" name="imageCaption_#counter#"> 
	 <!--- store the image id in a hidden field --->
	 <input type="text" name="imID_#counter#" value="#imgID#"> 
</cfloop>

<!--- store the total number of fields --->
<input type="hidden" name="totalFields" value="#counter#">

</form>
</cfoutput>

Then on your action page, you could loop through each set of fields and get the selected actions, and perform the appropriate code. Not tested, but the basic idea is something like this:

<cfif structKeyExists(form, "totalFields")>

	<!--- loop through each set of fields --->
   <cfloop from="1" to="#form.totalFields#" index="counter">

		<!--- if one of the buttons was selected --->
		<cfif structKeyExists(form, "imageAction_"& counter)>

			 <!--- get the selected action, caption and image ID --->
			<cfset selectedAction = form["imageAction_"& counter]>		
			<cfset newCaption = form["imageCaption_"& counter]>		
			<cfset imgID = form["imgID_"& counter]>		
			
			<!--- then perform the selected action ....--->
			<cfswitch value="#selectedAction#">
				 <cfcase value="90">
					   <!--- code to rotate ...--->
				 </cfcase>
				 <cfcase value="180">
					   <!--- code to rotate ...--->
				 </cfcase>
				 <cfcase value="Delete">
					   <!--- code to delete ...--->
				 </cfcase>
				 <cfcase value="Add Caption">
					   <!--- code to add caption ...--->
				 </cfcase>
			</cfswitch>

		</cfif>
		...
   </cfloop>
</cfif>

This post has been edited by sansclue: 04 February 2009 - 11:00 AM

[midasxl]

Thanks for the info and code. I'm trying it out and get the following error...

The value #counter# cannot be converted to a number.  
 
  
The error occurred in C:\ColdFusion8\wwwroot\local\multiGallery\gallery\delete_images.cfm: line 4
 
2 : 
3 :	 <!--- loop through each set of fields --->
4 :	<cfloop from="1" to="#form.totalFields#" index="counter">
5 : 
6 :		 <!--- if one of the buttons was selected --->

[sansclue]

midasxl, on 4 Feb, 2009 - 11:04 AM, said:

Thanks for the info and code. I'm trying it out and get the following error...

The value #counter# cannot be converted to a number.  
 
  
The error occurred in C:\ColdFusion8\wwwroot\local\multiGallery\gallery\delete_images.cfm: line 4
 
2 : 
3 :	 <!--- loop through each set of fields --->
4 :	<cfloop from="1" to="#form.totalFields#" index="counter">
5 : 
6 :		 <!--- if one of the buttons was selected --->

Check the value of the #form.totalFields# on the action page. Is it literally "#counter#"?

<cfdump var="#FORM#" label="Dump of Form Field Values">

If so, you you may have forgotten to wrap the hidden field in <cfoutput> tags on your form. So CF is just outputing "#counter#" instead of evaluating its value.

ie

<input name="totalFields" value="#counter#"> ... instead of ...
<input name="totalFields" value="12">

BTW, I hope I mentioned this code is not tested. So no guarantees about typos ;-)

[midasxl]

OK, my friends. After a short vacation I am back on this crazy project, and as always appreciate your assistance. Sansclue, I have applied much of your suggestions and have the following to share...

First, the form...

<form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">
				<cfset counter=0>
				<cfoutput>
				<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
				<cfif tc eq 0>
			  <tr bordercolor="000">
				</cfif>
					
				<td <cfif #columndisplay# is 3> width="33%"<cfelse>width="25%"</cfif>>
				<cfset counter = counter + 1>
				<div id="style">
							 
					<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" height="56" width="75" alt="Click for Large Image"></a>
					
					
				<fieldset class="radio">
				<label for="nochange">
						<input type="radio" name="imageAction_#counter#" value="No Change" checked> No Change				
						</label>
					<label for="ninety">
						<input type="radio" name="imageAction_#counter#" value="90"> 90					
						</label>
					<label for="oneeighty">
						<input type="radio" name="imageAction_#counter#" value="180"> 180					
						</label>
					<label for="delete">
						<input type="radio" name="imageAction_#counter#" value="Delete"> Delete					
						</label>
					<label for="addcaption">
						<input type="radio" name="imageAction_#counter#" value="Add Caption"> Add caption					
						</label>
					
						<input type="text" name="imageCaption_#counter#"> 
						<!--- store the image id in a hidden field --->
	 					<input type="hidden" name="imgID_#counter#" value="#imgID#">						 
					
				</fieldset>
							   
					</div>
	 			</td>
					<cfset tc=#tc#+1>
				
					<cfif tc eq #columndisplay#>
				<!--- if tc equals columndisplay (set at 3) then close the table row --->				
				</tr>
					<cfset tc=0> 
				</cfif>
				
				</cfloop>
				
				
				  
				
				<!--- store the total number of fields --->
				<input type="hidden" name="totalFields" value="#counter#">
				
				<input name="Submit" type="submit" value="Modify Selected Data" class="submit"></br>
				
				</form>

then the action page...

<cfif structKeyExists(Form, "totalFields")>

	<!--- loop through each set of fields --->
   <cfloop from="1" to="#form.totalFields#" index="counter">

		<!--- if one of the buttons was selected --->
		<cfif structKeyExists(form, "imageAction_"& counter)>

			 <!--- get the selected action, caption and image ID --->
			<cfset selectedAction = form["imageAction_"& counter]>		
			<cfset newCaption = form["imageCaption_"& counter]>		
			<cfset imgID = form["imgID_"& counter]>	   
			
			<!--- then perform the selected action ....--->
			
			<cfquery name="modify" datasource="#datasource#">
   				SELECT image FROM gallery
				WHERE imgID = #imgID#
   			</cfquery>
			<cfswitch expression="#selectedAction#">
				 <cfcase value="90">
					   <cfimage action="rotate"
						angle="90"
						source="#dir##image#"
						destination="#dir##image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="180">
					   <cfimage action="rotate"
						angle="180"
						source="#dir##image#"
						destination="#dir##image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="Delete">
				 
					   <cffile action="delete"
   						file="#uploads##image#"/>
   
   						<cffile action="delete"
   						file="#uploads_thumb##image#"/>
						
				 </cfcase>
				 <cfcase value="Add Caption">
					   <!--- code to add caption ...--->
				 </cfcase>
			</cfswitch>

		</cfif>
	  </cfloop>
</cfif>

What I am not seeing here is how to make the action page script know which image or images we are dealing with. I assume I need to do a query of my database and match the chosen images with the ones in the folders in order to read them out, change them and then write them back in. I tried that as you can see using a database query to match the imgID with the imgID variable (which I know is wrong because the imgID variable is set to match the imgID & counter so it comes up undefined. I need that imgID to = the imgID of the image(s) being modified. That's where I get stuck. Am I on the right track? Thanks again!

[sansclue]

midasxl, on 16 Feb, 2009 - 12:11 PM, said:

<!--- this stores the imgID value in the form field --->
<cfset imgID = form["imgID_"& counter]>   
...	

<!--- this line retrieves that value in your action page --->
<cfset imgID = form["imgID_"& counter]> 

... I tried that as you can see using a database query to match the imgID with the imgID variable

Your action page code is correct. It retrieves each imgID value from the hidden form fields and stores that value in a local variable: #imgID#.

One problem I see with the code is that your cfoutput tags still don't enclose all of the code. For example, I see an opening tag, but no closing tag. _All_ of the cf #variables# in your form must be enclosed in <cfoutput> tags. Otherwise, the variables will not be evaluated and your action page code won't work properly.

<cfoutput>
<form >

.... rest of code and #variables# here .....

</form>
</cfoutput>

[midasxl]

Fantastic! I think we are about to put this one to bed. It seems to be performing as I originally envisioned it. Here's the finished piece...

the gallery/form page...

<CFPARAM name="tc" default="0">
<CFPARAM name="StartRecord" default="1">

<html>
<head>
 
   <script language="Javascript"> 
   function PopupPic(sPicURL) { 
	 window.open( "lg_img.cfm?"+sPicURL, "",  
	 "resizable=0,HEIGHT=100,WIDTH=100"); 
   } 
   </script>
<LINK href="style.css" rel="stylesheet">
</head>

<body>
<p>&nbsp;</p>
<cfquery name="getdetails" datasource="#datasource#">
SELECT thumb,imgID,caption
FROM gallery
</cfquery>

<cfinclude template="prev_next.cfm">
<table width="650" align="center">

<cfoutput> 
				
				<form method="post" name="modifySelected" action="action.cfm" enctype="multipart/form-data">
				<cfset counter=0>
				
				<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
				
				<cfif tc eq 0>
					  <tr bordercolor="000">
				</cfif>
					
					<td <cfif #columndisplay# is 3> width="33%"<cfelse>width="25%"</cfif>>
				
				<cfset counter = counter + 1>
				
				<div id="style">
							 
					<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" height="56" width="75" 					alt="Click for Large Image"></a><p><div id="caption">#caption#</div><p>Select your modifications...
					
									  
				<fieldset class="radio">
				<label for="nochange">
						<input type="radio" name="imageAction_#counter#" value="No Change" checked> No Change				
						</label>
					<label for="ninety">
						<input type="radio" name="imageAction_#counter#" value="90"> 90					
						</label>
					<label for="oneeighty">
						<input type="radio" name="imageAction_#counter#" value="180"> 180					
						</label>
					<label for="delete">
						<input type="radio" name="imageAction_#counter#" value="Delete"> Delete					
						</label>
					<label for="captionradio">
						<input type="radio" name="imageAction_#counter#" value="Add Caption"> Add caption					
						</label>
					<label for="addcaption">
						<input type="text" name="imageCaption_#counter#"> 
						</label>
						
						<!--- store the image id in a hidden field --->
	 					<input type="hidden" name="imgID_#counter#" value="#imgID#">						 
					
				</fieldset>
							   
				</div>
	 				</td>
					<cfset tc=#tc#+1>
				
					<cfif tc eq #columndisplay#>
						<!--- if tc equals columndisplay (set at 3) then close the table row and reset tc to 0--->				
						</tr>
						<cfset tc=0> 
					</cfif>
				
				</cfloop> 				
				
				<!--- store the total number of fields to use in action page--->
				<input type="hidden" name="totalFields" value="#counter#">
				
				<input name="Submit" type="submit" value="Modify Selected Data" class="submit"></br>
				
				</form>
				
						 
				<a href="../FlexFileUpload.html" target="_self">Return to Upload Module</a></br>
				<a href="../flash_gallery/ncdoc_photo.html" target="_self">View Image Gallery</a></p>
				
</cfoutput>
								
</table>
							
</body>
</html>

The action page...

<cfif structKeyExists(Form, "totalFields")>

	<!--- loop through each set of fields --->
	
   <cfloop from="1" to="#form.totalFields#" index="counter">
   
   <cfif structKeyExists(form, "imageAction_"& counter)>

			 <!--- get the selected action, caption and image ID --->
			 
			<cfset selectedAction = form["imageAction_"& counter]>		
			<cfset newCaption = form["imageCaption_"& counter]>				   
			<cfset imgID = form["imgID_"& counter]>	   
			
			<!--- then perform the selected action ....--->
			
			<cfquery name="modify" datasource="#datasource#">
   				SELECT image FROM gallery
				WHERE imgID = #imgID#
   			</cfquery>
			<!---in my situation #dir# is a variable defined in my application.cfm as a relative path to the folder where i store images--->
			<cfswitch expression="#selectedAction#">
				 <cfcase value="90">
					   <cfimage action="rotate"
						angle="90"
						source="#dir##modify.image#"
						destination="#dir##modify.image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="180">
					   <cfimage action="rotate"
						angle="180"
						source="#dir##modify.image#"
						destination="#dir##modify.image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="Delete">
				 
					   <cfquery name="qDelete" datasource="#datasource#">
						DELETE FROM gallery
						WHERE imgid = #imgid#
						</cfquery>
					   
					   <cffile action="delete"
   						file="#uploads##modify.image#"/>
   
   						<cffile action="delete"
   						file="#uploads_thumb##modify.image#"/>
						
				 </cfcase>
				 <cfcase value="Add Caption">
					   <cfquery name="InsertCaption" datasource="#datasource#">
						  UPDATE gallery 
						  SET caption = '#newCaption#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				 </cfcase>
			</cfswitch>

		</cfif>
   </cfloop>
</cfif>

<!---The rest of this code is to create an xml file that is used to populate a flash image gallery.  This is really cool!--->

<!---Query the database to get the album data--->
<cfquery name="category" datasource="#datasource#">
SELECT categoryID, name, active
FROM category
WHERE active = 1
ORDER BY categoryID ASC
</cfquery>

<!---Query the database and get the Image data--->
<cfquery name="images" datasource="#datasource#">
SELECT imgID, albumID, title, caption, thumb, image, active
FROM gallery
WHERE active = 1
ORDER BY imgID ASC
</cfquery>

<!---Remove white space from generated content in the tag body--->
<cfprocessingdirective suppresswhitespace="yes">
<!---Create a CF XML document object that contains the markup--->
<cfxml variable="xmlobject" casesensitive="yes">

<gallery title="Photo Directory" thumbdir="./images/thumbs/" imagedir="./images/" random="true">
	<cfoutput>
	<!--- Outer Loop to handle Albums--->
	<cfloop query="category">
		<category name="#XmlFormat(category.name)#">
				
	  <!--- Inner Loop to handle all images --->
	  <cfloop query="images">
	  <cfif category.categoryID IS images.albumID>
			  <image>
				<title>#XmlFormat(images.title)#</title>
				<desc>#XmlFormat(images.caption)#</desc>
				<thumb>#XmlFormat(images.thumb)#</thumb>
				<img>#XmlFormat(images.image)#</img>
			</image>
	   </cfif>
	   </cfloop>
	   </category>
	 </cfloop>
  </cfoutput>
</gallery>

</cfxml>
</cfprocessingdirective>

<!--- Convert the XML document object to a string--->
<cfset xmlString = ToString(xmlobject)>
<cffile action="write" file="#write_xml#gallery.xml" output="#xmlString#">


<cfinclude template="gallery.cfm">

Something I had to do related to my database queries was to use the following variable structure...

#modify.image# where modify is the name of the <cfquery> and image is the desired record. Originally I was just using the variable #image# and it kept kicking back as undefined. This method works and I am not exactly sure why. Further research will reveal that.

So this is working very well at this point. I greatly appreciate all your assistance and patience. This turned out to be a much longer post than I had intended, but it is a great learning experience and hopefully others will learn from this as well!

Until next time! Thanks!!

This post has been edited by midasxl: 18 February 2009 - 07:23 AM