jEditable with Selects
jEditable with Selects
Hi all,
Anyone ever used a jEditable select in a table cell? As would be expected we want to display the text in the drop down in a cell but send back to the server the code. So, as an example, in the following we want it to display 'Letter E' but return just 'E' to the server:
{'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}"
In the examples I've seen the 'Letter E' is displayed and the code is hidden or otherwise unavailable. I've look on both the jEditable and Data Tables sites and haven't found anything to help.
Following is the setup code. We are only changing the display on the screen and not posting it back to the server until all the columns are updated:
[code]
function setupListenersPullDown(selectID, iWidth, list, action) {
$(selectID).editable( function (sVal) {
return sVal;
}, {
type: 'select',
data: function(value, settings) {
//These were read in before the Data Table was loaded.
return list;
}
,
'callback': function( sValue, settings ) {
//sValue is the code but jEditable changes it to the text on the display
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[2] );
},
onblur : 'submit',
tooltip : 'click to edit',
height : '14px',
width : iWidth
} );
}
};
[/code]
Scott
Anyone ever used a jEditable select in a table cell? As would be expected we want to display the text in the drop down in a cell but send back to the server the code. So, as an example, in the following we want it to display 'Letter E' but return just 'E' to the server:
{'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}"
In the examples I've seen the 'Letter E' is displayed and the code is hidden or otherwise unavailable. I've look on both the jEditable and Data Tables sites and haven't found anything to help.
Following is the setup code. We are only changing the display on the screen and not posting it back to the server until all the columns are updated:
[code]
function setupListenersPullDown(selectID, iWidth, list, action) {
$(selectID).editable( function (sVal) {
return sVal;
}, {
type: 'select',
data: function(value, settings) {
//These were read in before the Data Table was loaded.
return list;
}
,
'callback': function( sValue, settings ) {
//sValue is the code but jEditable changes it to the text on the display
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[2] );
},
onblur : 'submit',
tooltip : 'click to edit',
height : '14px',
width : iWidth
} );
}
};
[/code]
Scott
This discussion has been closed.
Replies
I put the code attached to the td that is given by jEditable.
jEditable:
[code]
'callback': function( sValue, settings ) {
$(this).data('selectKeyValue',sValue); //This adds the key value to a hidden data element attached to the td when a key is changed.
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[2] );
},
[/code]
Then I get it when saving the data and put it in a hidden input html element.
[code]
$("#pDataTable tbody tr").each( function (i) {
var aData = oTable.fnGetData( this );
var rowNumber = oTable.fnGetPosition( this );
var pulldownAccState = $('.pulldownAccState').eq(rowNumber).data('selectKeyValue');
//store this someplace.
[/code]
Real ugly. Must be a better way.
Also.., how do I get the td row back without having to do the .class selector? I couldn't figure that out. It would make this a little simpler...
Scott
I'm afraid I didn't understand what you mean by "how do I get the td row back without having to do the .class selector?". Could you elaborate on that a little please?
I've never really used jEditable with selects before, but your solution looks reasonable to me. The first block could be simplified to:
[code]
'callback': function( sValue, settings ) {
$(this).data('selectKeyValue',sValue); //This adds the key value to a hidden data element attached to the td when a key is changed.
oTable.fnUpdate( sValue, this );
},
[/code]
And the second one to:
[code]
$("#pDataTable tbody tr").each( function (i) {
var pulldownAccState = $('td:eq(2)', this).data('selectKeyValue');
//store this someplace.
[/code]
Assuming I've understood correctly... $(this) in the callback function is the third column in the table (index 2) and $.data() assigns a value to it. You don't need jQuery to do this (although it will pollute the DOM - it's up to you):
[code]
'callback': function( sValue, settings ) {
this.selectedValue = sValue;
oTable.fnUpdate( sValue, this );
},
$("#pDataTable tbody tr").each( function (i) {
var pulldownAccState = $('td', this)[2].selectedValue;
//store this someplace.
[/code]
Of course selectedValue might be undefined if a jEditable hasn't been done on that row... so a check would need to be added for that.
Allan
I'm still working on this but one question.
I am still pretty green on jQuery Selectors. If I wanted to set the original value of the 'selectKeyValue' in fnRender what is the selector I would use to do that?
Scott
I'm not quite clear on why you would want to set the value of selectKeyValue (which is attached to a node) in the render function - which is designed for rendering, rather than DOM manipulation. If you were dealing with the DOM fnRowCallback might be better. What is it you are trying to achieve?
Allan