Breaking jQuery web application with MooTools
App build on jQuery
, require.js
, html
, css
- some web sites that consume this application, too, have MooTools.js, and the infrastructure is in conflict with my application, it can not be combined with jQuery.
When the app starts, all external sources like scripts and css that should be running go to the main host web page tag and HTML before <div id="widget"/>
.
Injection code below:
<script language="javascript" type="text/javascript" src="code.jquery.com/jquery-1.8.2.js"></script>
<link href="@(ConfigurationSettings.AppSettings["AppPathFE"] + "outside-ip/widget.css")" />
<script src="@(ConfigurationSettings.AppSettings["AppPathFE"] + "outside-ip/widget.js")"></script>
<div id="widget"></div>
<script>
$(function () {
WG.initialize({
urlFE: '@(ConfigurationSettings.AppSettings["AppPathFE"])',
urlBE: '@(ConfigurationSettings.AppSettings["AppPathBE"])',
theme: 'base',
lang: 'en-en',
cache: false,
logging: true,
talk: {
url: '@(ConfigurationSettings.AppSettings["AppTalk"])',
logging: true,
},
air: {
url: '@(ConfigurationSettings.AppSettings["AppAir"])',
logging: true,
},
});
});
</script>
source to share
You need to use jQuery
instead $
.
MooTools uses $
as an alias for document.id
, which is basically equal document.getElementById
, but with the authority of MooTools.
So, if you change your code to this, you should be safe:
(you can also change everything $
to jQuery
inside your script file):
jQuery(function () {
WG.initialize({
instead
$(function () {
WG.initialize({
You can also in your script code just wrap all the code in (function($){ code here })(jQuery);
. So if your script is exporting WG
to the global space, you could:
var WG;
(function($){
// all script code here, removing the var declaration inside the wrap function
})(jQuery);
Or just window.WG
inside your script.
source to share