edit contact

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        var record = {
            name:"",
            second:"",
            phone:""
        }
        $("#page_contact_list").live('pageinit', function(e){
            console.log('pageinit');
            $("li", e.target).bind('click', function(ev){
                var contactId = $(this).jqmData('contact-id');
                showEditPage(contactId);
            })
        })
        $("#page_contact_edit").live('pageshow',  function(e){
            populateEditData();
        })

        function showEditPage(contactId){
            $.mobile.showPageLoadingMsg();
            //pass the page id here to the ajax function.
            setTimeout(function(ajaxResponse){
                //record = ajaxResponse;
                $.mobile.hidePageLoadingMsg();
                $.mobile.changePage("#page_contact_edit",{
                    transition:'slide'
                });
            }, 2000)
        }

        function populateEditData(){
            //populate from the data object. For now im using some dummy datas.
            //$("#textinput1").val(record.name)
            $("#textinput1").val("raj")
            $("#textinput2").val("kamal")
            $("#textinput3").val("000-000-0000")
        }
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page_contact_list">
  <div data-role="content">
      <ul data-role="listview" data-divider-theme="b" data-inset="true">
        <li data-role="list-divider" role="heading" >
            Contacts
        </li>
        <li data-theme="c" data-contact-id ="1">
            <a href="#" data-transition="slide" >
                James
            </a>
        </li>
         <li data-theme="c" data-contact-id ="2">
            <a href="#" data-transition="slide" >
                Jenna
            </a>
        </li>
        <li data-theme="c" data-contact-id ="3">
            <a href="#" data-transition="slide" >
                Mark
            </a>
        </li>
      </ul>
    </div>
</div>

<div data-role="page" id="page_contact_edit">
    <div data-role="content">
        <form action="">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <label for="textinput1">
                        Name
                    </label>
                    <input name="name" id="textinput1" value="" type="text" />
                </fieldset>
            </div>
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <label for="textinput2">
                        Second name
                    </label>
                    <input name="second_name" id="textinput2" value="" type="text" />
                </fieldset>
            </div>
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <label for="textinput3">
                        Phone
                    </label>
                    <input name="phone" id="textinput3" value="" type="text" />
                </fieldset>
            </div>
            <a data-role="button" data-direction="reverse" data-transition="slide" href="#page_contact_list">
                Save
            </a>
            <a data-role="button" href="#page_contact_list" data-direction="reverse" data-transition="slide">
                Cancel
            </a>
        </form>
    </div>
</div>
</body>
</html>