multiple js script

[claro]

Greetings!

Is the order of my external and internal js has something to do with the effectiveness of my code? I asked it because my datepickerUI tools didn't work when I started to integrate it with other script, but when I tried in a single page it does.

<script src="date/jquery-1.7.1.js"></script>
	<script src="date/jquery.ui.core.js"></script>
	<script src="date/jquery.ui.widget.js"></script>
	<script src="date/jquery.ui.datepicker.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.placeholder.js"></script>
	<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript">
		window.addEvent('domready', function(){
	                $('registerForm').addEvent('submit', function(e) {
	                    new Event(e).stop();
	                    var log = $('log_res').empty().addClass('ajax-loading');
	                    this.send({
	                        update: log,
	                        onComplete: function() {
	                            log.removeClass('ajax-loading');
	                        }
	                    });
	                });
	            });
	</script>
<script>
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	</script>

[chris.upjohn]

The problem is that your using Mootools and jQuery which both take advantage of the $ variable, to release jQuery from it read though the following documentation http://api.jquery.com/jQuery.noConflict/

[paul_wilkins]

There are details on how to handle this in post #102 of our tips and techniques sticky thread.

[claro]

did I get it right? seems like everything is new to me.

<script type="text/javascript">
		window.addEvent('domready', function(){
	                $('registerForm').addEvent('submit', function(e) {
	                    new Event(e).stop();
	                    var log = $('log_res').empty().addClass('ajax-loading');
	                    this.send({
	                        update: log,
	                        onComplete: function() {
	                            log.removeClass('ajax-loading');
	                        }
	                    });
	                });
	            });
	</script>
	<script>jQuery.noConflict();</script>
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
	});
	</script>

[paul_wilkins]

did I get it right?

Not quite. Once you issue the noconflict command, jQuery no longer has access to the global $ argument. Instead, you have to use the jQuery object instead, and provide $ as an argument so that you can then use that from within the function.

For example:

jQuery.noConflict();
jQuery(function ($) {
    // jQuery's $ can be used in here, due to the function argument
    ...
});

[claro]

I did not still get it.

<script>
jQuery.noConflict();
jQuery(function($) {
$( "#datepicker" ).datepicker();
});
</script>

[chris.upjohn]

Do you have a link we can use to see the code in action as i feel like there is more then just this one conflict that's causing your resource issues.

[claro]

As much as I want it, I don't have it as of now. I tried it in other page, datepicker works, when I integrate it with mootols it doesn't work now. I really believed that the problem that jquery and mootols can't work at the same timee, because when I comment out the mootols, datepicker works. Below is my actual code.

<script src="date/jquery-1.7.1.js"></script>
<script src="date/jquery.ui.core.js"></script>
<script src="date/jquery.ui.widget.js"></script>
<script src="date/jquery.ui.datepicker.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('registerForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>
<script>
jQuery.noConflict();
jQuery(function ($){

$(function() {
$( "#datepicker" ).datepicker();
})
};
</script>

[chris.upjohn]

What you have above currently won't work as you don't have a closing ) on };, also what you do have now is redundant as your wrapping a DOM ready function within a DOM ready function which is running 2 DOM ready events instead of one. What you posted before my previous post should be working fine regardless of whether Mootools exists in the page or not, unless we can get a demo of the demo it's really difficult to see what the actual issue is. The only other thing i can offer is you try the following code which makes use of a custom jQuery reference.

$jq = jQuery.noConflict();
 
$jq(function($) {
    $( "#datepicker" ).datepicker();
});

[claro]

I hope posting my entire code would help.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Student</title>
<meta http-equiv="refresh" url="stud_new.php"/>
<link rel="stylesheet" href="date/demos.css">
<link rel="stylesheet" href="date/jquery.ui.all.css">
<script src="date/jquery-1.7.1.js"></script>
<script src="date/jquery.ui.core.js"></script>
<script src="date/jquery.ui.widget.js"></script>
<script src="date/jquery.ui.datepicker.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('registerForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>
<script>
$jq = jQuery.noConflict();
$jq(function($) {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<br/>
<br/>
<br/>
<div id="container">
<form method="post" id="registerForm" action="register.php">

<P><strong><LABEL for="Id">Student ID/LABEL></strong>
<input name="Id" type="text" class="input" id="Id" value="" placeholder= "Student ID" required setfocus/></P>

<P><strong><LABEL for="FName">First name/LABEL></strong>
<input name="FName" type="text" class="input" id="FName" value="" placeholder= "First Name" required /></p>

<p><strong><LABEL for="LFame">Last name/LABEL></strong>
<input name="LName" class="input" type="text" id="LName" value="" placeholder= "Last Name" required /></p>

<p><strong><LABEL for="Sex">Gender/LABEL></strong>
<select name = "Sex" class="input" >
<option value = ""><--Select--></option>
<option value = "Male">Male</option>
<option value = "Female">Female</option>
</select></p>

<p><strong><LABEL for="Program">Program</LABEL></strong>
<select name = "Program" class="input" >
<option value = ""><--Select--></option>
<option value = "Day">Day</option>
<option value = "Evening">Evening</option>
<option value = "Sunday">Sunday</option>
</select>
</p>

<p><strong><LABEL for="Course">Course/LABEL></strong>
<input name="Course" class="input" type="text" id="Course" value="" placeholder= "Course"/></p>

<P><strong><LABEL for="Date">Date/LABEL></strong>
<input type="text" id="datepicker" class="input" name= "Date" value = "" ></P>

<P ><input type="image" name="register" class="submit-btn" src="image/submit.png" alt="submit" title="submit" />
</P>


</form>
</div>
<div id="log">
<div id="log_res">
<!-- SPANNER -->
</div>
</div>

</body>
</html>

[chris.upjohn]

Do'h , i completly missed the issue. The problem is your including your Mootools code right between the jQuery library and your jQuery code, if you simply move your jQuery code before the Mootools code but keep the noConflict references it should work fine.

[claro]

Like this? still no work.

<link rel="stylesheet" href="date/demos.css">
<link rel="stylesheet" href="date/jquery.ui.all.css">
<script src="date/jquery-1.7.1.js"></script>
<script src="date/jquery.ui.core.js"></script>
<script src="date/jquery.ui.widget.js"></script>
<script src="date/jquery.ui.datepicker.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script>
$jq = jQuery.noConflict();
$jq(function($) {
$( "#datepicker" ).datepicker();
});
</script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('registerForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});
</script>