|
Creating an image preview using JQuery and a select form field |
||||||||
This article will deal with a user choosing a value from a Select field, and that selection being passed to a JQuery handler. The JQuery handler will perform an AJAX request to a CFC, which will return a JSON value (URL String) that we will use to populate an img html tag.
In this way when you select different options from the select field drop down, the image changes inline, without any page reloads.
Firstly create a form element that will be populated with values and ids. The values are the names of the images, and the ids are unique id's from a database for each image.
2<select name=" astUid" id="astUid" size="1">
3<option value="">Select from</option>
4<cfloop query="variables.selectData">
5<option value="#variables.selectData.id#">
6#variables.selectData.label#
7</option>
8</cfloop>
9</select>
10</form>
Next create a container for our image preview. The image id is the important bit here, as this is what JQuery will use to assign its response value to. I have put it inside a div for positioning.
The image has no source attributes as this will all be assigned using the JQuery response. I have left the width and height out of the code so that the browser will resize the image automatically.
2 <b>Asset Preview</b><br>
3 <img id="previewImage">
4</div>
Next we will create the JQuery handler. This is a listener that is lloking for a change event on the id assigned (astUid). When the select field changes it runs the function 'getAsset'. The getAsset function uses an Array of the selected value to determine the value, and passes that through an AJAX post to a CFC (detailed below). The response is then used to set the image source ('src' attribute) of the image html we created above. In this way when you select different options from the select field drop down, the image changes inline, without any page reloads.
2<s/cript type="text/javascript">
3$(document).ready(function(){
4 $("##astUid").change(getAsset);
5});
6
7function getAsset(){
8var selected = $("##astUid option:selected");
9 if(selected.val() != 0){
10
11 // ajax request to get the image
12 $.post("pathToCFC.cfc?method=getUrl", {astUid:selected.val()},
13
14 function(data){
15 jsonResponse = eval( "(" + data + ")" );
16 var src = jsonResponse.DATA;
17
18 $("##previewImage").attr("src", src);
19 });
20 }
21 }
22 </script>
The CFC used in the AJAX post above is very straightforward. We can directly reference the CFC, and the function we want in the url string. This CFC performs a simply query, which is returned as a JSON object by setting returnFormat='JSON' in the function tag. Just remember to set the access to remote, as we are treating it like an external service.
2<cfargument name="astUid" type="string" required="true" hint="Uid of the asset requested">
3<cfset var qgetImg = "">
4
5<cfquery name="qgetImg" datasource="">
6SELECT url AS link
7FROM imgTable
8WHERE id = <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.astUid#">
9</cfquery>
10
11<cfreturn qgetImg>
12</cffunction>
Reference (and thanks) go to:
Adobe docs for returning JSON from cfc's: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxdata_09.html - I didn't even know there was a returnformat attribute!
Dan Vega for his JQuery select example: http://www.danvega.org/blog/index.cfm/2008/7/1/jQuery-Select-Example
Ray Camden for his parsing JSON example: http://www.coldfusionjedi.com/index.cfm/2007/9/20/Quick-and-Dirty-JSONQuery-Example
Your CF function will always return an empty string.
Hi Mike, good spot, I'd amended some of the code, rather than use live code. I trust you got the idea with the CFC anyway though?
Yes, thanks for your very simple. I just didn't want others new to CF to be stuck scratching their head.
