multiple scripts in javascript

Question

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?

Answer 1

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.