JQuery Mobile in Xpages, Passing Parameters

Question

I am using the JQuery Mobile Framework in one of my Xpages applications.

I have made a listView with some entries and want to show the corresponding document when clicking on one of the entries. I have one XPage with two JQM Pages.

Do oyu have any idea how this could be possible in XPages? I know there are some plugins for JQuery mobile which add parameter functionality between pages, but my main problem is that there is no server-side event which is fired so that I could refresh my page and pass my documentID

Those are some things I tried before:

• Wrapping a div around my entry and tried to fire a serverside event -> No Event
• Using <'a> standard element (which changes the page, but no parameter is given, for example via the url
• Tried to fire a XSP.partialRefreshGet when clicking the link, doesn't work because dojo has to be deactivated so that JQM can work properly
• Tried to fill a hidden Input for passing the parameter, useless, I need a serverside event
• Tried to open a new XPage when clicking on an entry to open the document, didn't work, either he can't find the xpage or I receive an error that XSP could not be found.
• Some more things I don't remember at this time

Does anyone have experience with using the JQM Framework in XPages? I can't imagine that there isn't a way i can get this to work.

Thanks in advance.

Answer 1

I used separate XPages for the view and for the document.

<div data-role="page" id="main">
    <div data-role="header">
        <h1>Contacts</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-filter="true">
        <xp:repeat id="contactRepeat" rows="30" value="#{contactsView}" var="dataRow" disableOutputTag="true">
            <li>
                <xp:link escape="true" id="link1">
                    <xp:this.value><![CDATA[#{javascript:return "m_ContactDetails.xsp?action=OpenDocument&documentId=" + dataRow.getDocument().getUniversalID();}]]></xp:this.value>
                    <xp:this.text><![CDATA[#{javascript:return dataRow.getColumnValue("Name");}]]></xp:this.text>
                </xp:link>
            </li>
        </xp:repeat>
    </ul>
</div>

While I'm sure you could put both the view and the form on the same XPage (which is how I learned to do it in the extension library), I think having separate XPages works well and I know it allows me to pass the parameter.

In my extension library one, the link it opens to focus on the document part of the XPage and select a specific document is:

http://dominodev.mydomain.com/djn/Test.nsf/m_milestoneList.xsp#milestoneDetails&databaseName=DominoDev/MyDomain!!DJN\Test.nsf&documentId=5DDB32855213FC0485257B2D00730253&action=editDocument

So, I guess if you set the links from your dataview to use the #pageName and &documentId= it would probably work.....

Answer 2

I was able to solve the problem, though it's a little bit strange. My colleague had to disable dojo because the UI wasn't rendered properly without switching it off. I have activated dojo again in my page and link is now fully working without problems, which means I can open another XPage with the parameters I want.

Answer 3

My colleague had to disable dojo because the UI wasn't rendered properly without switching it off

Yes, but I seems to be only a problem on ND 9 with dojo 1.8. The usal suspect just started to blog about this issue :) http://notesin9.com/index.php/2013/04/20/jquery-mobile-seems-incompatible-with-xpages-in-domino-9-0/

It works on 8.5.1 - 8.5.2 so far. Need to test on 8.5.3 but think, that it is only ND 9 / Dojo 1.8 related

I'v already tried with a different JQM namespace (data-bcc-role instead of data-role ) but the issue still exists. So IMHO it must be something different. Even noConflict() with jQuery did not help.

Answer 4

According to a comment in http://notesin9.com/index.php/2013/04/20/jquery-mobile-seems-incompatible-with-xpages-in-domino-9-0/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+NotesIn9+%28Notes+In+9+-+Wordpress%29

In jQuery Mobile version 1.3.1 in line 16 is the problem. I'm not sure what the real problem is, but if you change line 13 to 23

(function ( root, doc, factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define( [ "jquery" ], function ( $ ) { factory( $, root, doc ); return $.mobile; }); } else { // Browser globals factory( root.jQuery, root, doc ); }

to

(function ( root, doc, factory ) {// Browser globals factory( root.jQuery, root, doc ); }

every thing will work

have tested and it works