Autodividers and dynamic items - autosor mobilet

by manoj

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<script>
$( document ).on( 'pageinit', function() {

  $( '#btn1' ).on( 'click', function() {
    var list = $( '#ul1' ), lis, 
    // generate a random list item from A-Z
    asc = String.fromCharCode( Math.floor( Math.random()*(90-65) +65 ) );

    // add the new item to the list
    $( list ).append ( '<li><a href="#">' + asc + ' - listitem</a></li>' );
    
    // read all list items (without list-dividers) into an array
    lis = $( '#ul1 li' ).not( '.ui-li-divider' ).get();
    
    // sort the list items in the array
    lis.sort( function( a, b ) { 
      var valA = $( a ).text(),
          valB = $( b ).text();
       if ( valA < valB ) { return -1; }
       if ( valA > valB ) { return 1; }
       return 0;
    });

    // clear the listview before rebuild
    list.empty();
    
    // adding the ordered items to the listview
    $.each( lis, function( i, li ) {
      list.append( li );
    });
    list.listview( 'refresh' );
  });
});    
</script> 
<body>
<div data-role="page" id="page1" data-theme="a">
  <div data-role="header">
    <h1>Autodividers and dynamic items</h1>
  </div>
  <div data-role="content">
    <p class="ui-bar ui-bar-e"><a id="btn1">add a list item</a></p>
    <ul data-role="listview" id="ul1" data-autodividers="true">
      <li><a href="#">N - listitem</a></li>
    </ul>
  </div>
</div>
</body>    
</html>

CSS

.ui-header .ui-title { margin: .6em 5% .8em !important; }
p.ui-bar.ui-bar-e { margin: -.8em -15px .8em; }