16

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.

Jon
  • 16,212
  • 8
  • 50
  • 62

8 Answers8

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.

naugtur
  • 16,827
  • 5
  • 70
  • 113
  • I'm having a similar issue: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – Phill Pafford Mar 09 '11 at 19:14
  • This did the trick, thank you! The instructions on http://jquerymobiledictionary.dyndns.org/faq.html are the easiest to follow. – Matthew May 13 '11 at 13:45
  • 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. – Martin Jul 05 '11 at 19:00
  • 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! – naugtur Jul 11 '11 at 06:38
  • 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.... – Sergio Jul 21 '11 at 14:09
  • I will update the faq. I just have to find the time to get into it. You can help me by describing how exactly does it not work. – naugtur Jul 21 '11 at 19:07
  • @Sergio I tested my method on beta1 and it works. You must have done something incorrectly, or `.page()` can't handle your use case. There is a new way to do it introduced in beta2 which is to come soon. I will update mu faq then, so feel free to return when beta2 ships. – naugtur Jul 25 '11 at 07:58
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

AlexeyMK
  • 6,245
  • 9
  • 36
  • 41
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.

Josh Rickard
  • 1,593
  • 2
  • 16
  • 29
  • I wish it was that easy, unfortunately that didn't help at all :( – Jon Oct 29 '10 at 00:54
  • I'm having a similar issue: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – Phill Pafford Mar 09 '11 at 19:12
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...

Tom
  • 42,844
  • 35
  • 95
  • 101
  • thanks, needed a bit of extra work with select lists, but that got me over the line :) – Jon Nov 01 '10 at 01:14
  • I'm having a similar issue: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – Phill Pafford Mar 09 '11 at 19:08
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.

Ryan Doom
  • 2,407
  • 1
  • 16
  • 13
  • 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) – naugtur Dec 13 '10 at 12:10
  • I'm having a similar issue: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – Phill Pafford Mar 09 '11 at 19:09
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);
Philip Frank
  • 225
  • 3
  • 5
  • 1
    I'm having a similar issue: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – Phill Pafford Mar 09 '11 at 19:32
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.

CBG
  • 11
  • 1
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

Spike
  • 5,040
  • 5
  • 32
  • 47
  • I'm having a similar issue: http://stackoverflow.com/questions/5249250/jqm-jquerymobile-dynamically-added-elements-not-displaying-correctly-and-css-is – Phill Pafford Mar 09 '11 at 19:36