代码之家 › 专栏 › 技术社区 › Justin

在jquery用户界面模式对话框中加载外部文件的完整日历

jquery-ui-dialog fullcalendar jquery-ui jquery

Justin · 技术社区 · 16 年前

所以我尝试使用完整日历和jquery用户界面对话框。我不确定如何把这两个放在一起。

当我选择或单击一个空的day事件时,我希望jquery模式对话框弹出。尽管我想让它加载一个内部文件(php include)。但这样做的缺点是,当我得到要提交的表单时,我不能让它关闭对话框。

另外,通过使用这个方法,我无法让它提取我单击自动填充开始日期字段的日期。

将jquery ui模式对话框与完整日历混合在一起的最佳方法是什么?

任何帮助都将不胜感激。如果可能的话,有没有一个好的方法可以加载一个外部文件?

这是我目前拥有的:

select: function(start, end, date, allDay, jsEvent, view, calEvent) {
    $("#addEventDialog").dialog("open");

$("#addEventDialog").load('dialog.CalendarNewEvent.php').dialog({
    title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
           $("#calendarWidget2").ajaxSubmit({
                target: "#calendarResponse",
                dataType: 'json',
                clearForm: true,
                success: function(response, event) {
                    //If the widget says it's okay to refresh, refresh otherwise, consider it done
                    if(response.refreshEvents == '1') {
                      $("#calendar").fullCalendar("refetchEvents");
                    }
                    // Close the dialog box when it has saved successfully
                    $("#addEventDialog").dialog("destroy");
                    // Update the page with the reponse from the server
                    $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

                },
                error: function() {
                    alert("Oops... Looks like we're having some difficulties.");    
                }
          }); // Close ajax submit
        },
        "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons
});

//alert("The inputs will work if i un-comment this alert");

/* UPDATE ALL THE VALUES IN THE DIALOG BOX */
$("#startDate").val($.fullCalendar.formatDate(start, 'yyyy/MM/dd'));
$("#endDate").val($.fullCalendar.formatDate(end, 'yyyy/MM/dd'));

}

所以就像我的代码提到的,当我使用这个代码时,什么都不会更新…但是,当我使用一个警报函数时,我现在就把它放在那里,并使它实际存在…由于某种原因,输入值将得到更新。这几乎就像函数在快速执行以使值适用,所以当我在其中停止警报时,它会使其工作……有什么想法吗?

2 回复 | 直到 16 年前

orolo 16 年前

以下是我如何调用对话框并填充它:

    $('#calendar').fullCalendar({ 
dayClick: function (date, allDay, jsEvent, view) {  
            $("#dialog").dialog('open');     
            $("#name").val("(event name)");
            $("#date-start").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy'));
            $("#date-end").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy'));
            $("#time-start").val($.fullCalendar.formatDate(date, 'hh:mmtt'));
            $("#time-end").val($.fullCalendar.formatDate(date, 'hh:mmtt')); 
    }, 
});

    $("#dialog").dialog({
        autoOpen: false,
        height: 350,
        width: 700,
        modal: true,
        buttons: {
            'Create event': function () {
                $(this).dialog('close');
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        },

        close: function () {
        }

    });

HTML

            <div id="dialog" class="event-dialog" title="Event">
            <div id="dialog-inner">
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all title"><br>
                <span class="inline"><input type="text" name="date-start" id="date-start" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline"><input type="text" name="time" id="time-start" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline">To:</span> <span class="inline"><input type="text" name="date" id="date-end" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline"><input type="text" name="time" id="time-end" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline">&nbsp;All day <input id="all-day" type="checkbox"></span> 
                <!--<label for="description">Description:</label> 
                <textarea name="description" id="description" class="text ui-widget-content ui-corner-all" rows="8" cols="73">       
</textarea>
            </div>
        </div>
        <div id="calendar"></div>

我不能在看不到PHP的情况下与它说话,但它在理论上应该是有效的。您可以看到,这个例子是一个正在进行的工作,没有完全起作用(post、get等)。

orolo 16 年前

可能尝试将dialog作为.load()的函数调用:

 $("#addEventDialog").load("'dialog.CalendarNewEvent.php'", function() {  
          $("#addEventDialog").dialog({  
 title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
           $("#calendarWidget2").ajaxSubmit({
                target: "#calendarResponse",
                dataType: 'json',
                clearForm: true,
                success: function(response, event) {
                    //If the widget says it's okay to refresh, refresh otherwise, consider it done
                    if(response.refreshEvents == '1') {
                      $("#calendar").fullCalendar("refetchEvents");
                    }
                    // Close the dialog box when it has saved successfully
                    $("#addEventDialog").dialog("destroy");
                    // Update the page with the reponse from the server
                    $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

                },
                error: function() {
                    alert("Oops... Looks like we're having some difficulties.");    
                }
          }); // Close ajax submit
        },
        "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons

});

我不确定这是否完全正确,但可能会有所帮助。还有一个帽子提示: http://www.coderanch.com/t/122420/HTML-JavaScript/JQuery-UI-Dialog-load-JavaScript