Как связать данные с Jquery Mobile listview

Ниже мой код и данные не получают привязки к списку. Показывает пустую страницу.Как связать данные с Jquery Mobile listview

<div data-role="page" id="index"> 
     <div data-role="header"> 
      <h1> 
       demo</h1> 
     </div> 
     <div data-role="content"> 
      <ul data-role="listview" data-inset="true" id="cars-data"> 
      <li >abcd</li> 
      <li>cdf</li> 
      </ul> 
     </div> 
    </div> 
    <div data-role="page" id="cars"> 
     <div data-role="header"> 
      <a data-role="button" data-transition="none" data-theme="a" href="#index">Back</a> 
      <h1> 
      </h1> 
     </div> 
     <div data-role="content"> 
      <ul data-role="listview" data-inset="true" id="car-data"> 
      </ul> 
      <img src="" width="100%" style="height: auto;" id="car-img"> 
     </div> 
    </div> 
    <script type="text/javascript" charset="utf-8"> 
     $(document).ready(function() { 

      $.ajax({ 
       type: "POST", 
       async: true, 
       url: "PINCWebService.asmx/GetContacts", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        // $("#car-data").html(data); 
        var list = $("#car-data"); 
        list.empty(); 

        $.each(data, function (rowIndex) { 
         var datar = data.rows.item(rowIndex); 
         list.append("<li>" + datar + "</li>"); 
        }); 

        list.listview('refresh'); 
       } 

      }); 
     }); 
    </script>

источник

2013-03-01 chamara

Я ответил на ваш вопрос здесь с полным кодом http://stackoverflow.com/questions/15151747/simple-data-binding-jquery-mobile-listview/15154414#15154414 –

Я написал для вас вещи. Посмотрите, как все делается.

Сервис

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Web.Script.Serialization; 

namespace SimpleWebService 
{ 

    [WebService(Namespace = "http://tempuri.org/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    [System.ComponentModel.ToolboxItem(false)] 
    [System.Web.Script.Services.ScriptService] 
    public class Service1 : System.Web.Services.WebService 
    { 

     [WebMethod] 
     public string GetLankanList() 
     { 
      JavaScriptSerializer serializer = new JavaScriptSerializer(); 
      List<Lankans> lankanList = new List<Lankans>(); 
      string[] names = { "chamara", "janaka", "asanka" }; 

      for (int i = 0; i < names.Length; i++) 
      { 
       Lankans srilankans = new Lankans(); 
       srilankans.Name = names[i]; 

       lankanList.Add(srilankans); 
      } 

      string jsonString = serializer.Serialize(lankanList); 
      return jsonString; 
     } 

     public class Lankans 
     { 
      public string Name { get; set; } 
     } 
    } 
}

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 

<div data-role="page" id="lankalistpage"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <div id="LankanLists"></div>   
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
<script src="lankanscript.js"></script> 
</body> 
</html>

JavaScript

$('#lankalistpage').live('pageshow',function(event){ 
    var serviceURL = 'service1.asmx/GetLankanList'; 

    $.ajax({    
      type: "POST", 
      url: serviceURL, 
      data: param="", 
      contentType:"application/json; charset=utf-8", 
      dataType: "json", 
      success: successFunc, 
      error: errorFunc 
    }); 

    function successFunc(data, status){ 
     // parse it as object 
     var lankanListArray = JSON.parse(data.d); 

     // creating html string 
     var listString = '<ul data-role="listview" id="customerList">'; 

     // running a loop 
     $.each(lankanListArray, function(index,value){ 
     listString += '<li><a href="#" >'+this.Name+'</a></li>'; 
     }); 
     listString +='</ul>'; 



     //appending to the div 
     $('#LankanLists').html(listString); 

     // refreshing the list to apply styles 
     $('#LankanLists ul').listview(); 
    } 

    function errorFunc(){ 
     alert('error'); 
    } 
});

Окончательный вывод enter image description here

Вы можете download the source here

источник

2013-03-01 10:03:06

Как связать данные с Jquery Mobile listview

ответ

Смежные вопросы