203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
A day lost due to DDE incapabilities
Wed, Nov 15th 2017 34
Passing a SSJS function to a custom control
Tue, Nov 7th 2017 3
A generic approach to display Notes data via a Bootstrap table
Mon, Oct 23rd 2017 3
Using the beanNamePicker dataProvider for a namepicker
Thu, Oct 19th 2017 5
Java and XPages
Wed, Sep 27th 2017 5
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 2
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 5
Top 10
A day lost due to DDE incapabilities
Wed, Nov 15th 2017 34
JQM & Domino Data Service (2)
Tue, May 27th 2014 9
Adventurer
Mon, Nov 28th 2016 7
Display JSON pretty in a textarea control
Fri, Dec 23rd 2016 7
Using XControls for developing cards-based UI for mobile and desktop applications
Fri, Jan 9th 2015 6
Feed highlights of week 47
Tue, Nov 29th 2016 6
DDE does disruption (3) – Perhaps DDE is not build for it?
Fri, Sep 1st 2017 6
Adding search to an application with XPages interface (quickly)
Mon, Jun 23rd 2014 5
Internationalization of the Pager controls
Mon, Sep 1st 2014 5
Graph – a closer look at the data
Tue, May 24th 2016 5


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
34
A day lost due to DDE incapabilities
Wed, Nov 15th 2017 3:43p   Patrick Kwinten
A
3
Passing a SSJS function to a custom control
Tue, Nov 7th 2017 10:31a   Patrick Kwinten
A
3
A generic approach to display Notes data via a Bootstrap table
Mon, Oct 23rd 2017 7:14a   Patrick Kwinten
A
5
Using the beanNamePicker dataProvider for a namepicker
Thu, Oct 19th 2017 9:03a   Patrick Kwinten
A
5
Java and XPages
Wed, Sep 27th 2017 6:31p   Patrick Kwinten
A
2
DDE does disruption (5) – I still haven’t found what I am looking for
Thu, Sep 14th 2017 6:43a   Patrick Kwinten
A
5
DDE does disruption (4) – xHausting
Wed, Sep 13th 2017 6:19p   Patrick Kwinten
A
6
DDE does disruption (3) – Perhaps DDE is not build for it?
Fri, Sep 1st 2017 12:35p   Patrick Kwinten
A
5
DDE does disruption (2)
Wed, Aug 30th 2017 11:47a   Patrick Kwinten
A
5
Adding fontawesome to bootstrap alerts
Wed, Aug 30th 2017 11:28a   Patrick Kwinten
A




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