AJAX event, prevents other page actions
- by cobaltduck
Here's a fairly average scenario, using JSF as an example, but this same concept I have observed in ASP.NET, Apache Wicket, and other frameworks with ajax capabilities.
<h:inputText id="text1" value="#{myBacker.myBean.myStringVar}" styleClass="goodCSS">
<f:ajax event="change" listener="#{myBacker.text1ChangeEventMethod}" update="someOtherField" />
</h:inputText>
<h:selectBooleanCheckbox id="check1" value="#{myBacker.myBean.myBoolVar}" />
Let's suppose that the 'text1ChangeEventListener' is essential to 'someOtherField' and perhaps toggles its disabled attribute, or changes its available options, based on the value of 'myStringVar.' The particulars aren't important, let's just accept that for
some reason we need an ajax call when the 'text1' value is changed.
So Jane User is working her way down the form. She arrives at the 'text1' field and types some value. The cursor focus is still in the text field, as she moves her mouse to the 'check1' box and clicks. It appears to her that nothing has happened. She clicks again, and this time the checkbox highlights and the icon indicating a selection appears in the box. Jane has to do several entries in the form today, and sees this happen every time, and it becomes very frustrating for her.
Likewise, Jeff Admin is also perusing this form, and begins to type in 'text1.' He then realizes he doesn't really want to enter this data, and so moves his mouse to the "cancel" button elsewhere on the page, and clicks. Nothing seems to happen. Jeff
clicks again, and after confirming he really does want to cancel, is returned to the home page. Jeff scratches his head.
The problem is simply that the first thing the system does after 'text1' looses focus is run the listener and perform the ajax operation. It may only take a fraction of a second, but still, you can click other buttons all you want, but until that ajax has finished, everything else is ignored.
I've spent the morning searching and reading, and it seems no one else has even noticed this. I could find not one article, blog, past question here or at SO, or anyting that addresses this obvious and glaring deficiency in ajax.
So first of all, am I truly alone in thinking this is a big problem? Second, does anyone have a solution?
