JQuery Mobile "improves" dynamically generated html

Question

jQuery Mobile 1.2.0

I generate HTML using JavaScript ( $(selector).html(content) ), add it to the DOM and then show it ( $.mobile.changePage() ).

Then I call the AJAX call, get some data and re-generate the html (but the parent element, the same $(selector) , remains the same, I just change its html(...) ).
At the same time, poing HTML is not "strengthened" by jQM, and style is not imposed on it.

Now, according to the docs, I should just call the page() function on the parent element, i.e. $(selector).page() .

Other places in the documents involve creating the create event, i.e. $(selector).trigger("create") .

The problem is that the two above methods do not work - the jQM style is not applied.

Looking at the jQM code , I tried to fire the pagecreate event on this element, and it works , but it is not registered anywhere, so I am not sure about that., Especially regarding future releases of jQM.

For some positions in the documents I read, I can only call page() on the page.

Anyway, is there any short / standard way to tell jQM to “strengthen” the whole element and its children? Or will I just stay with pagecreate event?

Thanks!

Answer 1

To recreate the whole page, use this:

 $(selector).trigger("pagecreate"); 

This was my answer to a simple question: fooobar.com/questions/933497 / .... There's an example of a holiday page. Look, this should probably solve your problem.

Answer 2

What is the scope of $ (Selector) .trigger ("create");

You should be able to add any elements to the "pagecreate" event, which appears just before the "pageshow" jqm style for the elements. For example, I dynamically add a header / footer like this

 $(document).on('pagecreate', "[data-role=page]", function() { var header = "<div data-role='header'>some header stuff</div>"; var footer= "<div data-role='footer'>some footer stuff</div>"; $(this).prepend(header); $(this).append(footer); $("[data-role=header]").fixedtoolbar({tapToggle: false}); $("[data-role=footer]").fixedtoolbar({tapToggle: false}); }); 

Make sure you use jquery 1.7 or higher, I think when the on method was introduced;

It looks like you can generate a DOM and then modify the page, first try going to the page, and then dynamically edit the dom.

EDIT set the reload page parameter to true

  $.mobile.changePage($(page), {reloadPage: true}); 

Edit 2

 $(selector).children().each(function(){ $(this).trigger('create'); })