Using jEditable on hidden row

zoko2902

Hi everybody!

I am an absolute beginner in jQuery and Datatables, but I like it very much. Very nicely done. So far everything worked out very well, and I was able to get the grasp of everything. Recently I got jEditable working for rows and the discovery of the hidden row feature was a full hit for me :-). But with my enthusiasm came one problem..

While jEditable works fine with rows in the datatable, it's seems I can't get it to run with hidden rows. Maybe i'm missing something or may brain is on overload (enthusiasm kept me up for too long:)), but it turns out that jEditable can't "catch" hidden rows class, or it isn't called, or something else. I read something about fnDrawCallback and thought it my help, but I all have to try it tomorrow after some well deserved sleep :). So I would appreciate any suggestions, input or pointer on this.

Cheers!

allan

Hi zoko2902,

When you say "hidden row", do you mean the rows added/removed by fnOpen() and fnClose()? In which case you are quite correct - since these elements did not exist when you added the jEditable event handler, no event was a assigned to them! You might be interesting in one of my other bits of software called Visual Event: http://www.sprymedia.co.uk/article/Visual+Event - this will show which elements has event handlers attached to them, and what those handlers are.

So to get around this, what you need to do is add jEditable to the new element created by fnOpen(). You could assign a particular class to the opened row to make it an easy selector if you wish (there are lots of ways to grab the new element :-) ).

Hope this helps,
Allan

zoko2902

Hm..I tried everything I came up with, but with no positive results. It's something I'm missing or I reached my intelectual limits :). Thanks for Visual Event, it will come in handy, but here I know which event handlers to look for.

Yes rows are added/removed by fnOpen/fnClose. Code I use in my datatables is from the examples section. For instance

[code]

function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;

var sOut = '';
sOut += 'Causality assessment by manufacturer:'+aData[10]+'';
sOut += 'Expectedness:'+aData[11]+'';
sOut += 'Reported to the CA:'+aData[12]+'';
sOut += '';

return sOut;

}

[/code]

I tried to add jEditable in fnFormatDetails and even in the event listener for opening and closing details...all in all i'm lost..what am I seeing wrong?

allan

Hi zoko2902,

You can't add the jEditable listeners in fnFormatDetails because the DOM nodes haven't been created yet. You'll need to call jEditable after fnOpen() has finished it's execution. Then as long as the selectors are correct, it should just work :-) (Visual Event will tell you if the event has been attached).

Regards,
Allan

zoko2902

Omg...what a dumb ass (or a n00b ass;)).. I just realized what I've being doing wrong all this time. :))) It's always something this simple.

I've been "clipping" class selectors to the wrong td tag. I added the class like this:

[code]
sOut += 'Causality assessment by manufacturer:'+aData[10]+'';
[/code]

while I was supposed to clip it like this:

[code]
sOut += 'Causality assessment by manufacturer:'+aData[10]+'';
[/code]

So of course if I clicked the td tag which held data from aData nothing happened, beacuse jEditable was actually editing previous td tag. I returned the call to jEditable where it was in the beginning, just after the fnOpen(), like you said.

[code]
else {
/* Open this row */
this.src = "/testiranje/img/../css/datatablescss/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
make_jeditable ();
}
[/code]

Anyways the problem is solved, everything works like a charm. Thanks for the help, the last one made me recap my steps one by one.

Cheers!

allan

Hi zoko2902,

Good stuff - glad to hear you got it working, and thanks for detailing what the issue was (easy thing to do!). Hopefully someone else will find this useful!

Regards,
Allan

dlicorish

How would the make_jeditable() function look? I've tried adapting the code from this thread and from here: http://datatables.net/forums/comments.php?DiscussionID=3045 but can't seem to make it work.

zoko2902

Hello dlicorish!

Actually make_jeditable() is nothing much. A simple aggreate function in which i intialize jeditable on a wanted dom element (if table has 5 columns, and I want a different inline input or source like dropdown, texarea etc). For instance:

[code]
function make_jeditable () {

$(".editable-date").editable(myJeditableFunction, {
type: "datepicker",
select : true,
tooltip: 'Click to edit date...',
cssclass : "editable",
onblur : "ignore"
});


//textarea autogrow
$(".editable-textarea-auto").editable(myJeditableFunction, {
type : 'autogrow',
tooltip: 'Click to edit text...',
select : true,
submit : 'Ok',
cancel : 'Quit',
onblur : "ignore",
autogrow : {
lineHeight : 18,
minHeight : 30
},
cssclass : "editable",
style: "inherit"
});
}

function myJeditableFunction (value, settings) {
var edits = new Object();
var origvalue = this.revert;
var textbox = this;
var result = value;
if(origvalue == value) {
this.reset()
return
}
edits[settings.name] = [value];
var data_array = this.id.split(".");
var returned = $.ajax({
url: data_array[0],
type: "POST",
data : {'value': edits.value, 'id': data_array[1], 'column': data_array[2]},
success : function (msg) {
if(msg != "failure") {
//insert ok message
$("#message").attr("class", "ui-corner-all ui-state-highlight");
$("#message-content").html("Message: Item has been successfully updated.");
if(data_array[2] == "causalityman") {
$("#noticeicon"+data_array[1]).fadeOut("fast");
}
}
else {
//insert error message
$("#message").attr("class", "ui-corner-all ui-state-error");
$("#message-content").html("Error: Item has not been updated. Try again.");
}
$("#message-content").fadeIn("fast");
$("#message").effect("highlight");
$("#message").fadeTo(5000, 1).fadeOut("slow");
}
});
return (result);
}
[/code]

Try to explain in more detail where you're stuck so we can put in some pointers.

dlicorish

Hi Zoko,
Thanks for taking the time to reply. Yeah, the solution often looks like "nothing much" once you have it! ;-)

I was getting stuck trying to implement a solution using the "submitdata" and "callback" function of jeditable, similar to the examples page: http://datatables.net/examples/api/editable.html. However it turns out the "oTable.fnGetPosition( this )" call fails when processing fields from the details row. Looks like instead, you've encoded the key info in the id attribute of each editable field, thus avoiding that mess!

Also, I didn't know you could define your own function for the jeditable call. This means I can set up the AJAX call correctly for ASP.NET 2.0 Webforms, which doesn't work right out of the box.

Thanks again for the help Zoko, I'll try it out in my code.

And Allan, thanks for a great tool!