Jquery mobile - Input not getting theme

Question

So I am playing with Jquery mobile for kicks and am trying to dynamically create a form from a JSON string. This is working fine, but when I add the elements to the form, they are not themed! Now, from my understanding, this is because Jquery pulls in their styles on the page load. Here is a snippet of what I am doing.

$(form).append(formFields);

or

form.innerHTML = formFields;

Where formFields is the HTML string I generated before to be inserted into the form. Both of these successfully populate the form, but neither of them style the inputs.

In my HTML doc, I have the data-theme property of the page set to "b". From my understanding, this should apply the styles to all of the child components correct?

<div data-role="page" data-theme="b">

Now do I need to refresh the form or something after adding the UI components? I really have no idea what else I could do. Thanks in advance.

Answer 1

You need to trigger the create event ...

$(page_id).trigger('create')

That should (re)style all child div's along with some other jQuery mobile magic.

Answer 2

The JQM way of performing this particular action is to use the .page() method, not trigger the pages create method, which will be considerably slower.

When you insert the form call call page() on its component like this:

$(form).page();