I was working on jQueryMobile sample app in Visual Studio. I need to populate a jQueryMobile ListView, and the data is getting from a remote server, using a web service. But my ListView is not populating.
I am sure the issue is of cross domain, but I am using jsonp to get the data. But the issue is still there.
<!DOCTYPE html> <html> <head> <style type="text/css"> li span { font-weight: normal; } </style> <title>Sample App using jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="styles/jquery.mobile-1.0.min.css" rel="stylesheet" /> <script src="js/jquery-1.6.4.min.js"></script> <script src="js/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="car"> <div data-role="header" data-postion="fixed"> <h1> Cars</h1> <h1 id="blogheader"> Loading...</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" id="contentListView"> <li data-role="list-divider">Overview</li> </ul> </div> <div data-role="footer" data-position="fixed"> <h1> Footer </h1> </div> </div> <script type="text/javascript" charset="utf-8"> $(function () { var serviceUrl = 'http://mysite:85/TestService.asmx/ShowListViewDataJSON'; $.ajax({ url: serviceUrl, crossDomain: true, success: function (json) { setTimeout( function () { var c = $(this).find('ItemName').text(); alert(c); $(json).find("json").each(function () { carName = $(this).find('ItemName').text(); img = $(this).find('ImageUrl').text(); description = $(this).find('ItemDescription').text(); $('#contentListView').append('<li><a href="#"><h3>Car type:<span> ' + carName + '</span></h3></a></li>'); }); $('#contentListView').listview('refresh'); } , 100 ); }, error: function () { }, dataType: 'jsonp' }); }); </script> </body> </html>using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Services; using Northwind_newModel; using System.Web.Script.Serialization; using System.Xml.Serialization; using System.Web.Configuration; using System.Data.SqlClient; using System.Data; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] public class TestService : System.Web.Services.WebService { [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public string ShowListViewDataJSON() { string connection = WebConfigurationManager.ConnectionStrings["SampleConnectionString"].ConnectionString; SqlConnection conn = new SqlConnection(connection); SqlCommand SqlCommand = new SqlCommand(); string s = "SELECT top 1 ImageUrl,ItemName,ItemDescription FROM ListViewSource"; SqlCommand.CommandText = s; SqlCommand.Connection = conn; SqlDataAdapter da = new SqlDataAdapter(SqlCommand); DataSet ds = new DataSet(); da.Fill(ds, "newset"); ImageClass[] i = new ImageClass[ds.Tables[0].Rows.Count]; for(int count=0;count<ds.Tables[0].Rows.Count;count++) { i[count] = new ImageClass(); i[count].ImageUrl = ds.Tables[0].Rows[count]["ImageUrl"].ToString(); i[count].ItemName = ds.Tables[0].Rows[count]["ItemName"].ToString(); i[count].ItemDescription = ds.Tables[0].Rows[count]["ItemDescription"].ToString(); } string sReturn = new JavaScriptSerializer().Serialize(i); return new JavaScriptSerializer().Serialize(i); } public class ImageClass { public string ImageUrl { get; set; } public string ItemName { get; set; } public string ItemDescription { get; set; } } }Thanks.