198 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 28
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 19
DDE does disruption (3) – Perhaps DDE is not build for it?
Fri, Sep 1st 2017 3
DDE does disruption (2)
Wed, Aug 30th 2017 4
Adding fontawesome to bootstrap alerts
Wed, Aug 30th 2017 3
DDE Does Disruption
Mon, Aug 21st 2017 5
Source Control disruption in DDE
Mon, Aug 21st 2017 3
Top 10
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 28
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 19
Feed highlights of week 47
Tue, Nov 29th 2016 12
Using XControls for developing cards-based UI for mobile and desktop applications
Fri, Jan 9th 2015 8
Adventurer
Mon, Nov 28th 2016 8
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 8
(extended) Managed Bean for SBT SDK
Tue, Oct 21st 2014 7
URL references in XPages
Fri, Sep 30th 2016 7
Feed highlights of week 2
Thu, Jan 12th 2017 7
XPages sufficient for line of business type of applications?
Tue, Jul 11th 2017 7


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
2 hits



Recent Blog Posts
28
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 6:43a   Patrick Kwinten
A
19
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 6:19p   Patrick Kwinten
A
3
DDE does disruption (3) – Perhaps DDE is not build for it?
Fri, Sep 1st 2017 12:35p   Patrick Kwinten
A
4
DDE does disruption (2)
Wed, Aug 30th 2017 11:47a   Patrick Kwinten
A
3
Adding fontawesome to bootstrap alerts
Wed, Aug 30th 2017 11:28a   Patrick Kwinten
A
5
DDE Does Disruption
Mon, Aug 21st 2017 12:42p   Patrick Kwinten
A
3
Source Control disruption in DDE
Mon, Aug 21st 2017 7:56a   Patrick Kwinten
A
7
XPages sufficient for line of business type of applications?
Tue, Jul 11th 2017 8:07a   Patrick Kwinten
A
1
Where are we?
Wed, Apr 19th 2017 7:19p   Patrick Kwinten
A
4
Quick responsive type-ahead function
Fri, Mar 17th 2017 6:33a   Patrick Kwinten
A




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