datatables and jeditable

grimmstede

Hi Allen and everyone,
at http://www.feemon.com/filemon/table8.php you can select an item in the table and then right click to get a context menu. One of the options is rename. I would then like the name field to become editable. I have looked at the example and am kind of lost. Any help with achieving this would be very welcome. Thanks!

allan

Hi grimmstede,

What you could do here is use jEditable - something a bit like in this example for KeyTable: http://datatables.net/release-datatables/extras/KeyTable/editing.html (although obviously without the KeyTable specific code). So what you would need to do is attach a listener to the 'Rename' option in the menu (presumably whatever you are using for the right click menu allows that somehow), it will execute the jEditable method ( $(...).editable( ... ) - see the jEditable docs for more information: http://www.appelsiini.net/projects/jeditable ) and make your text box editable :-)

Regards,
Allan

grimmstede

Okay, here is my code for the context menu:
[code]
$("tbody").contextMenu({
menu: 'myMenu'
},
function(action, el, pos) {
var doc = fnGetSelected();
var docName = doc.split(">");
if (action == 'open')
{
var trimmed = docName[1].replace(/^\s+|\s+$/g, '') ;
window.open('../filemon/php/download3.php?name=' + trimmed + '&parent=' + window.tableName);

}
else if (action == 'delete')
{
input_box=confirm("Are you sure you want to delete:" + docName[1] + "?");
if (input_box==true)
{
//alert("ok");
var trimmed = docName[1].replace(/^\s+|\s+$/g, '') ;
$.post("php/deletefile.php", { folder: window.tableName, name: trimmed } );
pausecomp(1000);
oTable = $('#files').dataTable();
oTable.fnDraw();
}
}
else if (action == 'rename')
{

}
else
{



alert(
'Action: ' + action + '\n\n' +
'Folder: ' + window.tableName + '\n\n' +
'File: ' + docName[1] + '\n\n' +
//'Element text: ' + $(el).text() + '\n\n' +
'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)'
);
}
});
[/code]

I make some other things in my page editable like this:
[code]
$('.notes_area').editable(function(value, settings) {
$.post("php/savenote.php", { id: tableName, value: value, name: trimmed } );
return(value);
}, {
type : 'textarea',
submit : 'OK',
cancel : 'Cancel',
submit : 'OK',
rows : '5',
indicator : '',
tooltip : 'Click to edit...'
});
[/code]

my deal is, I don't know how to make that td editable and pass it to my post program
I know it's close!

allan

Hi grimmstede,

So there are basically two pieces of information that I think you need - and they should both be provided in one way or another by whatever you are using for the right click menu. They are the TD that is clicked on (or more generally just the target element) and the action that was called from the right click menu. There must be a way to attach a callback, or an event listener to that menu. Once you have that, then making the element editable should simply be a case of calling your jEditable code above (stick it in a function and make the selector a variable for it).

What is the right click menu controller you are using?

Regards,
Allan

grimmstede

I am using the jquery contextmenu controller and am falling into the else if (action == 'rename') block correctly.
I am right there, just don't know exactly what to make editable? Like tr.odd row_selected or something like that?

Thanks for all the help.

allan

The contextmenu documentation says that you have access to 'el' in the callback that it fires ( http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/#callback ) so I think you would just do something like $(el).editable(...);

Allan