Text Inputs Losing Values When Paging

rmm1613

Hello All,

We have an instance of datatables that has a text input as the last column of a part inventory system. This last column allows the user to input a count of a certain part they would like to order.

We then have a button above the datatable instance that acts as an "Add to Cart" button.

We are running into a problem when the user pages into the results and adds more items. The user will click the "Add to Cart" button and the values are lost for the rows that are no longer visible. However these inputs are still physically in the DOM, but just not visible.

Any help would be much appreciated!!

fbas

a few thoughts:

1) design idea: don't let the user change pages without adding the item to cart. having rows with a count on a different page that get added to the cart might confuse some users. you could force them to decide to add to cart or not before proceeding to the next page

2) if you want to keep the count, create an array or object with the count and an ID. you'll have to check the rows on every draw to see if those rows are on screen and put the value in the input box.

rmm1613

Hello fbas,

Thanks for your input. Those are great ideas.

I don't think that the validation will work from your first suggestion because this issue is happening even if someone filters the results from the search box as well.

The value shows in the input, but the value just is not recorded if it is not visible.

Do you or does anybody else have any suggestions on this issue?

Thanks!

fbas

keeping the count/id is not that hard: create an object oUserCount to keep counts of items the user has filled in numbers for. you can iterate over this object when you're sending data to server and send the id/number pairs as parameters.

[code]
oUserCount = new Object();

$('.count_input').live('change', function () {
var id = get_id(this); // write this function to get an identifying value from the row it's in
if ($.trim(this.value) == "") delete oUserCount[id];
else if (i = parseInt(this.value) > 0) oUserCount[id] = i;
});
[/code]