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=""></script>
<link href="@(ConfigurationSettings.AppSettings["AppPathFE"] + "outside-ip/widget.css")" />
<script src="@(ConfigurationSettings.AppSettings["AppPathFE"] + "outside-ip/widget.js")"></script>

<div id="widget"></div>

    $(function () {
            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,



source to share

1 answer

You need to use jQuery

instead $


MooTools uses $

as an alias for

, 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 () {



    $(function () {


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;
    // all script code here, removing the var declaration inside the wrap function


Or just window.WG

inside your script.



All Articles