JqueryMobile Dynamically adding list

JqueryMobile Dynamically adding list

Hi folks,

I am actually new to JqueryMobile development.

I am trying to build one simple page which will fetch data from the service and dynamically add it to the list.

<!DOCTYPE html>
<html>
    <head>
  <meta charset="UTF-8">   
    <title>Restaurant Picker</title>
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile.structure-1.0.1.css" />
    <script src="js/cordova-2.6.0.js"></script>
    <link rel="apple-touch-icon" href="images/launch_icon_57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
    <link rel="stylesheet" href="jquery.mobile-1.0.1.css" />
    <link rel="stylesheet" href="custom.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.mobile-1.0.1.min.js"></script>

    <script type="text/javascript">
    $('"#choisir_ville').live('pageshow', function(e,info) {
    //$(document).on( "pageinit", "#choisir_ville", function( e ) {
   
             GetCities();
            //  $("ul#dynamicFieldList").append("<li >Heloooo</li>");
              // $("ul#dynamicFieldList").listview("refresh");
           });
       var Type;
        var Url;
        var Data;
        var ContentType;
        var DataType;
        var ProcessData;
        var method;
   
        function GetCities() {
            var uesrid = "1";
            Type = "POST";
            Url = "http://localhost/Test/DataSync.svc/JSON/mycities";
            DataType = "json";
            Data = '{}';
            ProcessData = true;
            ContentType = 'application/json; charset=UTF-8';
            CallService();
          alert('after call service');
        }

        function CallService() {
            $.ajax({
                type: Type,
                url: Url,
                data: Data,
                contentType: ContentType,
                dataType: DataType,
                processdata: ProcessData,
                crossDomain: true,               
                success: function(jsonObj) {
               
                  alert("json---------"+jsonObj.GetCitiesResult[1].CityName);


                 // $("ul#dynamicFieldList").append("<li >Heloooo</li>");
              // $("ul#dynamicFieldList").listview("refresh");
                 },
                error: function(response) {
                    alert("Incorrect username/password" + response.responseText);
                }

            });
        }

    
    </script>

</head>

<body >
<div id="choisir_ville" data-role="page" >
<div data-role="header">
   <div data-role="navbar">
            <ul>
                <li><a href="index.html"  data-role="button">RoomsTonite</a></li>
                <li><a href="index.html"   data-role="button">MyAccount</a></li>
               
            </ul>
        </div>
</div>
 <div data-role="container">
        <ul id="dynamicFieldList" data-role="listview" data-inset="true" data-divider-theme="b" >
        <li data-role="list-divider">MyLocation</li>
         <li><a href="#">xyz</a>
        <li data-role="list-divider">Cities</li>
        </ul>
    </div>
    </div>
</body>
</html>


While I am making an ajax call I am able to get the data, but I am not able to dynamically append it to the list.

Please somebody help me in resolving this issue. I am not able to understand what am I going wrong with.

I need to list the cities inside list-divider cities.



Thanks in advance