[jQuery] 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:
==========
<table id="datatable">
<thead>
<tr class="headerrow">
<th class="left">Active</th>
<th class="left">Full Name</th>
<th class="left">Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
<!--
//Options for Toggle Forms
var FormOptions = {
beforeSubmit: showToggleRequest,
success: showToggleResponse,
type: 'POST'
};
function showToggleRequest() {
$('#ToggleStatus').css({'background-color': '#99CCFF', 'height':
'20px'}).html('<img src="/images/loading.gif" width="16" height="16"
alt="Updating ..." />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</cfoutput>"
} );
} );
//-->
</script>
==========
Sample JSON returned by members-get.cfm:
==========
{ "aaData": [
[ "<form action='/member-toggle.cfm' method='get' class='listForm'
id='MForm1'><input type='checkbox' name='Active' id='Active1'
value='True' checked='checked' /><input type='hidden' name='ID'
value='1' /><input type='submit' name='Submit' value='Submit'
class='submitButton' /></form>", "Jane Doe", "jane@example.com" ],
[ "<form action='/member-toggle.cfm' method='get' class='listForm'
id='MForm2'><input type='checkbox' name='Active' id='Active2'
value='False' checked='checked' /><input type='hidden' name='ID'
value='2' /><input type='submit' name='Submit' value='Submit'
class='submitButton' /></form>", "John Doe", "john@example.com" ],
[ "<form action='/member-toggle.cfm' method='get' class='listForm'
id='MForm3'><input type='checkbox' name='Active' id='Active3'
value='False' checked='checked' /><input type='hidden' name='ID'
value='3' /><input type='submit' name='Submit' value='Submit'
class='submitButton' /></form>", "Jack Smith", "jack@example.com" ],
[ "<form action='/member-toggle.cfm' method='get' class='listForm'
id='MForm4'><input type='checkbox' name='Active' id='Active4'
value='True' checked='checked' /><input type='hidden' name='ID'
value='4' /><input type='submit' name='Submit' value='Submit'
class='submitButton' /></form>", "Janet Smith",
"janet@example.com" ]] }