Setting Text of Jquery Mobile Input Field

Question

I am having trouble setting the display text of a jQuery Mobile Text Input. The following is my code

$('#editPartyName').textinput();
$('#editPartyName').val(party.name);

The behavior is really weird, the first time the modal displays, the text input box is on a modal(jquery mobile simple dialog plugin), the text is in the input field on the modal just fine. However, the second time the modal is displayed the visual text in the input will be gone. When I check the value of the element though, alert($('#editPartyName).val()); The value is there and is correct. The text will just not display in the element. I am using JQM Beta 1. I have also tried to stick $('#editPartyName').textinput() after the val() declaration.

Anybody have any suggestions? Thank You!

Answer 1

I ran into this, too. I was able to set the value of a text input with $('#some_id').val('foobar'), and then print the value to the console with console.info($('#some_id').val());, but in the browser, the text input was empty.

After poking at it a while, I figured out that $('input[id=some_id]').val('foobar') worked as expected. So, apparently, there's some kind of weird bug with jQuery referencing an element by ID.

Answer 2

To create the jQuery Mobile text input styling you use .textinput() and to refresh the view of an existing jQuery Mobile text input you use .textinput("refresh"). So on subsequent calls you need to use the .textinput("refresh") method and on an un-initialized text input you need to use .textinput().

Something like:

$('#editPartyName').val(party.name).textinput('refresh');

My experience is with select inputs but I believe it's the same for text inputs, here is what I do for selects to update the view:

$("select#foo").selectmenu("refresh");

This example is from the docs: http://jquerymobile.com/demos/1.0b1/docs/forms/forms-selects.html (bottom of the page)

Update

You shouldn't need to do anything other than change the value of the input element:

$('#editPartyName').val(party.name)

Here is a demo using jQuery Mobile 1.1.0: http://jsfiddle.net/VbAKL/

And here is a demo using jQuery Mobile 1.0B1: http://jsfiddle.net/VbAKL/1/

There is a good chance that this issue is created because you are selecting by ID and there may be multiple instances of an ID in the DOM at once. jQuery Mobile sites can have multiple "pseudo-pages" in the DOM at one time, and if you have an element in each page with the ID of #header then when you try to run a selection for #header only the first instance will be returned. So your $('...').val(...) function call may be working, just not on the right element.

Short-answer: make sure your IDs are unique across all the pages in your site when using jQuery Mobile.