jEditable - Edit data with drop down
I am using Datatables + jEditable to display data from my db and allow user to edit each cell directly.
Currently I able to implement the inline edit and save the updated value back to database for text field and also by datepicker, however, i met problem with data which I need to allow edit by drop down.
The value I need to edit is retrieve from another db table by foreign key relationship.
<td id="type@(item.FoodID)" class="dropdown">
@Html.DisplayFor(modelItem => item.FoodTypes.FoodTypeName)
</td>
I follow the guide from http://gunb开发者_如何学Cladeiv.blogspot.com/2011/06/part-2-mvc-3-and-datatables-with-inline.html using action to return a list of selection by Json:
function getFoodTypesList() {
var list;
$.post('GetFoodTypes', {},
function (data) {
list = validateJSON(data);
},
'json/javascript'
);
return list;
}
function validateJSON(x) {
var orig = x;
var stgify = JSON.stringify(orig);
var splitchar = ['\\"', '\',\'', '[', ']', '\"'];
var joinchar = ['\'', '\':\'', '', '', ''];
for (i = 0; i < 5; i++) {
stgify = stgify.split(splitchar[i]);
tmp = stgify.join(joinchar[i]);
stgify = tmp;
}
stgify = "{" + stgify + "}";
var finalEdit = stgify;
return finalEdit;
}
Question: I do not understand what is the use of "validateJson" method but I include it just as the example
When I try to click on the field, i get a javascript error from firebug: "xxx" is not defined (xxx is the foodtypename)
If i change the view to :
<td id="type@(item.FoodID)" class="dropdown">
@Html.DisplayFor(modelItem => item.FoodTypeID)
</td>
The error is gone but i get an empty dropdown.
Really need some help here....
I was able to modify the validateJson function according to my situation and its work! just in case anyone looking for the solution, i will post my method here:
// Function to format the food type list into plugin required json format
function validateJSON(x) {
var orig = x;
// Split and cover each array item with "" and then join with :
for (i = 0; i < orig.length; i++) {
var temp = orig[i].toString();
var tempArray = temp.split(",");
for (j = 0; j < tempArray.length; j++) {
tempArray[j] = "\"" + tempArray[j].toString() + "\"";
}
orig[i] = tempArray.join(":");
}
// Original validateJson method get from website
var stgify = JSON.stringify(orig);
var splitchar = ['\\"', '\',\'', '[', ']', '\"'];
var joinchar = ['\'', '\':\'', '', '', ''];
for (i = 0; i < 5; i++) {
stgify = stgify.split(splitchar[i]);
tmp = stgify.join(joinchar[i]);
stgify = tmp;
}
stgify = "{" + stgify + "}";
var finalEdit = stgify;
return finalEdit;
}
精彩评论