JQM & Domino Data Service (3)

In a previous post I demonstrated how to populate a listview for jQuery Mobile from a Notes view via Domino Data Service. In this post I will show how to include a ‘More’ button to load additional loading of more items for the listview and display them.

For this you need to make changes in 2 places:

• mobile.xsp
• employeelist.js

employeelist.js

In the JavaScript file we need to modify the initial getEmployeeList function and include a new function to load more employees from the list. This function is called from the button on the employeeListPage.

function getEmployeeList() {
$.getJSON(serviceURL + ‘data/collections/name/People?count=20‘, function(data) {
$(‘#employeeList li’).remove();
employees = data;
$.each(employees, function(index, employee) {
var tmp = “”;
tmp+='<li>’;
tmp+='<a href=”mobile_person.xsp?id=’ + employee[“@unid”] + ‘”>’ +
‘<img src=”http://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”/>&#8217;;
tmp+='<h4>’ + employee.$17 + ‘</h4>’;
tmp+='<p>’ + employee.CompanyName + ‘</p>’;
if (employee.$12!=””) {
tmp+='<span class=”ui-li-count”>’ + employee.$12 + ‘</span>’;
}
tmp+='</a></li>’;
$(‘#employeeList’).append( tmp );
});
$(‘#employeeList’).listview(‘refresh’);
});
}

function getMoreEmployeeList(num) {
var n = $(‘#employeeList li’).length;
$.getJSON(serviceURL + ‘data/collections/name/People?start=’ + n + ‘&count=’ + num, function(data) {
employees = data;
$.each(employees, function(index, employee) {
var tmp = “”;
tmp+='<li>’;
tmp+='<a href=”mobile_person.xsp?id=’ + employee[“@unid”] + ‘”>’ +
‘<img src=”http://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”/>&#8217;;
tmp+='<h4>’ + employee.$17 + ‘</h4>’;
tmp+='<p>’ + employee.CompanyName + ‘</p>’;
if (employee.$12!=””) {
tmp+='<span class=”ui-li-count”>’ + employee.$12 + ‘</span>’;
}
tmp+='</a></li>’;
$(‘#employeeList’).append( tmp );
});
$(‘#employeeList’).listview(‘refresh’);
});
}

mobile.xsp

In the xsp file we add a button below the listview in the employeeListPage:

<div id=”employeeListPage” data-role=”page”>

<div data-role=”header” data-position=”fixed”>
<h1>Pretenders Directory</h1>
</div>

<div data-role=”content”>
<ul id=”employeeList” data-role=”listview”
data-filter=”true”>
</ul>
</div>
<xp:button value=”More…” id=”button1″>
<xp:this.attrs>
<xp:attr name=”data-role” value=”button”></xp:attr>
</xp:this.attrs>
<xp:eventHandler event=”onclick” submit=”false”>
<xp:this.script><![CDATA[getMoreEmployeeList(20)]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>

 

Addition

You can make it nicer if you add instead the following link/button:

<a id=”btnMore” onClick=”getMoreEmployeeList()” data-role=”button” class=”ui-disabled”>More</a>;

And update the employeelist.js:

//var serviceURL = “http://dev1//apps/fakenames.nsf/api/&#8221;;
//use relative URL instead
var serviceURL = “./api/”;
var count = 20;
var employees;

$(‘#employeeListPage’).bind(‘pageinit’, function (event) {
getEmployeeList();
});

function getEmployeeList() {
$.getJSON(serviceURL + ‘data/collections/name/People?count=’ + count, function (data) {
$(‘#employeeList li’).remove();
employees = data;
$.each(employees, function (index, employee) {
var tmp = “”;
tmp += ‘<li>’;
tmp += ‘<a href=”mobile_person.xsp?id=’ + employee[“@unid”] + ‘”>’ +
‘<img src=”http://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”/>&#8217;;
tmp += ‘<h4>’ + employee.$17 + ‘</h4>’;
tmp += ‘<p>’ + employee.CompanyName + ‘</p>’;
if (employee.$12 != “”) {
tmp += ‘<span class=”ui-li-count”>’ + employee.$12 + ‘</span>’;
}
tmp += ‘</a></li>’;
$(‘#employeeList’).append(tmp);
});
$(‘#employeeList’).listview(‘refresh’);
$(‘#btnMore’).removeClass(‘ui-disabled’);
//$(‘#btnMore’).attr(“disabled”, “disabled”);
//$(‘#button2’).attr(“disabled”, “disabled”);
});
}

function getMoreEmployeeList() {
$(‘#btnMore’).addClass(‘ui-disabled’);
var n = $(‘#employeeList li’).length;

var num = count;
//var num = $.getUrlVar(‘count’);
$.getJSON(serviceURL + ‘data/collections/name/People?start=’ + n + ‘&count=’ + num, function (data) {
employees = data;
$.each(employees, function (index, employee) {
var tmp = “”;
tmp += ‘<li>’;
tmp += ‘<a href=”mobile_person.xsp?id=’ + employee[“@unid”] + ‘”>’ +
‘<img src=”http://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”/>&#8217;;
tmp += ‘<h4>’ + employee.$17 + ‘</h4>’;
tmp += ‘<p>’ + employee.CompanyName + ‘</p>’;
if (employee.$12 != “”) {
tmp += ‘<span class=”ui-li-count”>’ + employee.$12 + ‘</span>’;
}
tmp += ‘</a></li>’;
$(‘#employeeList’).append(tmp);
});
$(‘#employeeList’).listview(‘refresh’);
$(‘#btnMore’).removeClass(‘ui-disabled’);
});
}

$.extend({
getUrlVars: function () {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split(‘=’);
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function (name) {
return $.getUrlVars()[name];
}
});

Then the More button get’s disabled / enabled during loading of the data