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.