Posted in jQuery, JavaScript, ColdFusion | Posted on 03-19-2010 | 4,506 views
Many months ago I posted a blog entry describing how to use jQuery to turn a text item into a drop down. Read the older entry for more information on what I mean, but the basic gist is - you click an edit link and a piece of text turns into a drop down. This worked fine but a user asked about converting the drop down back into plain text. I worked on it a bit and it turns out it isn't that difficult.
To begin with, I added a new event listener to handle the change event in my drop down. Because the drop downs were created after the document was loaded, I had to use the live() feature. Note - before jQuery 1.4 it was not possible to use live with the change event. If you plan on using my code, be sure you are using the latest jQuery build. Here is the event handler I used:
1$(".selector").live("change", function() {
2 //first get the value
3 var val = $(this).val()
4 var name = $(this).attr("name")
5 var s = "<input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\">"
6 s += labels[val-1] + " - "
7 s += "<a href=\"\" class=\"edit\">edit</a>"
8 $(this).parent().html(s)
9})
As you can see, I simply grab the value and name from the drop down and recreate the text that was there originally. I had to make one more tweak. Since I was now generating edit links on the fly as well, I changed my original click listener for them to a live as well. So basically, I've got two live events. One to listen for "Edit" clicks, one to listen for "Change" events. You can play with a demo of this here. Here is the complete source.
2 //first get the value
3 var val = $(this).val()
4 var name = $(this).attr("name")
5 var s = "<input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\">"
6 s += labels[val-1] + " - "
7 s += "<a href=\"\" class=\"edit\">edit</a>"
8 $(this).parent().html(s)
9})
1<html>
2
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5<script>
6
7$(document).ready(function() {
8
9 //used for our drop downs
10 var values = [1,2,3,4]
11 var labels = ["Hated It","Disliked It","Liked It","Loved It"]
12
13 $(".changeable a.edit").live("click",function() {
14 //find the hidden item
15 var hiddenItem = $("input:hidden", $(this).parent())
16 //get the current val
17 var currentVal = hiddenItem.val()
18 //get the name
19 var currentName = hiddenItem.attr("name");
20 //now we can draw our drop down and select the right val
21 var s = "<select class=\"selector\" name=\""+currentName+"\">";
22 //hard coded values for our drop down
23 for(var i=0;i<values.length;i++) {
24 s+= "<option value=\"" + values[i] + "\""
25 if(currentVal == values[i]) s+= " selected"
26 s+= ">" + labels[i] + "</option>"
27 }
28 s += "</select>"
29 //now replace
30 $(this).parent().html(s)
31
32 return false
33 })
34
35 $(".selector").live("change", function() {
36 //first get the value
37 var val = $(this).val()
38 var name = $(this).attr("name")
39 var s = "<input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\">"
40 s += labels[val-1] + " - "
41 s += "<a href=\"\" class=\"edit\">edit</a>"
42 $(this).parent().html(s)
43 })
44})
45
46</script>
47</head>
48
49<body>
50
51<form method="post">
52
53star wars: <span class="changeable"><input type="hidden" name="starwars" value="4">Loved It - <a href="" class="edit">edit</a></span><br/>
54star trek: <span class="changeable"><input type="hidden" name="startrek" value="3">Liked It - <a href="" class="edit">edit</a></span><br/>
55
56<input type="submit" value="click me like you mean it">
57</form>
58
59<cfif not structIsEmpty(form)>
60 <cfdump var="#form#" label="form">
61</cfif>
62
63</body>
64</html>
2
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5<script>
6
7$(document).ready(function() {
8
9 //used for our drop downs
10 var values = [1,2,3,4]
11 var labels = ["Hated It","Disliked It","Liked It","Loved It"]
12
13 $(".changeable a.edit").live("click",function() {
14 //find the hidden item
15 var hiddenItem = $("input:hidden", $(this).parent())
16 //get the current val
17 var currentVal = hiddenItem.val()
18 //get the name
19 var currentName = hiddenItem.attr("name");
20 //now we can draw our drop down and select the right val
21 var s = "<select class=\"selector\" name=\""+currentName+"\">";
22 //hard coded values for our drop down
23 for(var i=0;i<values.length;i++) {
24 s+= "<option value=\"" + values[i] + "\""
25 if(currentVal == values[i]) s+= " selected"
26 s+= ">" + labels[i] + "</option>"
27 }
28 s += "</select>"
29 //now replace
30 $(this).parent().html(s)
31
32 return false
33 })
34
35 $(".selector").live("change", function() {
36 //first get the value
37 var val = $(this).val()
38 var name = $(this).attr("name")
39 var s = "<input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\">"
40 s += labels[val-1] + " - "
41 s += "<a href=\"\" class=\"edit\">edit</a>"
42 $(this).parent().html(s)
43 })
44})
45
46</script>
47</head>
48
49<body>
50
51<form method="post">
52
53star wars: <span class="changeable"><input type="hidden" name="starwars" value="4">Loved It - <a href="" class="edit">edit</a></span><br/>
54star trek: <span class="changeable"><input type="hidden" name="startrek" value="3">Liked It - <a href="" class="edit">edit</a></span><br/>
55
56<input type="submit" value="click me like you mean it">
57</form>
58
59<cfif not structIsEmpty(form)>
60 <cfdump var="#form#" label="form">
61</cfif>
62
63</body>
64</html>
http://www.givainc.com/labs/linkselect_jquery_plug...
There's a bunch of examples here:
http://www.givainc.com/labs/linkselect_example.htm...
The plug-in may be exactly what some people are requiring and all you need to get it to work is attach it to existing select elements on your page.