Question

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://gunbladeiv.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….

Answer 1

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;
}