Mixing Bootstrap and jQMobile

Question

Question

Steve Pisani · Apr 27, 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

Discussion (6)1

Log in or sign up to continue

Fabio Goncalves · Apr 28, 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

score 0 · Answer 1 · 2016-04-28T03:05:42-04:00

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.

score 0 · Answer 2 · 2016-05-01T17:06:56-04:00

Steve Pisani · May 1, 2016

This hasn't made a difference Stefan.

0 0

score 0 · Answer 3 · 2016-05-02T07:50:28-04:00

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.

score 0 · Answer 4 · 2016-05-02T10:01:58-04:00

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

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

Thanks.

Steve

score 0 · Answer 5 · 2016-05-01T00:13:57-04:00

Hi,

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

Steve