несколько сценариев в JavaScript

Question

у меня есть этот код для выбора даты

<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>

У меня также есть этот код для диалогового окна, которое показывает, когда поле пусто.

<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>

проблема в том, что я не могу заставить их работать вместе? Как я могу сделать несколько сценариев для работы на одной странице?

Answer 1

Предполагая ваш

<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

Строка

создана специально для Datepicker, и в нее уже не включена структура диалога, включите ее после

<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>

линии.

Тогда измени свой

$(function() {
        $("#dialog2").dialog({...});
}

способ выглядеть так

$(function() {
    $("#dialog2").dialog({...});
    $('#datetime').datepicker({...});
}

Не зная, как выглядит ваша фактическая разметка, это должно сработать.