JQuery Form plugin AND DataTables plugin

JQuery Form plugin AND DataTables plugin

brilangbrilang Posts: 22Questions: 2Answers: 1
edited June 2009 in General
I am using the DataTables Plugin on a table. Each row in the table
contains a form.
I am using the sAjaxSource initialisation option to retrive a JSON
string from the server.
I now want to add the JQuery Form event ajaxform to each form in the
I think I have to use JQuery's Live event but I need some help in
writing the correct javascript for the Live event.
Here's my xhtml code right now:

Full Name

//Options for Toggle Forms
var FormOptions = {
beforeSubmit: showToggleRequest,
success: showToggleResponse,
type: 'POST'
function showToggleRequest() {
$('#ToggleStatus').css({'background-color': '#99CCFF', 'height': '20px'}).html('Updating ...').show();
function showToggleResponse(responseText, statusText) {
if (isNaN(responseText) && responseText != '') { //Error
$('#ToggleStatus').css({'background-color': '#FF9999', 'height': '20px'}).html(responseText);
} else { //Success
$('#ToggleStatus').css({'background-color': '#99CCFF', 'height': '20px'}).html('Updated').fadeOut(1000);
$(document).ready(function() {
$('.listForm').ajaxForm(FormOptions); //turn each .listForm into an Ajaxified Form
$('#datatable').dataTable( {
"sAjaxSource": "members-get.cfm"
} );
} );

Sample JSON returned by members-get.cfm:
{ "aaData": [
[ "", "Jane Doe", "jane@example.com" ],
[ "", "John Doe", "john@example.com" ],
[ "", "Jack Smith", "jack@example.com" ],
[ "", "Janet Smith",
"janet@example.com" ]] }


  • allanallan Posts: 54,712Questions: 1Answers: 8,558 Site admin
    Hi brilang,

    $.live is certainly one option - and that would be quite effective. Another option is to use the fnGetNodes() API function and apply the form plug-in to that once the table has been initialised (using fnInitComplete()). You might be interested in this example which shows how to add events post initialisation (although in this case for DOM source rather than Ajax - the same ideas apply): http://datatables.net/examples/example_events_post_init.html

This discussion has been closed.