JSFiddle - React, Tailwind, and code Playground

by shanabus

HTML

<!DOCTYPE html>  
<html>      
    <head>      
        <title>Sample Page</title>           
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>        
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head>   
    <body>              
        <div data-role="page" id="page1">      
            <div data-role="header">         
                <h1>
                    Page 1
                </h1>     
            </div><!-- /header -->      
            
            <div data-role="content">
                <a id="loadListView" data-role="button">Populate!</a>
                <br />
                <ul data-role="listview" id="resultListView"></ul>
            </div><!-- /content -->      
            
            <div data-role="footer">              
            </div> 
        </div><!-- /page -->      
        
        <div data-role="page" id="page2">         
            <div data-role="header">    
               <h1>
                  Page 2
                </h1>     
            </div><!-- /header -->         
            
            <div data-role="content">         
            </div><!-- /content -->         
            
            <div data-role="footer">         
            </div><!-- /fotoer -->     
            
        </div><!-- /page --> 

    </body>
</html>

JavaScript

$(document).ready(function() {
    $('#loadListView').click(populateList);
});

function populateList() {
    var results = Array();

    var obj1 = { title: "Test 1", subTitle: "subtitle 1", count: "11" };   
    results.push(obj1);
    
    var obj2 = { title: "Test 2", subTitle: "subtitle 2", count: "22" };   
    results.push(obj2);
    
    console.debug(results);
    
 $.each(results, function (i, result) {
  var s = "<li>" + result.title + "<span class='ul-li-count'>" + result.count + "</span></li>";

  $("#resultListView").append(s);
});
$("#resultListView").listview("refresh");   
}