1

Here's one for a jQuery/js pro:

I haven't finished this project yet, simply because of an inconsistent behavior in part of my code…. Immediately after I wrote that, I heard one of you say, "There's no inconsistent behavior in code, only unwanted behavior."

Notes about the setup:

  • Editing records in a web app
  • Using .change() to initiate my scripts.
  • The initial values in the fields are compared through js against changes made.
  • The comparison checks if the new value is, 1) the same as the original, 2) an existing value from a list, 3) a new value not contained in the list.
  • using jQuery FlexBox to create a google suggest-like behavior on an input field (possible matches are shown in a box as you type, but aren't forced on you).

Desired behavior:

  • The user adds a new value, either by, 1) typing the complete value and leaving the field, 2) typing part of the value and then hitting tab to choose the suggested value, or 3) typing part of the value and then clicking the suggested value from the box.
  • The logic runs after one of these events.

Problem:

  • If a user clicks on a suggested value from the box (number 3 above), the logic runs before that value is added to the input. This is because the browser detected that they left the input field, thus triggering .change(). This results in the code comparing empty strings or partially spelled words with the list of existing values. The logic then determines that their choice is always a completely new value.

How can I overcome this problem?

Adam Cook
  • 622
  • 2
  • 6
  • 21
  • 1
    Simplest one should be to just use a timeout in change handler – A. Wolff Jan 21 '13 at 18:52
  • Thanks. That's what I've been trying, but it wasn't fixing the problem. I went back and fiddled with it again and finally realized I was setting a very timely variable outside of the setTimeout. I can spend hours trying to solve a problem like this, and it ends up being so simple! – Adam Cook Jan 21 '13 at 20:29

0 Answers0