FullCalendar для загрузки внешнего файла внутри модального диалогового окна jQuery UI - PullRequest
Новая
       15

FullCalendar для загрузки внешнего файла внутри модального диалогового окна jQuery UI

1 голос
/ 31 августа 2010

Итак, я пытаюсь использовать диалоговое окно FullCalendar и jQuery UI. И я не уверен, как правильно расположить 2 вместе.

Когда я выбираю событие пустого дня или щелкаю по нему, я хочу, чтобы появилось диалоговое окно jQuery Modal. ХОТЯ Я бы хотел, чтобы он загрузил внутренний файл (включая php). Но недостатком этого является то, что я не могу заставить его закрыть диалоговое окно, когда получаю форму для отправки

Кроме того, используя этот метод, я не могу получить дату, на которую щелкнул, чтобы автоматически заполнить поле даты начала.

Как лучше всего смешивать в модальном диалоговом окне пользовательского интерфейса jQuery с fullCalendar?

Любая помощь будет оценена. Если возможно, есть ли хороший способ загрузки внешнего файла?

Это то, что у меня сейчас есть: 

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'));

},

Так, как упоминается в моем коде, когда я использую этот код, ничего не обновляется ... но все же, когда я использую функцию ALERT, где я ее прямо сейчас размещаю, и делаю ее действительной ... входные значения обновляется по какой-то причине. Это похоже на то, как если бы функция действовала слишком быстро, чтобы заставить значения применяться, поэтому, когда у меня там остановка оповещения, она заставляет его работать ... какие-нибудь мысли?

Ответы [ 2 ]

2 голосов
/ 10 сентября 2010

Вот как я вызываю диалог и заполняю его: 

    $('#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 и т. Д.).

0 голосов
/ 14 сентября 2010

Возможно, попробуйте вызвать диалог как функцию .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

...