Help needed with Datatables/Jeditable/datatables.editable
Help needed with Datatables/Jeditable/datatables.editable
Hello
I'm very new to all of this so please excuse my ignorance.
I have a datatable that has been created and working well. Now I've been trying to edit five of the fields with drop downs. It appears that I have that part working well. The problem is that I need to update the table with the selected text from the drop down without saving it to the database. We will be saving the entire table after all changes have been made. What happening now is that after I select the new option, the text reverts to whatever it was. Does anyone have any clue how to get this to work? My code is below.
Thanks in advance.
Using jQuery 1.7.1, datatables.1.9.1, datatables.bootstrap, fnreloadajax, jquery.jeditable 1.7.1, jquery.datatables.editable 1.3
[code] $('#qualCritTable').dataTable({
"sAjaxSource": "Default.aspx/getQualCrit",
"sDom": "<'row'<'span6'><'span6'>>t<'row'<'span3'i>>",
"sAjaxDataProp": "d",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumns": [
{ "bSortable": false,
"mDataProp": "qual_level_id",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "description",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level1",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level2",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level3",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level4",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level5",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
}
],
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
type: "POST",
url: sSource,
data: tableParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: fnCallback
})
},
"fnDrawCallback": function() {
$('#qualCritTable tbody td').editable(function(sVal) {
return sVal;
}, {
type: 'select',
placeholder: '',
data: ddParam,
"callback": function(sValue, y) {
alert('callback');
},
width: '14px;'
});
}
});
var qualTable = $('#qualCritTable').dataTable().makeEditable({
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
},
aoColumns: [
null,
null,
{
type: 'select',
data: ddParam,
placeholder: '',
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
data: ddParam,
placeholder: '',
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
placeholder: '',
data: ddParam,
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
placeholder: '',
data: ddParam,
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
placeholder: '',
data: ddParam,
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
}]
});[/code]
I'm very new to all of this so please excuse my ignorance.
I have a datatable that has been created and working well. Now I've been trying to edit five of the fields with drop downs. It appears that I have that part working well. The problem is that I need to update the table with the selected text from the drop down without saving it to the database. We will be saving the entire table after all changes have been made. What happening now is that after I select the new option, the text reverts to whatever it was. Does anyone have any clue how to get this to work? My code is below.
Thanks in advance.
Using jQuery 1.7.1, datatables.1.9.1, datatables.bootstrap, fnreloadajax, jquery.jeditable 1.7.1, jquery.datatables.editable 1.3
[code] $('#qualCritTable').dataTable({
"sAjaxSource": "Default.aspx/getQualCrit",
"sDom": "<'row'<'span6'><'span6'>>t<'row'<'span3'i>>",
"sAjaxDataProp": "d",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumns": [
{ "bSortable": false,
"mDataProp": "qual_level_id",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "description",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level1",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level2",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level3",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level4",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
},
{ "bSortable": false,
"mDataProp": "Level5",
"sClass": "editable",
"fnRender": function(oObj) {
return decodeURI(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
}
}
],
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
type: "POST",
url: sSource,
data: tableParams,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: fnCallback
})
},
"fnDrawCallback": function() {
$('#qualCritTable tbody td').editable(function(sVal) {
return sVal;
}, {
type: 'select',
placeholder: '',
data: ddParam,
"callback": function(sValue, y) {
alert('callback');
},
width: '14px;'
});
}
});
var qualTable = $('#qualCritTable').dataTable().makeEditable({
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
},
aoColumns: [
null,
null,
{
type: 'select',
data: ddParam,
placeholder: '',
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
data: ddParam,
placeholder: '',
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
placeholder: '',
data: ddParam,
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
placeholder: '',
data: ddParam,
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
},
{
type: 'select',
placeholder: '',
data: ddParam,
onblur: 'submit',
sUpdateURL: function(value, settings) {
alert("Custom function for posting results");
return value;
}
}]
});[/code]
This discussion has been closed.