jeditable with dropdownlist display name but post with id

kym

Hi all,

I am very new with datatables, now i use it for a inline editing (like excel) and post it after editing all cells. In the cells, i have a text column with autocomplete plugin, a datepicker column using jquery ui which work quite ok, but when using jeditable with 'select', it come across a big problem, for many example i google it, it always use {'A':'Letter A','B':'Letter B','C':'Letter C', 'selected':'A'}, then the column display will become, A, B or C and when I post that column should be A, B or C too. But Letter A, Letter B, Letter C is useless. But actually I want to display Letter A, Letter B and Letter C in the column and as the selection when the user select, but for posting data, it should be A,B and C. How I can do it? thanks.

Here is my code,

Since i am using asp.net mvc, so first i pass the configs (from viewdata) to a js file)
[code]

var configs = {
categorySelections: {}
, categorySelectionList: ''
};
$(document).ready(function () {
var array = @(Html.Raw(Json.Encode(ViewData["categorySelections"])))
//reference json to find displayname
configs.categorySelections = array
var catSel = '@Html.Raw(Json.Encode(ViewData["categoryJson"]))'

//validateJSON is the function i find from the internet to act as datasource the jeditable select
configs.categorySelectionList = validateJSON(catSel);
});

[/code]


And this is the part of js file which config the dropdownlist column with jeditable
[code]
var myConfigs;

function initPage(configs) {
myConfigs = configs;
}

$(element).find('td:eq(1)').editable(
function (value, settings) {
//console.log(value);
debugger;
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], 1);

return (value);
}
, {
data: configs.categorySelectionList,
type: 'select',
event: "dblclick",
onblur: 'submit',
callback: function (value, settings) {
debugger;
var cats = $.grep(myConfigs.categorySelections, function (e) { return e.catuid == value; });
$(this).html(cats[0].displayname);
}
});
[/code]

Here is the save button for posting data in the same js
[code]
$('#Save').click(function () {
var cells = [];
var rows = $("#mydatatables").dataTable().fnGetNodes();
debugger;
for (var i = 0; i < rows.length; i++) {
cells.push(getRowArray(rows[i]));
}

alert(JSON.stringify(cells));
});

function getRowArray(row) {
debugger;
return {
ptuid: $(row).find("td:eq(0)").html()
, catuid: $(row).find("td:eq(1)").html()
... //other column

};
}
[/code]

drizzt2511

Hi,

I had the same problem a few month ago. I used the jeditable plugn from applesiini (or something like this) and I used the call back function.

My code, with as you can see a few alert debug....

First create your own inputType. As you can see you may need to create an hidden vamue which will take the database value of your input and not the text (in your case 'A' and not 'letter A')

[code]
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete({
source : settings.autocomplete.source,
minLength : "2",
change: function (event, ui) {
var autocomplete = $(this).data("autocomplete");
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
var myInput = $(this);
autocomplete.widget().children(".ui-menu-item").each(function() {
//Check if each autocomplete item is a case-insensitive match on the input
var item = $(this).data("item.autocomplete");
if (matcher.test(item.label || item.value || item)) {
//There was a match, lets stop checking
autocomplete.selectedItem = item;
return;
}
});
//if there was a match trigger the select event on that match
//I would recommend matching the label to the input in the select event
if (autocomplete.selectedItem) {
autocomplete._trigger("select", event, {
item: autocomplete.selectedItem
});
//there was no match, clear the input
} else {
$(this).val('Divers');
$("#eventType2").val('4-000-000');
}
},
focus: function (event, ui) {
// alert (ui.item.label);
$(event.target).val(ui.item.label); // display the selected text
// $("#eventType2").val(ui.item.value);
return false;// save selected id to hidden input
// alert (document.forms["form_infos"].elements["eventType"].value);
},
select: function (event, ui) {
// alert (ui.item.label);
$(event.target).val(ui.item.label); // display the selected text
$("#eventType2").val(ui.item.value);
return false;// save selected id to hidden input
// alert (document.forms["form_infos"].elements["eventType"].value);
}
})
}
});
[/code]

[code]
$('.eventType', oTable.fnGetNodes()).editable("edit_eventtype.php", {
type : "autocomplete",
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1]+1);
},
"submitdata": function ( value, settings ) {
return {
"event_id": oTable.fnGetData(oTable.fnGetPosition( this )[0],0),
};
},
autocomplete : {
source : "../ajax/selectSubTypeByName.php"
},
"onblur" : "submit",
"height": "25px",
"placeholder" : ""
});
[/code]

kym

hi drizzt2511,

first thanks for your reply, before I try your suggestion, I think autocomplete may be the solution I also try before. After user select a autocomplete suggestion (the display text) then update the other hidden column (the id field) which is for final post, but I just wonder I may fall the other problem, first is the autocomplete suggestion is only the text not the primary key from you reference table, the most appropriate appocah must use something like selected value and selected text in the html option tag. But I think the most important is if I have a grid with many these kind of column, then I need to build many dummy hidden column to do that?

drizzt2511

OK I am also doing a "simple" select input. As you have a lot of column, if you have different kinds of value, you will need to create different class (for each column) and different php page

.geolevel is the class of my column in datatable.
Without "oTable.fnGetNodes()" the head of your column will also be editable....
[code]
$('.geoLevel', oTable.fnGetNodes()).editable( 'edit_geolevel.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1]+1);
},
"submitdata": function ( value, settings ) {
return {
"event_id": oTable.fnGetData(oTable.fnGetPosition( this )[0],0),
};
},
"data" : "{'':'','1':'Number one','2':'Number two','3':'number three','4':'number four'}",
"type" : 'select',
"submit" : 'OK',
"height": "25px",
"placeholder" : ""
} );
[/code]

php, receive the value and the id. I then update my database and instead of returning the value, I returned the text. The main point is in the callback function of jeditable
[code]
if (isset($_POST['yyyyy'])) $yyyy = mysql_real_escape_string($_POST['yyyyy']); else $yyyyy=0;
if (isset($_POST['value'])) $value = mysql_real_escape_string($_POST['value']); else $value=0;

$sql="UPDATE xxxx SET geoLevel = ".$value." WHERE id =".$yyyy;
$result = mysql_query($sql);

switch ($value) {
case 1:
echo "Number one";
break;
case 2
echo "Numbertwo";
break;
[/code]

kym

thanks a lot, for using callback, it works

here is my callback code
[code]
{
data: myConfigs.unitSelectionList,
type: 'select',
placeholder: '',
event: "dblclick",
tooltip: "",
onblur: 'submit',
callback: function (value, settings) {
debugger;
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(value, aPos[0], aPos[1] + 1);
var units = $.grep(myConfigs.unitSelections, function (e) { return e.unitcode == value; });
$(this).html(units[0].displayname);
},
[/code]

and for posting, I should change oTable.fnGetData(row, columnidx) instead of $(row).find("td:eq(" + idx + ")").html(), since it will get the text instead of value.

But, Do you face the problem that when initially show the table with data, this column initially show the value instead of the text? But when click the cell and choose the value of the dropdown, By using above solution, it works great?