193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Quick responsive type-ahead function
Fri, Mar 17th 2017 262
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 51
Feed highlights of week 2
Thu, Jan 12th 2017 5
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 4
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 8
I am a certified Graphista
Thu, Dec 8th 2016 5
Feed highlights of week 47
Tue, Nov 29th 2016 6
Top 10
Quick responsive type-ahead function
Fri, Mar 17th 2017 262
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 51
Uninstalling Java extensions (“plugins”)
Fri, Nov 20th 2015 11
Opening the Bootstrap modal (dialog) from a repeat control
Mon, Sep 14th 2015 10
JQM & Domino Data Service (2)
Tue, May 27th 2014 8
Adding search to an application with XPages interface (quickly)
Mon, Jun 23rd 2014 8
Icon UK (retrospect)
Sun, Sep 28th 2014 8
Carousel with dynamic content
Tue, Dec 8th 2015 8
Another Graph sample from Domino Explorer
Wed, May 18th 2016 8
The IBM Notes and Domino roadmap mantra *sigh*
Mon, Nov 7th 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
5 hits



Recent Blog Posts
262
Quick responsive type-ahead function
Fri, Mar 17th 2017 6:33a   Patrick Kwinten
A
51
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 10:48a   Patrick Kwinten
A
5
Feed highlights of week 2
Thu, Jan 12th 2017 12:14p   Patrick Kwinten
A
4
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 8:01a   Patrick Kwinten
A
8
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 8:05a   Patrick Kwinten
A
5
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
7
Adventurer
Mon, Nov 28th 2016 11:35p   Patrick Kwinten
A
6
Feed highlights of week 46
Mon, Nov 21st 2016 11:41a   Patrick Kwinten
A
3
Feed highlights of week 45
Mon, Nov 14th 2016 11:27a   Patrick Kwinten
A




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