New post
Question
· Apr 27, 2016

Mixing Bootstrap and jQMobile

#ZEN #Caché

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