I wanted to try using the
BusyIndicator so i decided to change the Contact Search application that i developed in
Using JQuery Mobile in WorkLight application entry, so that as soon as user clicks on Search Contact it starts showing the busy indicator and that indicator stays still the results are updated.
I made following changes in my JavaScript file.
var busyIndicator;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator('page1');
}
function getContact(){
var contactName = $('contactName').getValue();
var invocationData = {
adapter:"ContactWSService",
procedure:"searchContact",
parameters:[contactName]
}
var options ={
onSuccess:loadContactSuccess,
onFailure:loadContactFailure
}
busyIndicator.show();
WL.Client.invokeProcedure(invocationData, options);
}
function loadContactSuccess(result){
console.log("Inside loadContactSuccess " + result);
var html = '';
try{
if(result.status == 200){
var contactList = result.invocationResult.Envelope.Body.searchContactResponse.contactList;
var i = 0;
for(i =0 ; i < contactList.length ; i++){
var currentContact = contactList[i];
html = html + '<li><a href="#">'+currentContact.firstName +' '
+currentContact.lastName +'</a></li>';
}
}
jq("#displayContact").html(html);
jq("#displayContact").listview('refresh');
busyIndicator.hide();
}catch(e){
busyIndicator.hide();
}
}
function loadContactFailure(result){
console.log("Inside loadContactError " + result);
busyIndicator.hide();
}
First i had to create object of
WL.BusyIndicator with value of
page1 as input, page1 is the value of id attribute on enclosing div in my page. Without that i was getting JavaScript initialization error.
Then the
getContact() which is responsible for initiating the contact search call invokes the
show() method to start the
BusyIndicator. I am calling the hide() method of
BusyIndicator in the
loadContactSuccess() method which is a callback method that gets called once the results are ready and the UI is updated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0" />
<title>HelloDatabase</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/HelloDatabase.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.0.min.js"></script>
</head>
<body onload="WL.Client.init({showLogger:true})" id="content" style="display: none">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>Contact DB App</h3>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
First Name
</label>
<input id="contactName" placeholder="" value="" type="text" />
</fieldset>
</div>
<a data-role="button" data-transition="fade"
href="javascript:getContact()" id="searchContact">
Search Contact
</a>
<ul data-role="listview" data-inset="true" data-filter="true" id="displayContact">
</ul>
</div>
<div data-theme="a" data-role="footer">
<h3>Copyright stuff</h3>
</div>
</div>
<script src="js/HelloDatabase.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
</body>
</html>
No comments:
Post a Comment