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:
$(".selector").live("change", function() {
//first get the value
var val = $(this).val()
var name = $(this).attr("name")
var s = "<input type=\"hidden\" name=\"" + name + "\" value=\"" + val +"\">"
s += labels[val-1] + " - "
s += "<a href=\"\" class=\"edit\">edit</a>"
$(this).parent().html(s)
})
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.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//used for our drop downs
var values = [1,2,3,4]
var labels = ["Hated It","Disliked It","Liked It","Loved It"]
$(".changeable a.edit").live("click",function() {
//find the hidden item
var hiddenItem = $("input:hidden", $(this).parent())
//get the current val
var currentVal = hiddenItem.val()
//get the name
var currentName = hiddenItem.attr("name");
//now we can draw our drop down and select the right val
var s = "<select class="selector" name=""+currentName+"">";
//hard coded values for our drop down
for(var i=0;i<values.length;i++) {
s+= "<option value="" + values[i] + """
if(currentVal == values[i]) s+= " selected"
s+= ">" + labels[i] + "</option>"
}
s += "</select>"
//now replace
$(this).parent().html(s)
return false
})
$(".selector").live("change", function() {
//first get the value
var val = $(this).val()
var name = $(this).attr("name")
var s = "<input type="hidden" name="" + name + "" value="" + val +"">"
s += labels[val-1] + " - "
s += "<a href="" class="edit">edit</a>"
$(this).parent().html(s)
})
})
</script>
</head>
<body>
<form method="post">
star wars: <span class="changeable"><input type="hidden" name="starwars" value="4">Loved It - <a href="" class="edit">edit</a></span><br/>
star trek: <span class="changeable"><input type="hidden" name="startrek" value="3">Liked It - <a href="" class="edit">edit</a></span><br/>
<input type="submit" value="click me like you mean it">
</form>
<cfif not structIsEmpty(form)>
<cfdump var="#form#" label="form">
</cfif>
</body>
</html>