How to include mootools js files?
Question
I have a website with a huge part of js functions I wnat to add a login form from mootools. I added the form and the needed files it works but the other site is stop I know it is javascript conflict this is my header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="tr" >
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script language="javascript" type="text/ecmascript">
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
</head>
The script is for the mootools and the needed files are commented. I get this error when I run the site:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
and:
Uncaught TypeError: Object function (B,C){if(B&&B.$family&&B.uid){return B;}var A=$type(B);return($[A])?$[A](B,C,this.document):null;} has no method 'ajax'
Do anybody could help me to know if I should change the order of the JS files or is there anything I could do to stop conflict??
PS: When I change the place of the mootools file in the header I get different messages.
2 answers
solution1
1 2013-06-29 06:49:04
Replace $ with jQuery For example, instead of using
$("div p").hide() use jQuery("div p").hide(); instead
http://api.jquery.com/jQuery.noConflict/
Aslo try this
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
solution2
0 2013-06-29 08:59:09
Try to replace order your mootool js and jquery scripts and check again?
Example
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
Try using this, Your codes
<!--Site CSS-->
<link href="include-css/SCOREMIX.css" rel="stylesheet" type="text/css" />
<!--///// MOOTOOLS /////-->
<!-- Mootools - the core -->
<script type="text/javascript" src="include-js/mootools12.js"></script>
<!-- MooSlide (show/hide login form) -->
<script type="text/javascript" src="include-js/mooSlide2-moo12.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content:'loginPanel', close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
//optional: AutoStart the slider on page load:
//MyLogin.run();
$('close').addEvent('click', function(e){
e = new Event(e);
myLogin.clearit();
e.stop();
});
});
</script>
<!--///// JQUERY /////-->
<!-- Latest Jquery Lib-->
<script type="text/javascript" src="include-js/jquery-1.8.3.js"></script>
<!--News scroller-->
<script type="text/javascript" src="include-js/jscroller-0.4.js"></script>
<!--timer for ticking at live games and to update information each minute-->
<script type="text/javascript" src="include-js/jquery_timer.js" ></script>
<!-- MY JS FILES-->
<script type="text/javascript" src="include-js/functions.js"></script>
<script type="text/javascript" src="include-js/script.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
// jquery scripts
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.