Refresh on attribute change in Jquery-mobile?

Question

Stripped down code shows that I can change an attribute, in this case data-split-icon, but cannot get a refresh. Console.log show it has changed, so does the element view in chrome developer tools.

http://jsfiddle.net/mckennatim/MQ9rj/ 'Get' button simulates a programmatically created list. 'Change' button simulates changing an attribute.

Refresh, listview, trigger, create, pagecreate I try all combinations. Nothing works

<!DOCTYPE html>
<html>
<head>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>   
</head>
<body>
    <div id="thelists" data-role="page">

        <div data-role="header">
            <a href="#" data-icon="back"  id="get" data-role="button" >get</a>
                <h2>TestPage</h2>
            <a href="#" data-icon="home" id="change" data-role="button">change</a>
        </div><!-- /header -->       
        <div data-role="content">   
            <ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
        </div><!-- /content -->
    </div><!-- /page -->
<script>
    $('#get').click(function() {
        for (i=1; i<6; i++){
            $('#list').append('<li><a>list</a><a class="orig">items</a></li>');
        }
        $('#list').listview('refresh');
        return false; 
    }); 
    $('#change').click(function() {
        console.log($('ul').attr('data-split-icon'));
        $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
        console.log($('ul').attr('data-split-icon'));
        //$('#list').listview();
        //$('#list').listview('refresh');
        $('#thelists').trigger('create');
        $('#thelists').trigger('pagecreate');   
        $('#list').listview();
        $('#list').listview('refresh');
        return false; 
    });              
</script>    
</body>
</html>

Phill Pafford · Accepted Answer · 2012-02-14 17:09:32Z

3

Looks like jQM also adds some markup on the children span tags, try something like this

http://jsfiddle.net/phillpafford/MQ9rj/18/

JS

$('#change').click(function() {
    console.log($('ul').attr('data-split-icon'));
    $('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
    console.log($('ul').attr('data-split-icon'));
    $("[data-icon=gear]").each(function() {
        var $this = $(this);
        $this.attr('data-icon','info');
        $this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');                
    });
    $('#list').listview('refresh',true);
    return false; 
});

answered Feb 14, 2012 at 17:09

Phill Pafford

85.6k92 gold badges268 silver badges385 bronze badges

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

1 Comment

mcktimo Over a year ago

I was afraid of that. Oh well. I wonder which attributes don't need this extra bit of code

Collectives™ on Stack Overflow

Refresh on attribute change in Jquery-mobile?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related