I was trying to include a popup window made using the Motools library in software that uses JQuery. The thing is, the other software has 1 million lines that include JQuery and it would be better not to have to change those lines everywhere, but find another solution or device to make both Motools and JQuery codes work together, either changing the Motools code that is smaller or another device?
After years of working with Joomla !, this is an old problem, well known in the community, because Joomla! I used Mootools as their framework, however later jQuery appeared and we know the rest of the story.
The problem lies in the use of $ by both, and in this case, given the amount of jQuery code it would seem that only these options remain:
Use a popup window that supports jQuery or that does not need any other dependency, something like SweetAlert 2 , with that would avoid having to add another JS library / framework.
In the popup window that you are trying to add, modify (or extend if possible) your code so that you do not use the functions $ and $$ of Mootools, which are "improvements" of getElementById and querySelectorAll respectively, which should not be so complicated to replace, although it depends on the implementation as it is done.
This is explained in several parts of the Mootools website:
link < - This is perhaps the more relevant.
Here is the reference (initial) in the Mootools code :
if (window.$ == null) Window.implement('$', function(el, nc){
return document.id(el, nc, this.document);
});
if (window.$$ == null) Window.implement('$$', function(selector){
var elements = new Elements;
if (arguments.length == 1 && typeof selector == 'string') return Slick.search(this.document, selector, elements);
var args = Array.flatten(arguments);
for (var i = 0, l = args.length; i < l; i++){
var item = args[i];
switch (typeOf(item)){
case 'element': elements.push(item); break;
case 'string': Slick.search(this.document, item, elements);
}
}
return elements;
});
//</1.2compat>
if (window.$$ == null) Window.implement('$$', function(selector){
if (arguments.length == 1){
if (typeof selector == 'string') return Slick.search(this.document, selector, new Elements);
else if (Type.isEnumerable(selector)) return new Elements(selector);
}
return new Elements(arguments);
});
CONCLUSION
Depending on the amount of work that has to be done to adapt the "popup window" of Mootools, it may be a better idea to look for something equivalent in jQuery, or if you have the time and knowledge, adapt it so that there are no conflicts, be it with JavaScript Vanilla, jQuery or Mootools.