changePage + listview (dynamic)

by Krishna Gopinath

HTML

<!--first page -->
<div data-role="page" id="info-page">
    <div data-role="header" data-theme="b">
         <h1> Information</h1>

    </div>
    <div data-role="content">
        <ul data-role="listview" id="prof-list" data-divider-theme="a" data-inset="true">
            <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        </ul>
    </div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
    <div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>

         <h1>Employee Details</h1>

    </div>
    <div data-role="content"></div>
</div>

CSS

.ui-bar {
    padding :5px 0px 5px 0px !important;
    margin :5px 0px 5px 0px !important;
}

JavaScript

//assuming this comes from an ajax call
var info = [{
    "id": 0,
        "age": 31,
        "name": "Avis Greene",
        "gender": "female",
        "company": "Handshake",
        "email": "avisgreene@handshake.com",
        "phone": "+1 (845) 575-2978",
        "address": "518 Forrest Street, Washington, New York, 3579"
}, {
    "id": 1,
        "age": 31,
        "name": "Dunn Haynes",
        "gender": "male",
        "company": "Signity",
        "email": "dunnhaynes@signity.com",
        "phone": "+1 (829) 454-3806",
        "address": "293 Dean Street, Dante, Oregon, 5864"
}, {
    "id": 2,
        "age": 20,
        "name": "Contreras Keith",
        "gender": "male",
        "company": "Overfork",
        "email": "contreraskeith@overfork.com",
        "phone": "+1 (941) 412-2874",
        "address": "166 Broome Street, Norris, Kentucky, 2163"
}, {
    "id": 3,
        "age": 27,
        "name": "Hays Schneider",
        "gender": "male",
        "company": "Orbean",
        "email": "haysschneider@orbean.com",
        "phone": "+1 (896) 599-2026",
        "address": "889 Engert Avenue, Staples, Illinois, 9927"
}, {
    "id": 4,
        "age": 30,
        "name": "Stanley Mcdowell",
        "gender": "male",
        "company": "Stralum",
        "email": "stanleymcdowell@stralum.com",
        "phone": "+1 (876) 430-3340",
        "address": "293 Withers Street, Dana, North Dakota, 5194"
}, {
    "id": 5,
        "age": 20,
        "name": "Sonja Sweeney",
        "gender": "female",
        "company": "Collaire",
        "email": "sonjasweeney@collaire.com",
        "phone": "+1 (850) 434-2470",
        "address": "605 Adelphi Street, Jackpot, South Dakota, 2349"
}, {
    "id": 6,
        "age": 30,
        "name": "Hilary Meadows",
        "gender": "female",
        "company": "Zilch",
        "email": "hilarymeadows@zilch.com",
        "phone": "+1 (890) 502-2417",
        "address": "883 Wogan Terrace, Calvary, Vermont, 259"
}, {
    "id": 7,
   ...