How to use '.change()' jQuery event with auto-complete fields in HTML Form Entry

Development
1

Hi guys !

I would like to trigger a function whenever user enters something in an auto-complete field of an HFE form. See the XML:

<obs id="201" conceptId="CIEL:1284" answerClasses="Diagnosis" style="autocomplete" />

Simply doing (like I usually do for other type of fields (checkboxes, drop-downs…))

$(".obs-field").change(function () {
      alert("it works!");
});

won’t work.

Q: How to use the .change() event with auto-complete fields ?

Additional notes: The structure of the auto-complete field after HFE substitution is such that it is not the value of the displayed auto-complete field that changes, but the value of an hidden input field instead (line 4)

<span id="201" class="obs-field">
    <input type="text" id="w8" name="w8" onfocus="setupAutocomplete(this, 'conceptSearch.form','null','Diagnosis');" class="autoCompleteText ui-autocomplete-input" onchange="setValWhenAutocompleteFieldBlanked(this)" onblur="onBlurAutocomplete(this)" autocomplete="off" style="color: rgb(0, 128, 0);">
    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible">119 results are available, use up and down arrow keys to navigate.</span>
    <input name="w8_hid" id="w8_hid" type="hidden" class="autoCompleteHidden" value="157898">
    <span class="error field-error" style="display: none" id="w7"></span>
</span>

I’ve tried to grab the change of the hidden field but apparently jQuery doesn’t support it:

When a field is hidden, you can not attach an event to it.

The solution proposed in stackoverflow’s link above works well if I only have one field to survey. Anyway, I don’t like the idea of constantly querying the field to detect changes.

Any ideas ?

2

One possibility would be to change code in the htmlformentry module to fire some sort of event (preferably the typical jquery one) when the field changes. Hopefully the autocomplete widget we’re using supports this…

3

OK thanks.

For some reason, the “.change()” event already works when user inputs an incorrect or an empty value. However, it doesn’t fire when a valid value is entered.

I’ve added the following line

textField.trigger("change");

to the configuration of the auto-complete widget: https://github.com/mekomsolutions/openmrs-module-htmlformentry/commit/2f498bf5697553ea2be5ec66297b3085252f3362

It now works fine.

Could it be subject to a pull request from us ?

4

Of course! Pull requests are welcome!

Go ahead and create a ticket in the JIRA project for HTML Form Entry and put the PR on that ticket.

@mogoodrich FYI

1 Like
5

Yep, sure, please do!

Mark

6

OK, done.

Thanks guys

1 Like