jEditable Dropdown Text
I was stuck for a few minutes trying to figure out how to display the text of the selected item in the dropdown when using jEditable.
My script was querying an odata service (WCF Data Service) which returned a list of values with their ids. I wanted this to be represented in a dropdown with the text displayed instead of the default “selected value”. After struggling for a bit I came up with an idea, since someone else was struggling with the same problem I decided to create a post about it.
Here is my JavaScript code:
var settings = new Array(); // holds settings
function loadSettings(selected) {
// loads the settings from the database via oData service
$.ajax({
type: "GET",
url: "dataService.svc/Settings?$orderby=Code%20asc",
data: {}, // required for Chrome
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false, // wait until it's done before setting up jEditable
success: function (data) {
/* Settings
* int SettingId (PK)
* string Title
*/
// step through all the results
$.each(data.d, function () {
// add them to a hashtable
settings[this.SettingId] = this.Title;
});
// check if a selected one was passed in
if (selected != undefined)
settings["selected"] = selected; // set the selected one
},
error: function (msg, a) {
// call error method
// TODO: Display correct error here by checking resulting code
showError("ERROR: Could not load the settings from the database");
}
});
// get the selected one's TEXT from the hashtable
var set = settings[val];
// TODO: Make this code better, use .append("<span />");
$('#settings').html('<span id="ddSettings">' + set + '</span>');
// setup field for inline editing
$('#ddSettings').editable(function (value, settings) {
saveSettings(value, docId, settings); // function to save settings
return suffixes[value]; // return the text from the hastable
},
{
data: settings, // my hashtable
cancel: 'Cancel',
placeholder: '---',
submit: 'Save',
tooltip: 'Click to edit',
type: 'select',
style: 'display: inline;'
});
}
And my html:
<html>
<head>
<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jeditable.mini.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
loadSettings(); // load the settings dropdown
});
// put the JavaScript source from above in here
</script>
</head>
<body>
Settings: <div id="settings"></div>
</body>
</html>
I hope this will help someone get around this problem.
It seems to me an easier way is to just build the json for your select dynamically putting the selected item first, and by not using the Selected item. That way you always get a value.
That will work as long as you do not want the items in a specific order, ie. alphabetical.
For the example in this post I was using WCF Data Services and in order to order the results myself I would need to write an interceptor on the service which to me seems a bit more work than the extra few lines of JavaScript I have here.
Thanks for sharing your opinion.
i just solved this problem for the second time today forgetting i had already solved it. rather than a JS solution, i handled it in the file jeditable posts to for the update and returned the value of the id rather than the id. hope this makes sense and helps.