Question

In my footer, I wrote this function…

    jQuery('#page').live('pageinit', function() {
$('.widget ul').attr('data-inset', 'true');
$('.widget ul').attr('data-theme', 'd');
$('.widget ul').attr('data-dividertheme', 'b');
$('.widget ul').attr('data-role', 'listview');
$('.widget ul').listview();
$('a.post-edit-link').attr('data-inline', 'true');
$('a.post-edit-link').attr('data-role', 'button');
$('a.post-edit-link').button();
$('#commentform').attr('data-theme', 'e'); ...

So, how to apply data-theme on the last line ? What is the method, as ‘listview’ or ‘button’?

I also wonder how to apply ‘widget ul’ to the first attribute…

$(‘.widget ul:first’)

is not working.

Thanks for your help!

Sincerely,

V.

Answer 1

.widget ul:first will select the first ul element that is a descendant of a .widget element. If you want to select the first list-item in ul then you need: .widget ul li:first.

Forms themselves do not get initialized by jQuery Mobile, so instead of targeting the form, you need to target the specific input widgets and initialize them.

To initialize a bunch of elements you can select them all and call .trigger('create') on them:

$('#commentform').find('input, textarea').trigger('create');

This gets slightly trickier when you want to update widgets rather than initialize them:

$('#commentform').find('input[data-type="slider"]').slider('refresh').end()
                 .find('input[type="text]').textinput('refresh').end()
                 .find('input[type="checkbox"], input[type="radio"]').checkboxradio('refresh');

Also you can optimize your code by chaining function calls rather than re-selecting the same element(s) multiple times:

$('.widget ul').attr('data-inset', 'true')
               .attr('data-theme', 'd')
               .attr('data-dividertheme', 'b')
               .attr('data-role', 'listview')
               .listview();

$('a.post-edit-link').attr('data-inline', 'true')
                     .attr('data-role', 'button')
                     .button();

Or you can pass an object to .attr() to set all of the attributes in one function call:

$('.widget ul').attr({
                   'data-inset'        : true,
                   'data-theme'        : 'd',
                   'data-dividertheme' : 'b',
                   'data-role'         : 'listview'
               }).listview();

$('a.post-edit-link').attr({
                         'data-inline' : true,
                         'data-role'   : 'button'
                     }).button();