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.

naugtur · Accepted Answer · 2011-08-11 12:58:25Z

12

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.

edited Aug 11, 2011 at 12:58

answered Dec 13, 2010 at 12:08

naugtur

16.9k6 gold badges73 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Phill Pafford Over a year ago

I'm having a similar issue: stackoverflow.com/questions/5249250/…

Matthew Over a year ago

This did the trick, thank you! The instructions on jquerymobiledictionary.dyndns.org/faq.html are the easiest to follow.

Martin Over a year ago

Is there a way to do this if I have an ajax request that is called multiple times and loads different buttons each time? .page() seems to only work once.

naugtur Over a year ago

You can't call .page() more than once on an element, so as I put in the faq - you need to wrap a new div around your content. But in beta release there is an enhance event - check it out!

Sergio Over a year ago

this method no longer works on the latest version of jquery mobile. would be nice if they provided a documented method to style dynamic content....

|

AlexeyMK · Accepted Answer · 2011-06-16 01:29:05Z

3

The current selected answer is slightly out of date. Use 'refresh', not 'page', for styling dynamically added content (lists or forms).

If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example, $('ul').listview('refresh');

via the jQuery Mobile docs, 1.0.4a

edited Jun 16, 2011 at 1:29

answered Jun 16, 2011 at 1:20

AlexeyMK

6,4159 gold badges39 silver badges43 bronze badges

Comments

Tom · Accepted Answer · 2010-12-06 07:21:35Z

2

This is messing around in undocumented internals, but the following is working for me:

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

There are equivalent methods for buttons, checkboxes etc.

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

Update for 1.0Alpha2: As can be expected when playing around with the internals of a library, this no longer works in the latest version. Changing customTextInput() to textinput() fixes it a bit, but the theme isn't fully applied for some reason. We were warned...

edited Dec 6, 2010 at 7:21

answered Oct 29, 2010 at 5:32

Tom

44.9k35 gold badges101 silver badges103 bronze badges

2 Comments

Jon Over a year ago

thanks, needed a bit of extra work with select lists, but that got me over the line :)

Phill Pafford Over a year ago

I'm having a similar issue: stackoverflow.com/questions/5249250/…

Josh Rickard · Accepted Answer · 2010-10-28 10:58:10Z

2

After your AJAX call finishes and you insert the form elements try calling:

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

I believe the jquery-mobile team will be adding a .refresh() method on the various UI elements to solve this issue in the future.

answered Oct 28, 2010 at 10:58

Josh Rickard

1,6032 gold badges17 silver badges29 bronze badges

2 Comments

Jon Over a year ago

I wish it was that easy, unfortunately that didn't help at all :(

Phill Pafford Over a year ago

I'm having a similar issue: stackoverflow.com/questions/5249250/…

Ryan Doom · Accepted Answer · 2010-10-28 04:01:36Z

1

Yeah the issue is as you described. The 'mobilization' is fired when the document is ready. But since your offline DB queries are asynchronous it ends after the document.ready is fired. So the DOM is updated later in the process and doesn't have the extra CSS added to all the divs and list items.

I think you would have to change the source of the mobile js to not run on document ready but run when you tell it to run. Then you would have to call that function in your database callback.

Looks like that is the only option at the moment.

Traditionally I used jqtouch and now sencha. I haven't played much with jQuery mobile.

ALTERNATIVELY - you could write out your HTML after querying it out of the database with the necessary CSS styles on it. If you use Firebug plugin for Firefox you can see what styles / classes are getting applied when the mobilization runs. You could just write out your HTML using those conventions. Not ideal, but would work.

answered Oct 28, 2010 at 4:01

Ryan Doom

2,3911 gold badge16 silver badges13 bronze badges

2 Comments

naugtur Over a year ago

Just to stop someone from trying it - using early events to work with DOM before JQM comes in is painful. (it's before the ready event)

Phill Pafford Over a year ago

I'm having a similar issue: stackoverflow.com/questions/5249250/…

Philip Frank · Accepted Answer · 2011-01-11 22:42:08Z

1

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

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

answered Jan 11, 2011 at 22:42

Philip Frank

2253 silver badges5 bronze badges

1 Comment

Phill Pafford Over a year ago

I'm having a similar issue: stackoverflow.com/questions/5249250/…

CBG · Accepted Answer · 2012-01-05 09:05:20Z

1

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();

There are currently so called plugin functions for all kind of form elements (e.g. slider, textinput etc.) to create them.

answered Jan 5, 2012 at 9:05

CBG

111 bronze badge

Comments

Spike · Accepted Answer · 2011-02-06 21:03:24Z

0

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

answered Feb 6, 2011 at 21:03

Spike

5,1285 gold badges35 silver badges48 bronze badges

1 Comment

Phill Pafford Over a year ago

I'm having a similar issue: stackoverflow.com/questions/5249250/…

Collectives™ on Stack Overflow

jQuery Mobile - Dynamically creating form elements

8 Answers 8

7 Comments

Comments

2 Comments

2 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

Comments

2 Comments

2 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related