Jquery-mobile css does not apply to html created using javascript

Question

I get data from a JSON file and then show it using the html structure following the jquerymobile structure with the data role, etc. Here is my code on how I get the data and display it:

$(document).on('pageinit', function(){ $.getJSON("http://danielvivancos.com/edu/wordpress/?json=get_posts&post_type=product", function(data){ var html = ""; $.each(data.posts, function(index, d){ html = html + "<li><a href='" + d.slug + "' data-transition='slidedown'><img src='" + d.thumbnail_images.thumbnail.url + "' /><h3 class='ui-li-heading'> Menu" + index + "</h3></a></li>"; }); html= "<ul data-role='listview' data-inset='true'>"+ html + "</ul>"; $(html).appendTo(".choice_list"); }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */ /* alert(jqXHR.responseText) */ alert("error occurred!"); }); }); 

The result in HTML is as follows:

 <li><a href="link1.HTML" data-transition="slidedown"> <img src="source1"><h3> Menu1</h3></a></li> <li><a href="link2.HTML" data-transition="slidedown"> <img src="source2"><h3> Menu2</h3></a></li> <li><a href="link3.HTML" data-transition="slidedown"> <img src="source3"><h3> Menu3</h3></a></li> 

But my problem is that although I display the content as jquerymobile says, the style that should be applied is not. I mean that all classes added by jquerymobile script are not added to my html generated using javascript. Does anyone know how I can fix this? How to save styles from jquerymobile? Thank you so much for the promotion!

ANSWER:

  $(html).appendTo(".choice_list").listview(); 

Answer 1

From jQuery mobile mobile docs:

When a user clicks a link on a jQuery Mobile-enabled site, the default behavior for the navigation system is to use this href link to formulate an Ajax request (instead of allowing the default browser, the link to the request that href when the page is fully loaded). When this Ajax request goes blank, the structure will receive all the text content, but it will only enter the content of the body response (or, more specifically, the data-role = "page" element, if provided), that is, nothing in the page head will be used ( except for the name of the page that is specially selected).

This means that any scripts and styles that reference the page title will have no effect when the page is loaded via Ajax, but they will execute if the page is requested normally through HTTP.

Link

Create vs. Update: An Important Difference

Note that there is an important difference between the create event and the update method that some widgets have. A create event is suitable for improving raw layouts containing one or more widgets. The update method should be used on existing (already improved) widgets that have been processed programmatically and need to be updated to match the user interface.

For example, if you have a page on which you dynamically added a new unordered list with the data-role = listview attribute after creating the page, initiating the creation of this list in the parent element will transform it into a list-style widget. If there were more list items then with programmatic addition, calling the view list update method, update only these new list items in the expanded state and leave the existing list items untouched.

You want .trigger("create") after downloading it.

Answer 2

You probably need to call refresh on your list:

  $('#myListview').listview('refresh'); 

ref: http://jquerymobile.com/demos/1.2.1/docs/lists/lists-methods.html

http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

Answer 3

 $(html).appendTo(".choice_list").listview();