193 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Where are we?
Wed, Apr 19th 2017 6
Quick responsive type-ahead function
Fri, Mar 17th 2017 5
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 6
Feed highlights of week 2
Thu, Jan 12th 2017 7
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 7
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 8
I am a certified Graphista
Thu, Dec 8th 2016 14
Top 10
I am a certified Graphista
Thu, Dec 8th 2016 14
Using XControls for developing cards-based UI for mobile and desktop applications
Fri, Jan 9th 2015 8
Update on my Cloudant sample XPages application
Tue, Oct 18th 2016 8
Nice reversible cards in a IBM Verse style
Mon, Dec 12th 2016 8
Feed highlights of week 47
Tue, Nov 29th 2016 7
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 7
Feed highlights of week 2
Thu, Jan 12th 2017 7
Build JSON from NotesView, support for multiple value fields
Mon, Sep 26th 2016 6
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 6
Where are we?
Wed, Apr 19th 2017 6


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



Recent Blog Posts
6
Where are we?
Wed, Apr 19th 2017 7:19p   Patrick Kwinten
A
5
Quick responsive type-ahead function
Fri, Mar 17th 2017 6:33a   Patrick Kwinten
A
6
Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip
Wed, Mar 15th 2017 10:48a   Patrick Kwinten
A
7
Feed highlights of week 2
Thu, Jan 12th 2017 12:14p   Patrick Kwinten
A
7
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
14
I am a certified Graphista
Thu, Dec 8th 2016 12:12p   Patrick Kwinten
A
7
Feed highlights of week 47
Tue, Nov 29th 2016 11:37a   Patrick Kwinten
A
4
Adventurer
Mon, Nov 28th 2016 11:35p   Patrick Kwinten
A
4
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