multiple scripts in javascript
i have this code for a datetime picker
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/timepicker.js"></script>
<script type="text/javascript">
$(function() {
$('#datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
</script>
i also have this code for a dialog box that shows when a field is empty.
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
<script type="text/javascript">
function haha(form) {
if(document.getElementById('in').checked || document.getElementById('off').checked) {
if(form.title.value=='' || form.nature.value=='' || form.start_date.value=='' || form.end_date.value=='' || form.hour1.value=='' || form.min1.value=='' || form.ampm1.value=='' || form.hour2.value=='' || form.min2.value=='' || form.ampm2.value=='' || form.venue.value=='' || form.rationale.value=='' || form.objectives.value=='' || form.description.value=='' || form.target.value=='' || form.monitoring.value=='') {
hello();
return false;
}
else{
开发者_开发技巧 return true;
}
}
else {
hello();
return false;
}
}
$(function() {
$("#dialog2").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
resizable: false,
draggable: false,
height:160,
width:260,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
function hello() {
$("#dialog2").dialog('open');
}
function getElem(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}
function printToPage(id,content,classname) {
var el = getElem(id);
if (!el) return;
if (el.style) {
el.innerHTML = content;
if (classname) el.className = classname;
}
else if (el.document) {
var SPANstr = (classname) ? '<span class="' + classname + '">' : '<span>';
el.document.write('haha');
el.document.close();
}
}
</script>
the problem is i can't seem to make them work together? how can i make multiple scripts to work in a single page?
Assuming your
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
line is built specifically for the Datepicker, and doesn't already include the dialog framework in it, include it after the
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="external/bgiframe/jquery.bgiframe.js"></script>
lines.
Then change your
$(function() {
$("#dialog2").dialog({...});
}
method to look like this
$(function() {
$("#dialog2").dialog({...});
$('#datetime').datepicker({...});
}
Without knowing what your actual markup looks like, this should work.
精彩评论