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.)

  • If I understood correctly, the question you should be asking is "Why user needs to tab out of input field for OK button to work?" Users never-ever need to accommodate themselves on how your system works, your system always needs to accommodate to how user thinks the system is working. – locationunknown Jul 24 '19 at 5:27
  • 1
    From a UX perspective, edit field + click "OK" should definitely be accommodated. It's too "natural a process" to not handle. From a techie POV, my first thought was to suggest modifying the "block" so that it didn't "cover" the "OK" button... then I saw "it will prevent user activity with the page (or part of the page)" on the plugin's website which suggests they may already have thought of it. – TripeHound Jul 24 '19 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.