jQuery Mobile - Dynamically creating form elements

Question

I'm creating a web-database driven offline web-app targeted at iOS devices. I'm trying to use jQuery Mobile, but I have a problem in creating the various forms.

The form options are taken from a database query, so they are inserted into the page after it has loaded, so the "jQuery-Mobilification" doesn't happen. Taking a quick look through the source, there doesn't seem to be any obvious way to call into this at this stage (of course it's an alpha release, and I think this would be a reasonably common request, so I'm hopeful it will come). Is there some kind of workaround I can put in to do this? I'm particularly interested in radio buttons, check boxes and select lists.

user_173077 · Answer

UPDATE

Beta2 has a create event. I will update my faq when the beta2 gets released. See http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Updated faq: http://jquerymobiledictionary.pl/faq.html

As CaffeineFueled proposed - .page() is the way to make JQM work with any part of HTML

.page() can be called only once for an element. Call it on a wrapping element you add to the page. It should handle everything.

user_571989 · Answer

naugtur is right, you have to call .page() on any element that you add to the dom, then it works out nicely:

var el = $('')
el.page();
$('#something').append(el);

user_205808 · Answer

Here's a link to the docs for this feature that Tom talked about. Not sure exactly when they were added, but I'm using it and it works for me!

http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html

jQuery Mobile - Dynamically creating form elements

8 Answers