193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Where are we?
Wed, Apr 19th 2017 316
Quick responsive type-ahead function
Fri, Mar 17th 2017 8
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 9
Feed highlights of week 2
Thu, Jan 12th 2017 8
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 6
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 9
I am a certified Graphista
Thu, Dec 8th 2016 7
Top 10
Where are we?
Wed, Apr 19th 2017 316
Adding search to an application with XPages interface (quickly)
Mon, Jun 23rd 2014 11
Building a search function with DataTables plugin
Mon, Jun 6th 2016 11
Using XControls for developing cards-based UI for mobile and desktop applications
Fri, Jan 9th 2015 9
Feed highlights of week 46
Mon, Nov 21st 2016 9
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 9
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 9
Reflections on Engage
Tue, Mar 29th 2016 8
I’ve got the bower
Thu, Apr 7th 2016 8
Adventurer
Mon, Nov 28th 2016 8


listview in JQuery Mobile via Domino Access Service
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Patrick Kwinten    

Here follows an quick example how to create a listview in JQM created with data from a view via DAS. As data source I have used the infamous Fake Names Address book which you can (still) can find on Codestore.

In the example you can navigate between the view (People view) and details (Person view).

people_view

person_view

I have not really find out (yet) how to add the next set of documents when you scroll down the list (to be continued, or drop the solution in the comments or send me an email).

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”&gt;
<xp:this.data>
<xp:dominoView databaseName=”appsfakenames.nsf”
viewName=”People” var=”viewPeople”>
</xp:dominoView>
</xp:this.data>
<xp:this.resources>
<xp:script src=”/global/jquery/jquery.js” clientSide=”true”></xp:script>
<xp:script src=”/global/jquery/jquery.mobile.js” clientSide=”true”></xp:script>
<xp:styleSheet href=”/global.jquery.mobile.css”></xp:styleSheet>
</xp:this.resources>

<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value><![CDATA[$(document).on('pageinit', function () {

$.ajax({
url: 'http://dev1//apps/fakenames.nsf/api/data/collections/name/People',
type: 'GET',
async: true,
success: function (result) {
ajax.handleData(result);
},
error: function (request, error) {
alert('Network error has occurred please try again!');
}
});
});

$(document).on('pagebeforeshow', '#headline', function () {
$('#movie-data').empty();

$.each(movieInfo.result, function (i, row) {
if (row["@position"] == movieInfo.id) {
$(‘#movie-data’).append(‘<li><img src=”https://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”></li>&#8217;);
$(‘#movie-data’).append(‘<li>Name: ‘ + row.$17 + ‘</li>’);
$(‘#movie-data’).append(‘<li>Company’ + row.CompanyName + ‘</li>’);
$(‘#movie-data’).append(‘<li>UNID : ‘ + row["@unid"] + ‘</li>’);
$(‘#movie-data’).listview(‘refresh’);
}

});
});

var movieInfo = {
id: null,
result: null
}

$(document).on(‘vclick’, ‘#movie-list li a’, function () {
movieInfo.id = $(this).attr(‘data-id’);
$.mobile.changePage(“#headline”, {
transition: “slide”,
changeHash: false
});
});

var ajax = {
handleData: function (result) {
movieInfo.result = result;
$.each(result, function (i, row) {
$(‘#movie-list’).append(‘<li><a href=”” data-id=”‘ + result[i]["@position"] + ‘”><img class=”yourProductSprite yourProductSprite-NoPhotoPerson32″ + src=”https://greenhouse.lotus.com/plugins/plugincatalog.nsf/NoPhotoPerson.gif”/><h3>&#8217; + result[i].$16 + ‘</h3><p>’ + result[i].CompanyName + ‘ / ‘ + result[i].$12 + ‘</p></a></li>’);
});
$(‘#movie-list’).listview(‘refresh’);
}
}]]></xp:this.value>
</xp:scriptBlock>

<div data-role=”page” id=”home”>
<div data-theme=”a” data-role=”header”>
<h3>
Pretenders Directory
</h3>
</div>
<div data-role=”content”>
<div class=”example-wrapper” >
<ul data-role=”listview” id=”movie-list” data-theme=”a”>

</ul>
</div>
</div>
<div data-theme=”a” data-role=”footer”>
<h1>Fake Names – Codestore</h1>
</div>
</div><!– /page –>

<div data-role=”page” id=”headline”>
<div data-theme=”a” data-role=”header”>
<a href=”#home” class=”ui-btn-left” data-transition=”slide” data-direction=”reverse”>Back</a>
<h3>Person details</h3>
</div>
<div data-role=”content”>
<ul data-role=”listview” id=”movie-data” data-theme=”a”></ul>
</div>
</div><!– /details –>
</xp:view>




---------------------
http://quintessens.wordpress.com/2014/05/20/listview-in-jquery-mobile-via-domino-access-service/
May 20, 2014
8 hits



Recent Blog Posts
316
Where are we?
Wed, Apr 19th 2017 7:19p   Patrick Kwinten
A
8
Quick responsive type-ahead function
Fri, Mar 17th 2017 6:33a   Patrick Kwinten
A
9
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 10:48a   Patrick Kwinten
A
8
Feed highlights of week 2
Thu, Jan 12th 2017 12:14p   Patrick Kwinten
A
6
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 8:01a   Patrick Kwinten
A
9
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 8:05a   Patrick Kwinten
A
7
I am a certified Graphista
Thu, Dec 8th 2016 12:12p   Patrick Kwinten
A
6
Feed highlights of week 47
Tue, Nov 29th 2016 11:37a   Patrick Kwinten
A
8
Adventurer
Mon, Nov 28th 2016 11:35p   Patrick Kwinten
A
9
Feed highlights of week 46
Mon, Nov 21st 2016 11:41a   Patrick Kwinten
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition