6

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!

Improve this question
1
  • i had a 'post styling' issue when programmatically setting the value via .val("") and found calling .focus().blur() resolved it. Commented May 10, 2017 at 6:35

2 Answers 2

Reset to default
12

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

If you're referencing by an ID, make sure it's unique for your whole site because jQuery Mobile pseudo-pages are stored in the same DOM. So if you are trying to select #header on one page it may be selecting #header on another page instead (with IDs, the first one found is returned and the rest are ignored).
In my case, there are no duplicate IDs.
3

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.

Improve this answer

6 Comments

Thanks for the post Jasper, I tried your suggestions but it doesn't work...I don't know if you are familiar with the simple dialog plugin but I am creating raw HTML (which is where I declare my input field) and placing it into the modal screen. The input field is displayed correctly but I have the error I mentioned above. When I place the code you gave me on that same listener (the click that declares html for the modal and fires it) it actually kills all execution after $('#editPartyName').textinput('refresh'); I am not sure what is occurring...
The jQuery Mobile documentation makes no mention of a .textinput() method. I tried it anyway, and got "no such method 'refresh' for textinput widget instance"
@MaffooClock jquerymobile.com/demos/1.1.0/docs/forms/textinputs/methods.html. Try that link, it describes the .textinput() method. The link in my original answer is for the first Beta release of jQuery Mobile 1.0.
@Jasper Ah, there it is. Thanks for sharing that clarification. However, there's still no 'refresh' method for text inputs.
@MaffooClock Yeah I went ahead and created a demo to check if my original answer could hold water, and it couldn't. The solution you posted as an answer suggests that you have multiple Ids in the DOM at once that are the same, so selecting by #id will only return the first element whereas input[id="id"] will select all elements with the matching attribute.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.