How can I maintain the checkbox state on a page that is refreshed by Ajax?

Question

I have a html table in my application that shows the state of various jobs running in the system. Each job has a state associated with it e.g a swirly gif for running jobs. New jobs have a checkbox next to them that allows the user to select and kick off the associated job.

The table is a struts2 auto refreshing div (sx:div), it refreshes every few seconds to reflect what is currently happening with the jobs.

The problem is that when the div refreshes I lose that state of the checkboxes.

Is there an elegant way of maintaining their state? I have the option of calling some javascript upon completion of the ajax refresh using the dojo topic system built into the tag but i'm not sure what is the best way to approach it.

Answer 1

I'm not very familiar with struts so take me advice for what it's worth.

There are two ways to approach this that I see.

The first (and probably simplest) is to add an event to the checkboxes which stores the checked state in an array or object onchange. Then, on callback from the ajax refresh, restore those states.

The second approach would require that the ajax refresh either be executed as a post so that the checkboxes are submitted to the server, or having a separate ajax action which fires off when a checkbox is checked. With either of these options, the ajax refresh could "know" at render which checkboxes to render as checked.

If you decide to go with number one, the javascript is not very difficult, especially if you happen to be using a good library (jquery, etc.).