Series:
We will create a simple web client using jQuery Mobile
and use its search functionality.
Steps:
1.
Download jquery and jquery mobile.
2.
Create necessary folders under webcontent
3.
Create a /mobile/1.4.5/<jquery mobile
files>
4.
Create a /jquery/<jquery file>
5.
Create a html file
a. Include
correct character set
b. Make
it mobile ready
c. Include
the correct js and css files
d. Create
a jquery page
e. Create
an empty
f. Place
a AJAX call to the service layer and Collect Json
g. Parse
JSON
h. Add
li to ul
6.
Test:
a. Browse
to the file
b. Check
the n/w calls (I am using firebug, use alternatives such as Fiddler in IE)
i. Check
that json request/response
ii. (optionally)
check the json parsed data
c. Check
the search functionality
Step 1: Download the jquery and jquery mobile files
Obvious.
Step 2, 3, 4: create necessary folders
Step 5: Create a html file
a. Include
correct character set
<meta charset="utf-8">
b. Make
it mobile ready
<meta name="viewport" content="width=device-width,
initial-scale=1">
c. Include
the correct js and css files
<link rel="stylesheet"
href="mobile/1.4.5/jquery.mobile.theme-1.4.5.min.css"
/>
<link rel="stylesheet"
href="mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css">
<link rel="stylesheet"
href="mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="jquery/jquery-2.1.3.min.js"></script>
<script src="mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
d. Create
a jquery page
<div id="index"
data-role="page" class="ui-page-theme-b">
<header data-role="header"
data-position="fixed">
<h3>My App Title</h3>
</header>
<div id="homebody"
data-role="content">
e. Create
an empty ul
<ul id="locationid"
data-role="listview" data-inset="true"
data-filter-placeholder="Locations..." data-filter="true"
data-split-theme="b" data-split-icon="plus"
data-theme="b">
</ul>
f. Place
a AJAX call to the service layer and Collect Json
jQuery(document).ready(function() {
$.ajax({
url
: "ws/xxx/",
dataType
: "html",
type
: 'GET',
data
: "",
success
: function(data) {
objData
= jQuery.parseJSON(data);
for (var count=0; count <
objData.data.length; count++) {
$("#homebody
ul").append("<li
class=\"ui-li-static ui-body-inherit ui-last-child\">" + objData.data[count].locationName + "</li>");
}
}
});
});
g. Parse
JSON
Check the above code snippter.
h. Add
li to ul
Check the above code snippet.
Step 6: Test
a. Browse
to the file
b. Check
the n/w calls (I am using firebug, use alternatives such as Fiddler in IE)
d. Check
that json request/response
e. (optionally)
check the json parsed data
c. Check
the search functionality
Appendix:
HTML code:
<body>
<div id="index"
data-role="page" class="ui-page-theme-b">
<header data-role="header"
data-position="fixed">
<h3>My App Title</h3>
</header>
<div id="homebody"
data-role="content">
<ul id="locationid"
data-role="listview" data-inset="true"
data-filter-placeholder="Locations..." data-filter="true"
data-split-theme="b" data-split-icon="plus"
data-theme="b">
</ul>
</div>
<footer data-role="footer"
data-position="fixed">
<h3>It's a xxx
Application!!!</h3>
</footer>
</div>
<!-- /page
-->
</body>
No comments:
Post a Comment