Remembering Checkbox Values On Submit

ck1guy

Alan, congrats on a great script! It's perfect for my requirements.

I have a table that is populated with invoice data.

I've populated the 3rd column with a checkbox when a particular invoice is eligible for payment. The user may need to check one or more on each page. Then, they'd click a button to proceed to the payment page.

The problem is this: the checked checkboxes are only being remembered on the final page before the payment button is clicked.

In searching the forums it seems that I should be using fnDrawCallback. However, the various implementations I'm seeing in the forums are much more complex than my requirements. So I'm having trouble extracting the pieces I need.

Here is my basic implementation as it stands:

[code]
jQuery(document).ready(function() {
jQuery('#example').dataTable( {
"bJQueryUI": true,
"aaSorting": [[0,'desc']],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
{ "sType": 'date' },
{ "sType": 'currency' },
{ "sType": 'currency' },
null
]
});
});
[/code]

allan

When you say that they are only being remembered for the last page, do you mean that the checkbox names for the page which is visible are the ones which are known (i.e. The ones submitted to the server, or are in the DOM)? The reason for this is that DataTaes will remove rows which are not needed for display from the document. FnGetNodes can be used to get a full list (array) of all TR nodes. The exact way this might be done will depends on your exact usage.

Allan

allan

One example usage: http://datatables.net/examples/api/form.html

Allan

ck1guy

Thanks for your reply, Allan.

You asked:
"When you say that they are only being remembered for the last page, do you mean that the checkbox names for the page which is visible are the ones which are known (i.e. The ones submitted to the server, or are in the DOM)? "

Answer: The ones in the DOM.

The example you provided was helpful. This is what my current implementation now looks like with the example integrated:

[code]var oTable;
jQuery(document).ready(function() {
jQuery('#InvoiceDetail').submit( function() {
var sData = jQuery('input', oTable.fnGetNodes()).serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
return false;
});

oTable = jQuery('#example').dataTable( {
"bJQueryUI": true,
"aaSorting": [[0,'desc']],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
{ "sType": 'date' },
{ "sType": 'currency' },
{ "sType": 'currency' },
null
]
});
});
[/code]

With this code, I've verified that all of the checked values are now submitting. So, that's good.

What I'm trying to do now is return those values on a separate page onsubmit to notify the user that they're about to pay "x" invoices. Unfortunately, I'm still only returning the last checked values that were in the DOM on the previous page.

Any ideas?

Thanks.

allan

So when you are doing the count to find out what 'x' should be, how are you doing that, is it again a live DOM query you are using, $('input:checked') for example? You could extend this to $('input:checked', oTable.fnGetNodes()), which should do the trick :-)

Allan

ck1guy

Hi Allan,

Sorry, I probably wasn't specific about what 'x' is. 'X' is actually the invoice number and $ value. In any event, it's still just a DOM query.

I tried using $('input:checked') instead of simply $('input'). Same problem. I'm still not getting all of my checkbox values to post properly - just those on the last page after clicking through the pagination.

allan

Are you doing it with oTable.fnGetNodes() though? That's the key thing here, as that will get all TR elements and allow the selector to work on that.

Allan

ck1guy

Hi Allan,

Yes, I'm using oTable.fnGetNodes(). Here is my current initialization code:

[code]var oTable;
jQuery(document).ready(function() {
jQuery('#InvoiceDetail').submit( function() {
var sData = jQuery('input:checked', oTable.fnGetNodes()).serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
return true;
});

oTable = jQuery('#example').dataTable( {

"bJQueryUI": true,
"aaSorting": [[0,'desc']],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
{ "sType": 'date' },
{ "sType": 'currency' },
{ "sType": 'currency' },
null
]
});
});[/code]

Thanks for your time.

allan

Where are you doing the bit which says "you about to pay "x" invoices"?

Allan

ck1guy

This is displayed on a separate html page.

allan

Based on what information? To confirm, that is the bit you are having a problem with at the moment?

Allan