Response title
This is preview!
Move this topic
Mobile CSS gets lost after using ajax to update content
in jQuery Mobile
•
2 years ago
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):
$("select").live("change", function(){ $("#options").load("/products/mobile-product-options.php", $("#product_form").serialize()); $("#options").live( "mobileinit" ); });
Any help is greatly appreciated, this is the last piece i need to fix before I can push my app live!
$("select").live("change", function(){ $("#options").load("/products/mobile-product-options.php", $("#product_form").serialize()); $("#options").live( "mobileinit" ); });
Any help is greatly appreciated, this is the last piece i need to fix before I can push my app live!
5
Replies(30)
You will need to call the selectmenu widget "refresh" method off of your <select> element
I put together an example for you... http://jsfiddle.net/elijahmanor/SMm2M/
Assuming your have something like this...
<div data-role="fieldcontain">
<label for="select-choice" class="select">Choose shipping method:</label>
<select name="select-choice" id="select-choice">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
<label for="select-choice" class="select">Choose shipping method:</label>
<select name="select-choice" id="select-choice">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
Then you can have some JavaScript like the following...
var listItems = [{ value: "standard", text: "Standard: 7 day" },
{ value: "rush", text: "Rush: 3 days" },
{ value: "express", text: "Express: next day" },
{ value: "overnight", text: "Overnight" }], options = "";
$.each( listItems, function(index, item) {
options += "<option value='" + item.value + "'>" + item.text + "</option>";
});
{ value: "rush", text: "Rush: 3 days" },
{ value: "express", text: "Express: next day" },
{ value: "overnight", text: "Overnight" }], options = "";
$.each( listItems, function(index, item) {
options += "<option value='" + item.value + "'>" + item.text + "</option>";
});
//Empty out existing options, append new options, refresh widget
$( "#select-choice" ).empty().append( options ).selectmenu( "refresh", true );
$( "#select-choice" ).empty().append( options ).selectmenu( "refresh", true );
Leave a comment on elijahmanor's reply
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).
Leave a comment on bobbobbins's reply
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.
<div id="myPage" data-role="page" id="hackerNews">
<div data-role="header">
<h1>Dynamic Select Example</h1>
</div>
<div id="content" data-role="content">
</div>
</div>
<div data-role="header">
<h1>Dynamic Select Example</h1>
</div>
<div id="content" data-role="content">
</div>
</div>
So, if you pulled all your content from another source you could do something like the following...
var html = '<div data-role="fieldcontain"><label for="select-choice" class="select">Choose shipping method:</label><select name="select-choice" id="select-choice"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option></select></div>';
$( "#content" ).append( html ).page();
$( "#content" ).append( html ).page();
I'm having the same issue and I tried your fix but didn't work.
Leave a comment on elijahmanor's reply
Thanks elijah, I actually did get it to work with a similar method to what you described....i used:
var html = $.ajax({ url: "/products/mobile-product-options.php", async: false, data: $("#product_form").serialize() }).responseText;
$( "#options" ).val(html);
philip, hope this helps.
var html = $.ajax({ url: "/products/mobile-product-options.php", async: false, data: $("#product_form").serialize() }).responseText;
$( "#options" ).val(html);
philip, hope this helps.
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.
Any other thoughts?
Leave a comment on bobbobbins's reply
I'm replacing a whole div that has selects on it...not individual options.
Leave a comment on bobbobbins's reply
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?
Can you make a jsFiddle recreating your issue? For simplicity maybe just use static HTML in a string to respresent the response from the ajax call... or use $.mockjax to mock the response.
Leave a comment on bobbobbins's reply
Here you go, I used jsbin: http://jsbin.com/ozako4/2/edit
Here is mine: http://jsfiddle.net/UcrD8/4/
Sorry my company blocks jsbin, could you paste into jsfiddle.net?
Sorry my company blocks jsbin, could you paste into jsfiddle.net?
Leave a comment on bobbobbins's reply
http://jsfiddle.net/3dgRc/
Here you go, you can see in both yours and mine, the styles are lost on the new pulldown.
Here you go, you can see in both yours and mine, the styles are lost on the new pulldown.
Is this what you're looking for? http://jsfiddle.net/3dgRc/16/
Leave a comment on bobbobbins's reply
Not really, I need the whole div to be restylized...the div that I replace sometimes generates entirely new select menus so just replacing the options won't work for me. My head hurts.
LOL Mine does two, this is driving me crazy!!!
Leave a comment on bobbobbins's reply
This thread is also related to the following thread:
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).
Leave a comment on uwruwr's reply
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?
Leave a comment on bobbobbins's reply
Part of the problem is trying to swap out the select while still changing the select.
A way to get around the issue is to only append the options instead of appending the whole select element.
$("select").live("change", function(){
var html = '<select name="testselect" id="testselect"><option value="3">3</option><option value="4">4</option></select>';
var html = '<select name="testselect" id="testselect"><option value="3">3</option><option value="4">4</option></select>';
$( "#options" )
.find( "select" ).empty()
.append( $(html).find("option") )
.selectmenu( "refresh", true );
});
});
Leave a comment on elijahmanor's reply
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
Leave a comment on bobbobbins's reply
I did find a solution for my problem that might help someone, here is the example: http://jsfiddle.net/UcrD8/45/
One small note: you need jQuery 1.5.1 as this doesn't work with jQuery 1.5
Leave a comment on phillpafford's reply
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:
http://jsfiddle.net/3dgRc/54/
http://jsfiddle.net/3dgRc/54/
Leave a comment on bobbobbins's reply
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.
In my case (trying to add dynamic content to a list), it seems the easiest thing to do is to create the list markup in javascript and then add it to the body, instead of replacing an initial structure that is already there.
Example:
It really, really seems as though the framework should be expanded to allow .page() to fix up the HTML without all of these limitations (and hackish modifications).
Leave a comment on uwruwr's reply
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.
http://jsfiddle.net/3dgRc/58/
http://jsfiddle.net/3dgRc/58/
bobbobbins,
So you can do something like this for your needs...
Hope that addresses what you need for your solution.
Leave a comment on bobbobbins's reply
Leave a comment on ade_cd's reply
Thanks elijahmanor and ade_cd, .page("destroy") saved my day.
Leave a comment on xukai04's reply
abe_cd you saved my day ...
10x for "$( "div[data-role=page]" ).page( "destroy" ).page();" :)
10x for "$( "div[data-role=page]" ).page( "destroy" ).page();" :)
Leave a comment on destoyan's reply
I just solved a similar problem with a timeout:
setTimeout (
$.proxy( function( ){ $( "yourSelect" ).selectmenu( ).selectmenu( "refresh", true ); }, this ),
100 );
Leave a comment on logic8's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to bobbobbins's question
{"z1483382":[14737000002072176,14737000002072228,14737000002072236,14737000002072238,14737000002072244,14737000002070614,14737000002070622,14737000002073490],"z2949161":[14737000002068800,14737000002068881,14737000002072230,14737000002070656,14737000002073744],"z23458271":[14737000003728061],"z5766384":[14737000002104320],"z1253923":[14737000003421839],"z5673635":[14737000002066489,14737000002068821,14737000002071498,14737000002070554,14737000002070556,14737000002070562,14737000002072254,14737000002072270,14737000002072310,14737000002072322,14737000002072735,14737000002074278],"z5689719":[14737000002073192,14737000002074270],"z21327154":[14737000003559855]}
Statistics
- 30 Replies
- 13719 Views
- 5 Followers
