checkBoxGroup used to show/hide fields using onClick. Fast clicking multiple options fails

Question

I'm troubleshooting a fairly straightforward form with a checkbox with five choices, each of which corresponds to a group of fields that are either hidden or shown depending on whether the box is checked. Fairly simple.

The checkbox has code in the onClick event to set a viewScope variable and partial refresh a panel that encloses all the field groups. Each field group is inside a panel that renders if the viewScope variable is true.

However, if I quickly select three options, I'm finding that the clicks after the first one aren't always picked up and only the first panel shows. I'm assuming that this is because the onClick event only runs once and will not re-run if it is already running, right?

Can anybody suggest a more responsive way of doing this? Individual checkboxes? Client side JS instead?

Answer 1

There is a delay for partial refreshs. The delay is about 20s or until the last partial refresh is completed. The exact delay can be configured in xsp.properties-file with the parameter xsp.partial.update.timeout=[seconds]

The current delay can be queried in CSJS with XSP.submitLatency. You can reset this delay by calling XSP.allowSubmit() in the Client, which then allows "multiple" refreshs at the same time.

But before you are making these acrobatic actions you should think twice about the user interface: Is it a requirement that the refresh runs automatically after clicking on a checkbox? Why not provide a simple "refresh" button to allow your users to do this manually? Or you can add a loading overlay to inform the users that "something is happening now" - this overlay would prevent doing multiple clicks, and then it is not longer a problem if users are clicking too fast.

Answer 2

Absolutely agree with Sven. The nature of the server-side refresh / partial refresh bugged the heck out of me for a time as well.

If it has to be done this way, what I went for, ultimately, was to fire the updates from the check boxes (I was actually using a radio group) to a container field via CSJS, which was set with css display attribute to none. This field is what I bound back to a viewScope variable. The hidden container field updates with an onBlur CSJS event.

For the viewScope'd var to refresh for display use, it does require at least a partial refresh; for this I just use the assumption that people know that when they save a form, it will load the most recent calculated information.