How do I use a block UI overlay without losing UI events?

Our application is a web app with a backend server.

enter image description here

Each page in the web app has this structure.

  1. Header
  2. Body
  3. Footer

enter image description here

The normal use case is

  1. User navigates to a page.
  2. User edits the fields in the body.
  3. User clicks on OK in the footer.

enter image description here

Referring to image above.

  1. User edits field and field looses focus (e.g. the user tabs out, or clicks into another field, or clicks a footer button)
  2. AJAX backend call, i.e. an onChange event is trigger which in turn calls the backend.
  3. Overlay blocks the UI.
  4. User clicks footer button (OK)
  5. Save AJAX backend call.

The AJAX backend calls when the fields loose focus

  1. always update the state on the backend
  2. sometimes return data which is updated on the UI / web page.

Everytime the backend is called we use an overlay (jquery.blockUI) to block the UI for the user.

Problem use case

  1. User navigates to a page.
  2. User edits a field.
  3. User immediately clicks on a footer button (user does not first tab out of the field before clicking the footer button).

The problem is that the backend call when the input field looses focus is called but the button click event is lost.

enter image description here

Referring to above image.

  1. User edits field
  2. User clicks on OK
  3. Only one AJAX call happens (the call for the field losing focus).
  4. User must click OK a second time.
  5. Save AJAX call happens.

After experimenting and asking on stack overflow, we noticed that the use of the overlay seems to „swallow“ the button click event. My understanding:

  1. the mousedown event goes on the footer button
  2. the field looses focus and the backend is called
  3. overlay comes up
  4. mouseup event on the overlap
  5. backend callback
  6. overlay removed
  7. no click event because mousedown and mouseup on different UI elements.


From a design point of view how do we fix this problem?

  1. I imagine that other websites have this flow (user edits a field -> AJAX backend call -> user edits more fields and more AJAX calls -> finally the user clicks OK). What is a good design pattern to deal with this situation?
  2. What is the ultimate cause of this problem? e.g. our backend has state (not a stateless REST API), is that what is ultimately causing this?
  3. Would it be a good design, to not gray out the footer button? (i.e. allow the user to always click the footer button and record those clicks and if another backend call is in progress put the footer button click on hold … seems like a hack).

(Disclaimer Follow up to this question I am not sure if I should ask here or on stackoverflow. As I am looking for bigger picture design advice, I will try here.)