I’m having issues with jQuery Mobile V1.1.0 in combination with jQuery Templates, although I think that the jQuery Templates integration won’t cause any other issues than when content is added dynamically otherwise.
Snippet of the page on jsfiddle: http://jsfiddle.net/4ztwS/10/
If on above link, you select a quantity, it populates a div via a jQuery Template. The first one is “Adults”, where I used plain HTML which I hope can be “built” via jQuery Mobile. For the second one “Children”, I have used some HTML as how it looks when a select box is generated by jQuery Mobile.
The issue with the first one is that it doesn’t look like it should. The second option looks like it should, but the select box doesn’t seem bound to the elements around it. So you can change the select, but it doesn’t display.
jQuery Mobile has a “refresh” option for listviews, but in this case I would like to rebuild only part of the screen (where you see “Cabana – Sleeps 2”).
How do I get this page to look like I want to?
p.s. the content has to be loaded via AJAX, so there is no way to pre-populate the data and then show/hide
Well, seems like I found the solution. All the articles I read wrote about
$('select').selectmenu('refresh', true);, but what I actually need is$('select').selectmenu();without parameters. Looks like this solution will work for any object.