I'm using jquery mobile for my site and its working great, but I have one page that has a series of <select> menus that update via ajax. As soon as that div updates, all the mobile styles go away and I'm left with regular select pulldowns. How do I apply the mobile css to these? I was trying something like this, but without success(it gives me an error):
Unfortunately its an entire div that gets swapped out with a few select menus on it, so doing that wouldn't really work in my case. I need to reapply the style to the entire div(sorry if that wasn't clear).
You could try running $( "select" ).selectmenu( "refresh", true ); to address all the select elements on your page... or if there are other things that need styled as well you can just try calling the page widget on the whole content div.
So the Ajax return are the options for the select and you're just adding the options html. Sorry doesn't work for me as I'm cloning the select element with all the exact same options. I can get the html to display but can't figure out how to initialize it with JQM to the look and feel as well as the functionality for mobile (touch) works.
And, I was wrong anyway. .val() doesn't set the value and .html() sets it, but it doesn't apply the style. Strangely, .append does apply the style, but since it appends, i end up with twice as many pulldowns as before. Anyone have any other ideas?
The problem, from what I can tell, is that jQuery Mobile rewrites the HTML upon page load. If you have any sort of dynamic content, you either have to:
a) break abstraction and insert the dynamic content with the rewritten structure that you'd expect jQuery Mobile to do, or
b) run some command notifying jQuery Mobile to go through and update the non-rewritten code
.page() seems to be the function for this, but as seen in the other thread post, it isn't working in all cases. Ideally, I think that the developer shouldn't have to worry about the jQuery rewrite mechanism, and it should be entirely abstracted. I'd like to be able to pretend that the HTML on the current active page is the same as the HTML I wrote. jQuery Mobile would be entirely responsible for rewriting, whenever necessary. If that isn't possible, .page() is the next best bet, assuming it functioned this way (it seems not to in all cases).
Thanks for the insight, it looks like(as you said) .page() only kind of works...it keeps the style once, but the next update loses it. I'm surprised no one has found a way to fix this yet. Do you know if this is in the works or anything?
Man, thats going to add a ton of work for me. Like i said, updating the whole div would be ideal, the ajax that is returned causes the number of pulldowns to change, and they all have headings that need updated too, so just doing the options inside probably isn't going to cut it. I'll start messing around with that though, just to see
I managed to make a little progress on the issue just by recreating everything mobileinit does....the style stays now, but now the pulldown is unusable, and theres a weird extra pulldown...check it...let me know if anyone has any ideas on this one:
bobbobbins- You seem to be on the right track. It appears as though you need to recreate all of the HTML code for the element that you'll be running .page() on, not just updating parts of it.
My guess is that .page() gets confused when it sees some content with the special markup that it normally adds itself.
Sorry, I actually posted the wrong one. This is the one I was using, page() was causing 2 pulldowns to appear instead of one...but you can see what I was talking about here...it updates with the correct style(because I recreated all the html), but when you click the pulldown, it doesn't function.