Shaun Mccran

My digital playground

22
M
A
R
2010

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.

view plain print about
1<form>
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.

view plain print about
1<div class="previewImage-div">
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.

view plain print about
1<s/cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
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.

view plain print about
1<cffunction name="getImgUrl" access="remote" returntype="query" hint="returns a query of the asset requested" returnformat="json">
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

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Mike's Gravatar Your CF function will always return an empty string.
# Posted By Mike | 23/03/2010 03:05
Shaun McCran's Gravatar 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?
# Posted By Shaun McCran | 23/03/2010 09:12
Mike's Gravatar Yes, thanks for your very simple. I just didn't want others new to CF to be stuck scratching their head.
# Posted By Mike | 23/03/2010 13:16
uk essay writing services's Gravatar Thanks for the post!
# Posted By uk essay writing services | 23/05/2015 10:04
http://www.buyessayshere.org/'s Gravatar Thanks for sharing!
# Posted By http://www.buyessayshere.org/ | 17/07/2015 00:57
how do you write a essay's Gravatar A great big thank-you, the investigation is really helpful! Without a doubt, the searcher is a proficient in this subject. As opposed to all those works I have already looked through on the problem, the one is rich in sophisticated solutions. This site permanently offers plenty interesting investigations on the vital questions. My mother and I revise them on a day-to-day basis.
# Posted By how do you write a essay | 28/08/2015 02:26
essaywritingpattern.org's Gravatar Super! Very useful and simple ) Thanks
# Posted By essaywritingpattern.org | 05/09/2015 01:18
reflectiveessaytips.co.uk's Gravatar Much thanks, the information is hands down wholesome! Without a doubt, the studier is master in this specialty area. Compared to some writing pieces I have ever found on the issue, the one offers up-to-date assessments. This website frequently puts no end of exciting information on the widely discussed subjects. My sister and I turn over them on a day-to-day basis.
# Posted By reflectiveessaytips.co.uk | 10/09/2015 02:35
toptermpapers.org's Gravatar In opposition to the numerous works I have browsed on the material, this one is replete with original assessments.
# Posted By toptermpapers.org | 30/10/2015 05:24
Back to top