Problems with setValue() jQuery method in HTML Form Entry

Software Add-on Modules
1

Hi everyone,

I would like to set the value of an obs from my Javascript. That observation is of <obs … style=“autocomplete”> style.

To do so, I use the method provided by HtmlFormEntry module: setValue()

Here is the script at the top of my HTML form:

jQuery("#select-order").click(function() {
    	setValue('drug-dispensed.value', "PENICILLIN V");
});

and the obs html code:

<obs id="drug-dispensed" conceptId="1282" answerClasses="Drug" style="autocomplete"/>

Upon click on the “select-order” item, the value “PENICILLIN V” fills in the auto-complete obs correctly.

However, the obs is not saved when hitting the Save button.

The user needs to click in the field, edit the text (like type or remove a letter) and pick from the auto-complete list to really validate the obs value.

After that, the obs will be saved correctly when clicking on the Save button

Note that this behavior doesn’t seem to match with the documentation:

Note that if setValue() method is used with an Autocomplete widget, the display value will not be updated, as the setValue method only updates the hidden value of Autocomplete widget. However once the form is saved and submitted, it will save the values correctly.

2

Seems like a bug/improvement… feel free to enter a ticket in the Html Form Entry project if it doesn’t exist.

Per the behavior not matching the documentation, try setting the value to the actual submitted value–the concept ID, not the text value, ie:

jQuery("#select-order").click(function() {
    	setValue('drug-dispensed.value', 323);
});

… and see if this would do what you want. If it does, but you don’t want to reference a concept by ID (since this is generally bad practice since IDs vary from DB to DB) you can do something ugly but workable like this:

var conceptId = "<lookup expression="fn.getConcept('concept-uuid-or-mapping')"/>"  // hopefully I got the nested quotes right

jQuery("#select-order").click(function() {
    	setValue('drug-dispensed.value', conceptId);
});
1 Like
3

Thanks @mogoodrich I’ve tried to set it to its ID but it doesn’t work either.

I think the problem is not what is actually entered, it is more that the auto-complete field doesn’t seem to realize that it has been filled. Is there a change() method or something like this that I should call to “force” the field to update (similar as a user input) ?

I will enter a ticket.

1 Like
4

A post was split to a new topic: Sample drug order form for HTML Form Entry?

5

Could you please share your medicine order HTML Form? Also the screenshot to quickly understand the behaviour and look of form.

6

Hey @mksrom How did u go over this …

Am facing the same issue on the autocomplete trying to autofill a field of expiry date without need to click in it.

cc @dkayiwa

7

Hi @jonathan , this is a quite old topic.

Just to confirm, are you talking about OpenMRS 2.x-based implementation, using HTML Form Entry as the form engine?

8

Oh yes @mksrom

9

OK. Sorry, it’s been so long since I worked on this that I can’t recall. I think we did not solve the issue though.

Here is the example form that was using the setValue functionality with the autocomplete attribute. You can take a look. But again, I don’t think we did anything to solve this in the end.

2 Likes
10

Thanks @mksrom let me see if i can get an override

11

Hey @mksrom found a quick solution for this …

one of the issue that was causing it was disabling the field

expiryInput.prop(‘disabled’, true);

and used the following

expiryInput.datepicker(‘destroy’);

The above to hide the datepicker selection <popup

expiryInput.prop(‘readonly’, true);

:grinning:

1 Like