Apply jquery (mobile) css classes programatically after rendering has occurred

Question

jquery mobile will automatically apply css and some html for elements on the page based on what data- attributes are on them when the page loads.

I am pulling in some html content via an ajax call but it is introduced to the page after the jquery mobile js rendering has occurred, and therefore does not get the many css classes.

Is it possible to just call out to the js and ask for the rendering to get applied to just my new html content?

BEFORE

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true">          
            <li>
                <a href="#">
                    <h3>
                        Some title
                    </h3>
                    <p>
                        Some text
                    </p>
                </a>
            </li>
    </ul>
</div>

AFTER

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">          
        <li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-corner-bottom ui-btn-up-b">
            <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom">
                <div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">
                        <h3 class="ui-li-heading">
                            Some title
                        </h3>
                        <p class="ui-li-desc">
                            Some text
                        </p>
                    </a>
                </div>
                <span class="ui-icon ui-icon-arrow-r"></span>
            </div>
        </li>
    </ul>
</div>

CRice · Answer 1 · 2011-04-12T02:01:51.060

2

After looking through jquery.mobile-1.0a4.1.js and reading this great article explaining widget usage the answer was simple:

There is an existing mobile.listview widget which applies the rendering to listviews.

$.widget( "mobile.listview", $.mobile.widget, {

});

Apply this to the html directly. It is important to target the ul.

$("div#someDiv ul").listview();

Here is the full example

function hijack(form) {
    $("div#someDiv").html("");
    $("div#someDiv").addClass('loading');

    $.ajax({
        url: form.action,
        type: form.method,
        dataType: "html",
        data: $(form).serialize(),
        success: function(data) {
            $("div#someDiv").removeClass('loading');
            $("div#someDiv").html(data);

            //apply rendering of jquery mobile styles via listview widget
            $("div#someDiv ul").listview();
        }
    });
}

edited Apr 12 '11 at 02:01

answered Apr 08 '11 at 02:33

CRice

12,279
7
57
84

I have a similar question and tried your method, No luck. care to look at it? http://stackoverflow.com/questions/5597036/jqm-jquerymobile-problem-with-ajax-content-listviewrefresh-not-working – Phill Pafford Apr 11 '11 at 17:08
2

For the googlers out there I had to use **.listview( "refresh" );** to make it work for me. I'm using **jquery mobile 1.2.0-rc.2**. – Thomas C. G. de Vilhena Sep 22 '12 at 14:25
Phill Pafford, It is not similar, When I add the button I don't add any list! However, I tried .html(data).find("ul").listview() but it doesn't work ! – Bashar Abu Shamaa Mar 26 '13 at 11:33

Phill Pafford · Accepted Answer · 2011-04-08T14:34:10.070

2

Chain the .page() to your AJAX call

Example:

var parm = '123';

function loadPage(page){    
    $.ajax({
        url: 'page.php?parm='+value,
        type: 'POST',
        error : function (){ document.title='error'; },
        success: function (data) {                  
            $('#placeholder').html(data).page();
        }
    });
    // Scrolls to the top of the page
    $.mobile.silentScroll(0);
}

HTML

<div name="placeholder" id="placeholder"><!-- This is the placeholder --></div>

edited Apr 08 '11 at 14:34

answered Apr 08 '11 at 12:42

Phill Pafford

83,471
91
263
383

Thanks, do you have an example of this? – CRice Apr 08 '11 at 13:55
Ah I see, you are calling the page() widget on the html, where I am using the listview() widget... – CRice Apr 09 '11 at 09:32
Thanks, .page() works well and will definately come in handy when working with html containing various controls and elements, but I think I will stick with .listview() in this case because it is more targeted to rendering my example. – CRice Apr 11 '11 at 01:49
Sergio is right, now you have to use **.listview( "refresh" );** – delkant Aug 22 '13 at 00:38

score 0 · Answer 3 · answered Apr 08 '11 at 02:35

0

The .live() (http://api.jquery.com/live/) event binder might be what you're looking for.

answered Apr 08 '11 at 02:35

Approximately Linear

676
6
7

Apply jquery (mobile) css classes programatically after rendering has occurred

3 Answers3

Linked