Mixing Bootstrap and jQMobile

Steve Pisani 27 April 2016

Hi,

Is it possible to have a ZEN Mojo application that uses Bootstrap and controls from jQMobile ?

In a fresh installation running Zen Mojo version 1.1.1, my ZEN Mojo page declares:

Parameter CSSINCLUDES As STRING = "bootstrap-3-3-5/dist/css/bootstrap.min.css,jquery.mobile-1.4.5.min.css";
Parameter JSINCLUDES As STRING = "jquery-1.10.2.min.js, jquery.mobile-1.4.5.min.js,jquery-1.11.3.min.js,bootstrap-3-3-5/dist/js/bootstrap.min.js";
..

and a pageContents of:

XData pageContents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<pane xmlns="http://www.intersystems.com/zen" xmlns:mojo="http://www.intersystems.com/zen/mojo" layout="none">
<mojo:documentView developerMode="true" id="mainView" ongetdata="return zenPage.getContent('data',key,criteria);"ongetlayout="return zenPage.getContent('layout',key,criteria);"
initialDocumentKey="home" initialLayoutKey="home" onload="zenPage._latestjQMVersion = 'jQM-1.4.5-Helper';">

<mojo:jQM-1.4.5-PageManager jQueryAnimation="flip" onPageShow="zenPage.onPageShow(layoutkey,documentkey);">
<mojo:jQM-1.4.5-Helper/>
<mojo:bootstrap-3.3.x-Helper/>
<mojo:HTML5Helper/>
<mojo:mojoDefaultHelper/>
</mojo:jQM-1.4.5-PageManager>

</mojo:documentView>
</pane>
}

However, when browsing the page, I get the errors:

"jQueryMobile library is not loaded correctly. Check your Includes" and "Not all libraries for page manager jQM-1.4.5-PageManager have been loaded correctly"

I have verified that the css and js files referred to by my CSSINCLUDES and JSSINCLUDES parameters are as identified in the documentation, and that these files are located in the /csp/broker path. I've verified with google dev tools that these are all found and downloaded.

What could be causing the issue ?

Steve

Answers

Answer by Stefan Wittmann 28 April 2016

Steve, you've included the jQuery library twice. Only import the latest release of jQuery and you should be fine. If not, let us know.

0 0

Comment by Steve Pisani 1 May 2016

This hasn't made a difference Stefan.

0 0

Comment by Stefan Wittmann 2 May 2016

Looking at your includes, you have to make sure that you include jQuery first and then jQM. The error signals, that jQuery is loaded fine, but jQueryMobile is not.

0 0

Comment by Steve Pisani 2 May 2016

Ah.. I did not realise the order was important.

after switching and loading jQuery first, and jQM later - it worked.

Thanks.

Steve

0 0

Answer by Fabio Goncalves 28 April 2016

Hi Steve,

When working with multiple plugins you may have the same control type on both, in order to resolve the conflicts you can implement the "onResolvePluginConflicts" client method on your Page where you will define which is your main plugin.

Take a look bellow:

/// This event handler callack is called when more than one plugin is registered with a
/// <class>documentView</class> for the same control type.
///
/// In this case: $header and $control are registered both with the <class>corePlugin<class> and
/// the <class>jQMPlugin</class>
ClientMethod onResolvePluginConflicts(conflicts) [ Language = javascript ]
{
// Map all components to the jQM plugin,
// the documentView automatically checks if it's possible.
for (cmp in conflicts) {
zenThis.setPluginMapping(cmp, 'jQM');
}
}

I hope it helps.

Best regards.

0 0

Comment by Steve Pisani 1 May 2016

Hi,

I removed jquery-1.10.2.min.js and left jquery-1.11.3.min.js. however, the problem still exists.

Steve

0 0