Submitting forms with fields on hidden pages

nlaslett

Hi folks,

Hoping somebody can help here...

I've got a fairly long table that is part of a form. Each table row contains a checkbox. Normally, a form will return all checked elements on form submission. But with dataTables pagination, I only get the values for those checkboxes currently shown on the screen.

I assume this is because dataTables is destroying hidden rows in the DOM and keeping the data in a JS array. Is there an easy way to return all form elements on form submit or show all rows immediately prior to form submission?

I know that I could use AJAX to send updates to the server whenever a checkbox is clicked, but I would prefer to let users review all their selections before sending anything to the server. And buffering AJAX queries to a temp table prior to final "submission" seems like a major headache for such a small project.

Thanks,
Neil

allan

Hi Neil,

DataTables does destroy the hidden rows, however it moves them outside of the form element (indeed outside fo the DOM altogether and into a JS array as you suggest).

There are two ways to over come this:

1. If you are using XHR then you might find the example shown here quite attractive: http://datatables.net/1.5-beta/examples/api/form.html . It just grabs all of the form data from the table and posts it to the server.

2. If you are doing a "true" submit, then you can make use of the fnGetHiddenNodes() ( http://datatables.net/plug-ins#api_fnGetHiddenNodes ) plug-in API function. With this function you can get all hidden rows and create hidden input elements in the form which will contain the information you want to submit.

Hope this helps!
Allan

nlaslett

Thanks...that helps a lot. :-)

met00

Old thread I know, but has anyone actually done this?

allan

Hi met00,

This is in use by several people at the moment, so it's certainly possible :-). I don't have any direct code example to give you other than the two links above through ( the API function needs an updated link: http://datatables.net/plug-ins/api#fnGetHiddenNodes ), but there are reasonably complete as examples themselves, and should hopefully get you started.

Regards,
Allan

met00

Thanks for the pointer. My hope was to NOT re-invent the wheel. I had assumed that someone had developed this by now (it seemed a simple extension). As a suggestion, you may want to open up a contributions section where, once someone has resolved the issue, they can post code solutions so that we can develop as an open source community (see oscommerce's or oscmax's model for contributions).

just a thought (as an osc contributor).

allan

Hi met00,

When someone posts a useful API plug-in, or any other kind of DataTables plug-in, I tend to post it in the plug-ins section of this site ( http://datatables.net/plug-ins/api - most of these are contributed functions for example). It's just that no one has contributed a plug-in for specifically this kind of thing, although several have solved the problem themselves. Perhaps you would be willing to share your solution when you've got it going?

Regards,
Allan

gk

Well, here's my solution.
[code]
$(document).ready(function() {
oTable = $('#example').dataTable();

$('form').submit(function(){
$(oTable.fnGetHiddenNodes()).find('input:checked').appendTo(this);
});

});
[/code]
It's not a plugin or anything, but it's small enough that it doesn't need to be.

edit: I just read about serialize(). I'm not sure what the difference is between that and what I have here. Does serialize() return all the form elements? And if it does wouldn't that submit what's on the current page twice?
gk

PaoloValladolid

gk, how did you install the fnGetHiddenNodes plugin? I get errors when I follow the instructions.

allan

@PaoloValladolid: Please see your other thread: http://datatables.net/forums/comments.php?DiscussionID=2789

Allan

gk

By the way, the solution I posted does not work in IE6. It has been discussed elsewhere on the forum, but in short IE6 unchecks your checkboxes when they are removed from the DOM. So when you do find('input:checked") it returns nothing. The painful workaround I used (which was suggested in another thread) is to build a separate JS array (when using IE6) that keeps track of which items in the list are checked. This also means you have to recheck them when you paginate back to a page with checked boxes. Let me know if you want more details on how I got around this problem.

gk

CraigAgnew

Here is _a_ solution guys that I have implemented recently to solve the problem of IE6 unchecking your checkboxes when they are removed from the DOM on redraw of the table. Perhaps there may be a more elegant way but thought I would share this anyway.

Note: We use .NET so the checkboxes all have unique IDs.

[code]
var ie6 = $.browser.msie && $.browser.version < 7;

$(document).ready(function() {

// if this is ie6
if (ie6) {

// create an array to hold the IDs of the checked boxes in the table
var checkedItems = new Array();

// hydrate the array from what's already checked
// this is needed as we might uncheck items that are checked to begin with
$('input[type="checkbox"]', '#mytable').each(function() {
if ($(this).is(':checked')) {
checkedItems.push($(this).attr('id'));
}
});

// function that can remove items from the array
checkedItemsRemove = function(item) {
var i = 0;
while (i < checkedItems.length) {
if (checkedItems[i] == item) {
checkedItems.splice(i, 1);
} else {
i++;
}
}
}

// function to check if an item is in the array
checkedItemsContains = function(item) {
for (var i = 0; i < checkedItems.length; i++) {
if (checkedItems[i] == item)
return true;
}
return false;
}

// function to set the checked attribute of those which should be on the current table display
persistChecked = function() {
$('input[type="checkbox"]', '#mytable').each(function() {
if (checkedItemsContains($(this).attr('id'))) {
$(this).attr('checked', 'checked');
} else {
$(this).removeAttr('checked');
}
});
}

// handler to keep the array in sync whenever a checkbox is clicked
$('input[type="checkbox"]', '#mytable').click(function() {
if ($(this).is(':checked')) {
checkedItems.push($(this).attr('id'));
} else {
checkedItemsRemove($(this).attr('id'));
}
});

}

// Set up the data table.
atable = $('#mytable').dataTable({
"fnDrawCallback": function() {
if (ie6) persistChecked(); // function only applies in ie6
}
});

});
[/code]

ganapathy_paulraj

Hi,

Can someone help me with the following,

i dont know whats the exact mistake that i did here

thanks in advance

[code]


public static native void reLoadDataTable(String id ,String urlString) /*-{

var oTable;
var checkedItems = new Array();


// hydrate the array from what's already checked
// this is needed as we might uncheck items that are checked to begin with
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").each(function() {
if ($wnd.jQuery(this).is(':checked')) {
checkedItems.push($wnd.jQuery(this).attr('id'));
}
});

// function that can remove items from the array
checkedItemsRemove = function(item) {
var i = 0;
while (i < checkedItems.length) {
if (checkedItems[i] == item) {
checkedItems.splice(i, 1);
} else {
i++;
}
}
}

// function to check if an item is in the array
checkedItemsContains = function(item) {
for (var i = 0; i < checkedItems.length; i++) {
if (checkedItems[i] == item)
return true;
}
return false;
}

// function to set the checked attribute of those which should be on the current table display
persistChecked = function() {
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").each(function() {
if (checkedItemsContains($wnd.jQuery(this).attr('id'))) {
$wnd.jQuery(this).attr('checked', 'checked');
} else {
$wnd.jQuery(this).removeAttr('checked');
}
});
}

// handler to keep the array in sync whenever a checkbox is clicked
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").click(function() {
if ($wnd.jQuery(this).is(':checked')) {
checkedItems.push($wnd.jQuery(this).attr('id'));
} else {
checkedItemsRemove($wnd.jQuery(this).attr('id'));
}
});

oTable = $wnd.jQuery("#" + id).dataTable({
"bServerSide": true,
"sAjaxSource": urlString,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bStateSave": true,
"sScrollY": "200px",
"bRetrieve":true,
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return ' ';
},
"aTargets": [ 0 ]
}
],
"aoColumns": [
{ "mDataProp": "Select" },
{ "mDataProp": "userName" },
{ "mDataProp": "loginTime" }
],
"fnDrawCallback": function() {
persistChecked();
}
});

$wnd.jQuery("#submitAdminForm").click( function() {
var sData = $wnd.jQuery('input:checked', oTable.fnGetNodes().each);
persistChecked();
alert( "The following data would have been submitted to the server: \n\n"+sData +checkedItems +$wnd.jQuery(oTable.fnGetNodes()).find('input:checked'));
return false;
} );



}-*/;


[/code]

ganapathy_paulraj

hi,

where can i download the source code of these two,

DataTables with form elements example,

http://www.datatables.net/examples/api/form.html

DataTables live DOM sorting example,

http://www.datatables.net/examples/plug-ins/dom_sort.html

kpihus

Hi,

This plugin works great and solved my pagination-submit issue.
Only problem is that right after clicking submit, all those previously hidden fields are displayed below my dataTable. It's not blocker, but quite ugly.

How to avoid this ?

--
Kristjan

artform

Maybe place them within a div that has a style as "display:none;"