JQuery Form plugin AND DataTables plugin
JQuery Form plugin AND DataTables plugin
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
table.
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:
==========
[code]
Active
Full Name
Email
<!--
//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"
} );
} );
//-->
[/code]
==========
Sample JSON returned by members-get.cfm:
==========
[code]
{ "aaData": [
[ "", "Jane Doe", "jane@example.com" ],
[ "", "John Doe", "john@example.com" ],
[ "", "Jack Smith", "jack@example.com" ],
[ "", "Janet Smith",
"janet@example.com" ]] }
[/code]
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
table.
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:
==========
[code]
Active
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"
} );
} );
//-->
[/code]
==========
Sample JSON returned by members-get.cfm:
==========
[code]
{ "aaData": [
[ "", "Jane Doe", "jane@example.com" ],
[ "", "John Doe", "john@example.com" ],
[ "", "Jack Smith", "jack@example.com" ],
[ "", "Janet Smith",
"janet@example.com" ]] }
[/code]
This discussion has been closed.
Replies
$.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
Regards,
Allan