jQuery fullCalendar + всплывающее окно Fancybox для редактирования события - PullRequest
Новая
       19

jQuery fullCalendar + всплывающее окно Fancybox для редактирования события

2 голосов
/ 04 апреля 2011

Я генерирую события в fullCalendar с этим кодом 

<script type="text/javascript">

$(document).ready(function() {

    $('#calendar').fullCalendar({
        // put your options and callbacks here
            header: {
                right: 'today month,agendaWeek,agendaDay prev,next'
            },
            events: [
                    <?php foreach($cal_data as $row): ?>
                            {   
                          title : '<?php echo $row->plant_name . ' ' . $row->value_2; ?>',
                          start : '<?php echo $row->date . ' ' . $row->time; ?>',
                          allDay: false,
                          url   : '<?php echo base_url() . 'events/events_edit/' . $row->record_id; ?>'
                            },
                    <?php endforeach; ?>
                    ],

    });
});
</script>

Это прекрасно работает для отображения данных. Когда я нажимаю на событие, новая страница загружается для редактирования.

Теперь мне нужно отредактировать внутри всплывающего окна jQuery Fancybox.

Основываясь на API fullCalendar, я бы использовал 

eventClick: function(event) {
        if (event.url) {
            window.open(event.url);
            return false;
        }
    }

Я использую этот код Fancybox по всему проекту для успешного редактирования других вещей во всплывающих окнах: 

$.fancybox({
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'ajax',
    'href': link,
    'onClosed': function() {
        parent.location.reload(true);
    }
});
$.bind("submit", function() {

    $.fancybox.showActivity();

    $.ajax({
        type: "POST",
        cache: false,
        data: $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });
    return false;
});

Но я не смог интегрировать его в скрипт fullCalendar.

Например, это не работает: 

eventClick: function(event) {
        if (event.url) {
    $.fancybox({
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
            return false;
        }
    }

Любые предложения, как это сделать?

Большое спасибо за помощь!

Ответы [ 2 ]

7 голосов
/ 04 апреля 2011

Теоретически ваш код выглядит так, как будто он будет работать.Но вы говорите своему fancybox открыть неопределенную переменную link, вместо этого используйте event.url.Кроме того, вместо использования parent.location.reload(this), который здесь немного тяжелее (вы можете добавлять события на лету, поэтому нет необходимости перезагружать всю страницу) , вы можете покончить с onClosed()event: 

eventClick: function(event) {
    if (event.url) {
        $.fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'ajax',
            'href': event.url
        });
        .....................

Затем в вашем методе .ajax() s success вы можете вернуть строку json со своей events/events_edit/ страницы (содержащую новые данные события в том же стиле, что и выдобавьте, когда страница загрузится) , затем в методе успеха используйте fullcalendars addEventSource и передайте объект json для добавления в callendar: 

$.ajax({
    type: "POST",
    cache: false,
    data: $(this).serializeArray(),
    success: function(data) {
        // Add the event:
        $('#calendar').fullCalendar('addEventSource', data);
        // Close the fancybox window:
        $('#fancy_close').trigger('click'); 
    }
});

Его труднопротестируйте все это без предварительной настройки, но это может дать вам некоторые идеи, чтобы указать вам правильное направление.

0 голосов
/ 10 ноября 2015

После успеха вам просто нужно отобразить это событие в календаре. 

success:function(rep)  
                    {  
                        var response_array = rep.split('|::|');  
                        if(response_array[0] == 'Error')    
                        {  
                        //alert(response_array[1]);  
                         $('#error').show();  
                         $('#error').html(response_array[1]);  
                       $('#error').fadeOut(3000);  
                      }  
                      if(response_array[0] == 'Success')  
                      {            
                       //alert(response_array[1]);  
                         // Close the fancybox window:  
                         $('#fancy_close').trigger('click');    
                        $("#calendarinfo").fullCalendar('renderEvent', {                            title: $('#title').val(),  
                                start: $datdata+" "+$hrsdata+":"+$mnsdata+":00 GMT+0000",
                            },true);  

                      }  
                    }
...