editable datatable...

brianmm

OK, sorry to annoy everyone...

ON IE7 the below produces a weird effect... when I click on the td, the text form field flashes momentarily then reverts to the static text. It works perfectly in FF and Opera.

please note I have also striopped any CSS and other js fiels incase they were interfering in some way to no effect.

[code]




$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#flag-list tbody td').editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
}
} );

/* Init DataTables */
oTable = $('#flag-list').dataTable();
} );



Flag
Value


TESTFLAG1
REQURIED


TESTFLAG2
REQURIED


TESTFLAG3
REQURIED


TESTFLAG4
REQURIED


TESTFLAG5
REQURIED


TESTFLAG6
REQURIED


TESTFLAG7
REQURIED


TESTFLAG8
REQURIED


[/code]

brianmm

tis OK... weird... dont know how i ended up with jquery.editable-1.3.3.min.js i meant to get jeditable... works now :|

brianmm

heh... textbox now grows in size??!

allan

Hi Brian,

I noticed with my jEditable demo that the textbox would grow in size - it's very odd. I can only guess that it is due to the resizing of the table when the textbox is inserted (padding/margin issue perhaps?). What I did was to just apply an absolute size (i.e. width: 50px) to the textbox style declaration.

Regards,
Allan

bcha

Hello,

I have been getting the same problem (text box growing in size) and did not fully understand Allan's solution.
Allan if it not too much trouble could you tell me your solution in more detail?
sample code would be much appreciated.

Thank you

allan

CSS:
[code]
input.text {
width: 50px;
}
[/code]
For this you'd need a "text" class on the text input elements of course.

Allan

bcha

Thank you for your solution.

i edited jquery.jeditable.js file and altered the text box size section, and it seemed to correct the problem.

loveme

I have a new solution that is modify the jquery.editable.js file.
replace :

[code]
/* figure out how wide and tall we are, saved width and height */
/* are workaround for http://dev.jquery.com/ticket/2190 */
if (0 == $(self).width()) {
//$(self).css('visibility', 'hidden');
settings.width = savedwidth;
settings.height = savedheight;
} else {
if (settings.width != 'none') {
settings.width = settings.autowidth ? $(self).width() : settings.width;
}
if (settings.height != 'none') {
settings.height = settings.autoheight ? $(self).height(): settings.height;
}
}
[/code]

with:

[code]
if (0 == $(self).width()) {
//$(self).css('visibility', 'hidden');
settings.width = savedwidth;
settings.height = savedheight;
} else {
if (settings.width != 'none') {
settings.width = settings.autowidth ? savedwidth : settings.width;
}
if (settings.height != 'none') {
settings.height = settings.autoheight ? savedheight : settings.height;
}
}
[/code]

the changes are replace $(self).width() with savedwidth,and repalce $(self).height() with savedheight.