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", "j...@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", "j...@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", "j...@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",
"ja...@example.com" ]] }

Reply via email to