Customize input box text for jQuery mobile devices

Question

I'm having trouble adjusting the jQuery Mobile Text Input display text. Below is my code

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

The behavior is really strange, the first time modal displays, the text input field is on the modal (jQuery mobile simple dialog plugin), the text is on the modal input field is just fine. However, the second time the modal is displayed, the visual text at the input will be deleted. When I check the value of an element, though, alert ($ ('# editPartyName) .val ()); The value is and is true. Text will not be displayed in the element. I am using JQM Beta 1. I also tried binding $ ('# editPartyName'). Textinput () after the declaration of val ().

Anyone have any suggestions? Thanks!

Answer 1

I also came across this. I managed to set the value of the text input using $('#some_id').val('foobar') and then print the value in the console using console.info($('#some_id').val()); , but the text input in the browser was blank.

After I smoked, I realized that $('input[id=some_id]').val('foobar') worked as expected. So, apparently, there is some strange error with jQuery referring to an element by ID.

Answer 2

To create a jQuery Mobile text input style, you use .textinput() and to update the presentation of jQuery Mobile's existing text input, you use .textinput("refresh") . Therefore, for subsequent calls, you need to use the .textinput("refresh") method, and for non-initialized text input, you need to use .textinput() .

Sort of:

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

My experience with selectable inputs, but I believe that it is the same for text inputs, is what I do to select 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 page)

Update

You do not need to do anything except change the value of the input element:

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

Here is a demo version of 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 problem is created because you select by identifier, and there can be several identifier instances in the DOM at the same time. jQuery Mobile sites can have several pseudo-pages in the DOM at a time, and if you have an element on each page with the identifier #header , then when you try to make a selection for #header only the first instance will be returned. Thus, your function call $('...').val(...) may work, but not on the right element.

Short answer: make sure your identifiers are unique on all pages of your site when using jQuery Mobile.