Why don't elements loaded with $ .ajax () have jQuery Mobile CSS?

Question

I made a website in jQuery Mobile. I uploaded the HTML content via jQuery $.ajax() function.

The downloaded code contains features such as buttons and extension sections.

However, none of the downloaded items show mobile features. JQuery Mobile CSS does not apply to them.

Is this because jQuery Mobile already uses Ajax to navigate pages? HTML content that did not load dynamically preserves jQuery Mobile styles.

Answer 1

You need to update jQM controls for new elements:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

New markup improvements
The page plugin dispatches the pagecreate event, which most widgets use to automatically initialize. As long as it refers to the script widget plugin, it will automatically improve any widget instances it finds on the page.

However, if you create a new markup on the client side or load content through Ajax and enter it into the page, you can trigger the create event to handle automatic initialization for all plugins contained in the new markup. This can work on any element (even on the div page), saving you the task of manually initializing each plugin (list button, select, etc.).

For example, if an HTML markup block (for example, a login form) was loaded via Ajax, it fires a create event to automatically convert all the widgets contained in it (inputs and buttons in this case) into advanced versions. Code for this script:

 $( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" ); 

Create vs. Update: An Important Difference
Note that there is an important difference between the create event and refresh method that some widgets have. The creation event is suitable for improving a raw one that contains one or more widgets. The update method should be used on existing (already enhanced) widgets that have been processed programmatically and it is necessary to update the user interface to match it.

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.

Answer 2

 $(document).ready(function () { $.ajax({ url : "rest/developers", success : function(data) { $('#anomaly-div').html("<a data-role='button' data-theme='b'>test-http</a>").trigger( "create" ); }, error : function(error) { console.log("error updating table -" + error.status); } }); }); 

Answer 3

.trigger( "create" )

worked for me