Double clicking shows the html source

col.brazier

Hi,

I have a strange one here! Double clicking in any of the input boxes shows the html source for the field!?

http://www.fobgfc.org/players_edit3.php

I have searched but found nothing to help.

Regards,

Colin

fbas

That's what jeditable does.

What are you trying to use jeditable for?

col.brazier

Hi,

Basically to replicate the functionality of the demo here

http://jquery-datatables-editable.googlecode.com/svn/trunk/addingrecords.html

Colin

col.brazier

Any more help on this please?

fbas

if you have editable inputs (textboxes and checkboxes) I don't see what you need jeditable (on the cells) for. you can still use the sUpdateURL, sAddURL, sDeleteURL. but set null for any of the columns.

you just need to code your SAVE button to transmit the values of the inputs in the rows.

i.e. on change, send the cell (or row) back to server for update.

you should also use a primary key in the db and send that back to the table, to make sure your edits/deletes get the correct record. it looks like your rows are id'd just by row number.

col.brazier

Thanks, but how do I stop jeditable affecting the cells? As you have gathered I am a complete noob with this!

allan

It sounds rather like you want to disable jEditable on certain columns, while retaining the functionality on other columns. Is that correct? (otherwise just disable the whole thing :-) ). I've just had a look at the Editable plug-in documentation for DataTables and it doesn't look like there is an option to target specific columns. I've not trawled through the code, so there might be something, but that is where I would suggest looking next. Perhaps worth raising a feature request against the Editable plug-in for this.

Allan

fbas

in short, pass null as your column defs in the makeEditable() function (using aoColumns below. unsure if you can use aoColumnDefs, but it's possible, right? try it)

basically, I think any specification you would use in .editable() you can use in your aoColumns initializers.

[code]
.makeEditable({
sUpdateURL: "UpdateData.php",
sAddURL: "add_player.php",
sDeleteURL: "DeleteData.php",
aoColumns: [
null,
null,
null,
null // etc.
]
});
[/code]

allan

Ah nice find fbas!

What I am going to try and do in the near future is expose a method for developers to easily build up something like aoColumnDefs for plug-ins, as it really can be very useful.

Regards,
Allan

col.brazier

That's EXACTLY it - thanks alot!

Col

gb5256

Hello,
I would like to restart this topic as it went away from Jeditable, which I want to use.
What I do right now is, I have jedtiable for server-side processing.
So there is no save button or anything like this.

I run first of all into the same problem as the starter of this topic, saying that Jedtiable shows the tags when clicking on it. Even worse, the space that datatables reserve for this columns is the size of the whole option-tag, which is about 40 characters long, where actually the checkbox which is displayed is very short. Is there any solution for this, like forcing the size of the cell?

Second, when clicking on the checkbox, it displays the option-tags. When I remove those and enter the value that I like it saves the new data to the server as expected. But: I found a little bit of code
http://svn.appelsiini.net/svn/javascript/trunk/jquery_jeditable_contributed/jquery.jeditable.checkbox.js
that displays a ceckbox even after clicking it, but from that point onward, the data is not submitted to the server anymore.

Any ideas?
Here is my code:
[code]
// Create a custom input type for checkboxes
$.editable.addInputType("checkbox", {
element : function(settings, original) {
var input = $('');
$(this).append(input);

// Update 's value when clicked
$(input).click(function() {
var value = $(input).attr("checked") ? 'Yes' : 'No';
$(input).val(value);
});
return(input);
},
content : function(string, settings, original) {
var checked = string == "Yes" ? 1 : 0;
var input = $(':input:first', this);
$(input).attr("checked", checked);
var value = $(input).attr("checked") ? 'Yes' : 'No';
$(input).val(value);
}
});
//CB:Serve-side processing
$(document).ready(function() {
var oTable = $('#example').dataTable( {
//Enable Themeroller
"bJQueryUI": true,
//For tableTools (this includeds export to clipboard, XLS, printing etc
"sDom": '<"H"lfrT>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/core/javascripts/DataTables/tabletools_media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"copy",
"xls",
"pdf"
]
},
//Default number of records shown
"iDisplayLength": 25,
//for having the pagination buttons at the bottom
"sPaginationType": "full_numbers",
//for AJAX:
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/core/actions/handle_requests.php?action=readTable",
//for AJAX callback to server
"fnDrawCallback" : function () {
$('#example tbody td:not(.readonly)').editable( '/core/actions/handle_requests.php?action=writeTable', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
oTable.fnGetData( this.parentNode )[0];
/* Redraw the table from the new data on the server */
oTable.fnDraw();

},
"submitdata": function ( value, settings ) {
return {
"row_id": oTable.fnGetData( this.parentNode )[0],
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px",
"type" : "checkbox"
} );
},


"aoColumnDefs": [
{ "fnRender": function ( obj ) {
if( obj.aData[ obj.iDataColumn ] == "1" )
return '';
else
return '';
}, "aTargets": [ 8 ] },
{ "sClass": "readonly", "aTargets": [0,1] },
{ "sClass": "center" , "aTargets": [0,6,7,8] }
]

} );
} );


[/code]