Other jquery plugin working only on the first page

djoh

Dear datatablers,

I would like to include some plugins in my datatable.
I tried some ToolTips plugins, they're working well on the first page, but if I go to the second page of results, it stops displaying.

In the same way, I tried to include Edit In Place plugin, to allow modification of the fields right away... It works on the first page but not on the other results.

Any clue on how to fix that ?

allan

Hi djoh,

It sounds like the event handlers haven't been applied. Here are some useful links:

http://datatables.net/examples/example_events_pre_init.html
http://datatables.net/examples/example_events_post_init.html
http://datatables.net/forums/comments.php?DiscussionID=159
http://sprymedia.co.uk/article/Visual+Event - lets you see what elements have events applied to them.

Hope this helps,
Allan

djoh

Wow, problem fixed in less than one hour.

Just had to change the way I initialize my plugins...

Thanks a lot, for this great plugin and for this very efficient help !

djoh

Hmm it seems that there are some incompatibility issues between the editable plugin and datatables...
Two great plugins which cannot be used together ??

With http://code.google.com/p/jquery-in-place-editor/, I make editable the fields in the table, which I display with datatables (client-side).
It crashes when I leave the page in Firefox and Chrome, seems ok in IE (but who is using IE ??).


Note sure this will look nice, if that can help (more code if you need) :

[code]

$(document).ready( function() {
$('#titre1').FontEffect({
gradient:true,
gradientColor:"#f3845B",
mirror:true,
mirrorColor:"#b3441b"
});
$(".pdf").attr("target","_blank");
$("#footer").positionFooter(true);
$("td.editable").editInPlace({
url: "save.php",
show_buttons: true,
default_text: "",
field_type: "textarea",
textarea_cols: 30,
textarea_rows: 3
});
$('#example').dataTable( {
"sPaginationType": "full_numbers",
"bStateSave": false,
"bSortClasses": false
});
})
[/code]

allan

HI djoh,

I don't see anything obvious from your code sample which would cause this to fail - there shouldn't be any incompatibility with DataTables. If you comment out the DataTables initialisation does it work okay?

You might be interested in this example for editing a table: http://datatables.net/examples/example_editable.html - it uses jEditable rather than editinplace, but the principle should be the same.

Allan

djoh

Allan,

I think it simply comes from the fact that I'm treating more than 1000 entries.
I get the same issue with jEditable.

However, I'm now implementing the server-side processing.
Could you give an example of using the live() function to re-initialize the jEditable at each display ??

Thanks again,
Jonathan

allan

The reason to use live() would be that you don't re-initialise the event handlers on each draw - you only add it once. However, I'm not entirely sure how this would be accomplished using jEditable. Certainly I see the problem of applying 1000 odd event handlers, but I'm not knowledgeable enough about jEditable (or live() ) to be able to answer your question immediately.

If you are using server-side processing then this problem doesn't really exist since there are a limited number of rows. You can just use fnDrawCallback() to add the event handler required.

Something like this should do it:

[code]
$('td', oTable.fnGetNodes()).editable( 'media/examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"height": "14px"
} );
[/code]

* note not actually tested!...

Allan

djoh

Hmmmm, I haven't succeeded to make my fields editable since I change for server-side.
Here is the code:

[code]
var oTable;

$(document).ready( function() {
oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"bAutoWidth": false,
"bSortClasses": false
});
$("td", oTable.fnGetNodes()).editable( 'save.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
indicator : 'Saving...',
type : 'textarea',
submit : 'OK',
id : 'element_id',
name : 'update_value'
});
})
[/code]

allan

What is happening here is that the jEditable plug-in isn't finding any TD elements to apply it's event handlers to. As noted before, you need to make use of fnDrawCallback() ( http://datatables.net/usage#fnDrawCallback ) to add them. The reason for this is that the get request for the data from the server is asynchronous - and thus the .editable() function runs before the data has been gathers and the DOM inserted for the table.

Did you give Visual Event a go ( http://sprymedia.co.uk/article/Visual+Event )? It really is most useful for seeing what elements have events on them.

Allan

djoh

Ok.
It works on Google Chrome, very slowly though.
It makes Firefox crashes and IE displays "No matching results found" with 1589 entries detected.

[code]
oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"bAutoWidth": false,
"bSortClasses": false,
"fnDrawCallback": function () {
$('td').each( function () {
var iPos = oTable.fnGetPosition( this );
$("td", oTable.fnGetNodes()).editable( 'save.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
indicator : 'Saving...',
type : 'textarea',
submit : 'OK',
id : 'element_id',
name : 'update_value'
});
});
}
});
[/code]

I tried with JEdit in Place, which loads much faster, but doesn't send any argument by $_POST...

Any idea ?

djoh

I got an idea, I think I just have to delay the load of the editable function...

djoh

Nope, I'm giving up ...

Till a tutorial appears with Server-side + jEditable !

Thanks anyway for your great job, I'm still using it on other projects !

allan

Hi djoh,

Perhaps you could try this:

[code]
var oTable;
$(document).ready(function() {
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php",
"fnDrawCallback": function () {
$('#example tbody td').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
/* Redraw the table from the new data on the server */
oTable.fnDraw();
},
"height": "14px"
} );
}
} );
} );
[/code]

It works for me here. The server_processing.php needs to update the database on the server-side (you'll need to pass the row id and column to the server using jEditable's callback functions) and then fnDraw() pull the new information from the server and draws it on the page :-)

Allan

djoh

Good morning Allan,

I tried your code and it's working really fine.
However, I'm still not able to pass the new value and the id (I formatted it like that : id=columnName_rowNumber). The post which I send remains empty...

allan

Hi djoh,

Did you use the "submitdata" callback function that jEditable presents? Have a look at the jEditable documentation for this callback function: http://www.appelsiini.net/projects/jeditable . You can return an object with extra data to be posted to the server. This data can be derived from wherever you want - most likely the row in question. See the discussion here for information about that: http://datatables.net/forums/comments.php?DiscussionID=200

Allan

djoh

Nope, still not able to get the ID of the clicked data.
I understood the way submitdata works, but I don't know from where I can get the id that I used to pass so easily before...
I'm using Firebug to monitor the sent arguments, and whatever I try, I always end with the new and the old value... which is sadly not enough for updating the database...

[code]
var oTable;

$(document).ready( function() {

oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"fnDrawCallback": function () {
oEditable = $('#example tbody td').editable( 'save.php', {
"callback": function(sValue, y) {
/* Redraw the table from the new data on the server */
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
oTable.fnDraw();
},
submitdata : function(aPos, aData) {
return {aPos: aPos, aData: aData};
},
id : 'element_id',
name : 'update_value'
});
}
} );
})
[/code]

Sorry to disturb you again...

allan

I'm not sure I understand the "submitdata()" function that you are passing to jEditable. jEditable's submitdata() function takes two parameters, self (i.e. the element in question) and settings (it's settings object). It looks like you are just returning this information to the caller, and jQuery probably doesn't know quite what to do with them.

You need to use fnGetPosition etc in the submitdata() function, obtain the unique ID from there and then pass it back.

Allan

djoh

What I don't really get here is when or how the functions are called.

I'm now able to pass all the values of one row, I guess I could put the id of the row in the first column and not display it - so if you could just explain to me the functions calls, so I can complete my beginner level in jQuery+DataTables+jEditable...

Thanks a lot for your help Allan, your help has been really useful to me.

allan

Okay, well the submitdata() take two parameters as I noted. Probably neither is particularly interesting to you - it's more the 'this' parameter while will interest you. 'this' in this context will be the 'td' element that has been clicked on. Therefore you can us fnGetPosition() and fnGetData() to get information about your row. This includes hidden information, so you can store the id in a hidden column (or even an element attribute). Then return that to jEditable and it will appear in the post data.

Allan

djoh

Yeah I finally did it !

Thanks for all your help and your wonderful plugin !

kimekime

cool

aliDiouf

Hi allan,
am interrested in ths solution described below because facing the same problem but the solution is not given here.
Am a newbe i n jquery, so...
thanks for your help

allan

Hi aliDiouf,

I'm afraid I won't write the code for you (no one learns that way), but I can help a bit (hopefully). Inside submitdata() the special variable "this" is the TD in question. What you need to do is find out where that TD is in DataTables so you can get the ID of the row in question. This is achieved by fnGetPosition() and fnGetData() - more information about these functions is in the documentation. Have an experiment - see what happens :-)

Regards,
Allan

kristaps.v

Hi,
I got this working,
client side
[code]
$(document).ready(function() {
oTable = $('#datatable').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sAjaxSource": 'mysourcescript.php',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
/*
* Add id to row from first column value
*/
$(nRow).attr("id",$('td:eq(0)', nRow).html());
return nRow;
},
"fnDrawCallback": function () {
$('#datatable tbody td').editable( 'myupdatescript.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},

"height": "14px"
} );
}

});
} );
[/code]
Server side update script, it's codeigniter controler method, but logic is understandable
[code]
if(isset($_POST['row_id']) && isset($_POST['value']) && isset($_POST['column'])){

$id = $_POST['row_id'];
$value = $_POST['value'];
$column = $_POST['column'];

$columns = array( 2 => 'somecolumn', 3 => 'somecolumn', 4 => 'somecolumn', 5 => 'somecolumn');

$data = array(
$columns[$column] => $value
);

$this->db->where('id', $id);
$this->db->update('mytable', $data );
echo $value;
}
[/code]

Sugeri

Hallo djoh, i'm so sorry for my question. I'am is newby.
I'v got same problem with jquery is only workig on the first page. What the changes is you make it for solved the problem? Can you give me some exmple scripts? thanks.

allan

This thread is from February so you might not get a reply from djoh, but have a look at this FAQ: http://datatables.net/faqs#ss_events - also the fnDrawCallback in the script above is the solution that djoh came up with.

Allan

btvbill

So, what goes into the sAjaxSource page??? I'm not an Ajax expert and Mr. Clean ain't coming out in the wash.