shows a single listing item as it appears on the client screen. Here's the JSON data (an array with only one item) that the server returned:In the jQuery Mobile client app, the Javascript successFunc() renders the JSON-formatted listing array that the Web API returns as a Response.
This image shows a single listing item as it appears on the client screen. Here's the JSON data (an array with only one item) that the server returned:
[{
"CurrentPrice": 400.0,
"Description": "\r\n<p>This is one of a kind.</p>\r\n",
"EndDTTM": "2014-01-12T23:43:57.193",
"Hits": 0,
"ID": 160846,
"ImageURI": "Content/listingImages/20140110/3f86c...2_thumbfit.jpg",
"StartDTTM": null,
"Status": "Active",
"Subtitle": "Just for you",
"Title": "Beautiful Item"
}]
The successFunc() function at the bottom of the page looks busy at first glance. However, you soon realize that most of the content is jQuery and jQuery Mobile style classes that provide the CSS layout and formatting.
Line 3 declares the variable listString that will hold the concatenated markup for the rendered list. The first part of that markup is an opening tag for the outer unordered list.
Line 5 uses the jQuery $.each() method to iterate over all the items in the JSON array. On line 6 the loop adds the <li> tag and an id attribute. It's here that the first of the returned data comes into play. The returned JSON ID is concatenated to create the attribute/value pair id="160846" within list item.
The insertion of values continues throughout the loop such as line 9 where the number of Hits appears. On line 17 the markup builds the path to the thumbnail image. The remaining fields follow the pattern to provide the Title, Subtitle, Description, and Status for the listing.
The loop ends at line 29, and line 30 closes the unordered list. Line 31 applies the markup to a <div> element with the id of listings.
The jQuery Mobile listview() widget applies the classes to the markup on line 32. The formatDateTime plugin converts the default format used by Json.NET (2014-01-12T23:43:57.193) to a more readable "Sun Jan 12, 2014 11:01:57 PM".
function successFunc(listings, status) {
$("#lblErrorMessage,#divUsername,#divPassword").hide(1000);
var listString = '<ul data-role="listview" data-inset="true"'
+ ' id="myListings">';
$.each(listings, function (index, value) {
listString += '<li id="' + this.ID + '" data-role="list-divider">';
listString += this.Title;
listString += '<span class="ui-li-count">';
listString += this.Hits + '</span></li>';
listString += '<li class="ui-btn ui-btn-icon-right ';
listString += 'ui-li-has-arrowui-li ui-btn-up-c" data-theme="c"';
listString += ' data-iconpos="right" data-icon="arrow-r" ';
listString += 'data-corners="false" data-shadow="false"';
listString += ' data-iconshadow="true" data-wrapperEls="div">';
listString += '<div class="ui-btn-inner ui-li">';
listString += '<div class="ui-btn-text">';
listString += '<img class="ui-li-thumb" src="' + this.ImageURI + '"/>';
listString += '<a style="margin-left:100px;" class="ui-link-inherit"';
listString += ' href="#"><p class="ui-li-aside ui-li-desc">';
listString += 'Current price: <strong>$' + this.CurrentPrice + '</strong>';
listString += '</p><h2 class="ui-li-heading">' + this.Subtitle + '</h2>';
listString += '<p class="ui-li-desc"><strong>' + this.Description;
listString += '</strong></p><p class="ui-li-desc">This ' + this.Status;
listString += ' listing expires on '
listString += '<span class="EndDTTM" data-dateformat="D M d, yy ';
listString += 'gg:mm:ss a" data-datetime="' + this.EndDTTM + '" /></p>';
listString += '</a></div><span class="ui-icon ui-icon-arrow-r ';
listString += 'ui-icon-shadow"> </span></div></li>';
});
listString += '</ul>';
$('#listings').html(listString);
$('#listings ul').listview();
$('.EndDTTM').formatDateTime();
}
Copyright © 2002-2022. RainWorx Software. All rights reserved.