English 中文(简体)
jQuery Mobile - Dynamically creating form elements
原标题:

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.

最佳回答

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...

问题回答

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.

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

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.

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.

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

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.

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





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签