Home/ Questions/Q 7505553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T21:57:23+00:00

Stripped down code shows that I can change an attribute, in this case data-split-icon,

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    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; 
});
    • 0