DOM envy. (I am using hidden inputs to store data, but there is so much data the page is slow)

Question

I am passing 3 HashMaps that contain data pertaining to 13 different time periods, to a jsp page.

The data from these maps is used to populate and alter a summary data div (that consists of the summed total of the different datasets, for the selected ranges, so it could 1 of 13, 2 of 13, all 13 and so on. However the 3 datasets are large. In total there are 910 = (13*7)+(13*7)+(13*8*7) individual values.

Following me so far ?

The selected data is used by javascript/jquery when a check bx is selected - so there are 13 checkbox and when checked the data is included in total, when unchecked the data is subtracted. The selected subset of data is used to plot a graph with flot. I am not using an HTML form.

Currently I am using hidden inputs behind a visible checkbox - this has slowed everything right down, because the DOM is so large ? What are better options that will increase the responsiveness (specifically a jquery dialog that contains all the data).

My ideas so far : Passing the data in as a json string ?
Using input tag attributes rather than 910 individual inputs ?

Thanks! (any solution must be compatible with ie6 and ie8)

Answer 1

I would use .data() to attach the relevent values for a given checkbox to it. This is like storing it in attributes expect for you're not creating expando property issues. As far as storing the full data sets id stick with jsut the hashes as a global variable, or you could attach them to the form element the checkboxes belong to with .data() as well (assuming the are actually in a form).

So for example we might see something like:

$('#dataForm').data(
  'hashOne', 
   hashOne
).data(
  'hashTwo', 
  hashTwo
).data(
  'hashThree', 
  hashThree
);

$('#dataForm #checkboxOne').change(function(){
  var form = $(this).parents('form');
  if($(this).is(':checked'){
     $(this).data('currentValue', form.data('hashOne').someValueKey);
  }
});