JQuery Mobile - Dynamically creating form elements

Question

I am building a web-based web application based on a web application targeting iOS devices. I am trying to use jQuery Mobile, but I have a problem creating various forms.

The form parameters are taken from the database query, so they are inserted into the page after it is loaded, so "jQuery-Mobilification" does not occur. Looking through the source, there is no obvious way to call this at this stage (of course, this is an alpha release, and I think it will be a fairly common request, so I hope it will come). Is there any workaround I can make for this? I'm especially interested in radio buttons, checkboxes, and pick lists.

Answer 1

This is a mess inside undocumented internal components, but the following works for me:

$("#some-div").load("/html/fragment/", function() { $(this).find("input").customTextInput(); }); 

There are equivalent methods for buttons, checkboxes, etc.

Take a look at the _enchanceControls [sic] method at http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js .

Update for 1.0Alpha2 . As you might expect when working with internal libraries, this no longer works in the latest version. Changing customTextInput() to textinput() fixes it a bit, but the theme for some reason is not fully applied. We were warned ...

Answer 2

UPDATE

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

Faq updated: http://jquerymobiledictionary.pl/faq.html

---

As CaffeineFueled suggested - .page() is a way to get JQM to work with any part of HTML

.page() can only be called once for an element. Call it on the wrapping element that you add to the page. He must handle everything.

Answer 3

The current selected answer is a bit outdated. Use "refresh" rather than "page" to style dynamically added content (lists or forms).

If you add items to the list, you need to call the refresh () method on which it updates the styles and creates nested lists that are added. For example, $('ul').listview('refresh');

via jQuery Mobile docs, 1.0.4a

Answer 4

After completing your AJAX call and inserting the form elements, try calling:

 $("#the-page-id").page(); 

I believe the jquery-mobile command will add a .refresh () method for various user interface elements to solve this problem in the future.

Answer 5

Yes, the problem is as you described. Mobilization starts when the document is ready. But since your offline database queries are asynchronous, they end after document.ready is started. Thus, the DOM is updated later in the process and does not add additional CSS for all sections and list items.

I think you will have to change the source of mobile js so that it does not work on the document, but it starts when you tell it to start. Then you have to call this function in the database callback.

This seems to be the only option at the moment.

Traditionally, I used jqtouch and now sencha. I have not played much with jQuery mobile.

ALTERNATIVELY - you can write your HTML after requesting it from a database with the necessary CSS styles. If you use the Firebug plugin for Firefox, you can see what styles / classes are applied when the mobilization works. You can simply write your HTML using these conventions. Not perfect, but will work.

Answer 6

naugtur is right, you need to call .page () on any element that you add to dom, then it works fine:

 var el = $('<input type="text"/>') el.page(); $('#something').append(el); 

Answer 7

This worked for me (jquerymobile1.7.0):

 $('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' + '<label for="name" class="ui-hidden-accessible">Name:</label>' + '<input type="text" name="name" size="25" id="name" placeholder="Name"/>' + '</div>'); $('#name').textinput(); 

Currently, there are so-called plug-in functions for all kinds of form elements (e.g., slider, text, etc.) to create them.

Answer 8

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

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