在Ajax发布后更新事件

Question

我正在尝试更新ajax帖子之后的事件来更改事件的标题并给它一个类,以便我可以更改它的颜色.我还想告诉我的JSON源中的事件是否被批准,如果是,则更改其颜色.我在下面评论了我的代码:

升级代码:

$(document).ready(function () {

var liveDate = new Date();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();






var calendar = $('#calendar').fullCalendar({
    disableDragging: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'year'
    },


    eventClick: function (calEvent, jsEvent, view, eventid) {

        var eventid = calEvent.id;
        var start = calEvent.start;
        var end = calEvent.end;
        var fullname = calEvent.fullname;


        var fancyContent = ('<div class="header">approve booking for ' + eventid + calEvent.title + '<a href="#" class="approve" id="' + eventid + '">yes</a><a href="#" class="approve">no</a></div>');
        $.fancybox({
            content: fancyContent
        });

        var getid = $('.approve').attr('id');

        // approve function

        $('.approve').click(function (calEvent, jsEvent, view, getid) {
            var getid = $('.approve').attr('id');


            if ($(this).html() == "yes") {

                // AJAX post to insert into DB 

                $.post("ajax.php", {
                    action: 'approve',
                    eventid: getid,
                    color: 'green'
                },

                function (data) {
                    var fancyContent = ('<div class="header"><p>' + data.msge + '</p></div>');
                    $.fancybox({
                        content: fancyContent
                    });
                }, "json");

              // attemping to add class to event to change color, this does not work

                $('#calendar').fullCalendar('clientEvents', calEvent).addClass('fc-event-updated');


              // trying to get id from last updated event so I can change it but this also does not work

                var eventObject = $('#calendar').fullCalendar('clientEvents', eventid);

                if (eventObject != null) {
                    eventObject.title = fullname + ' approved';
                    eventObject.color = 'green';


                    $('#calendar').fullCalendar('updateEvent', eventObject);
                }


            } else {
                // close fancybox

                $.fancybox.close();

            } // end of  if

        }); // end of approve click


    },

    selectable: true,
    selectHelper: true,
    select: function (start, end, allDay, approved, title) {


        // disable booking dates in the past

        if (liveDate > start) {
            var fancyContent = ('<div class="header">Canot book dates in the past</div>');
            $.fancybox({
                content: fancyContent
            });

            return false;

        } else {

            // get user to confirm selection

            var fancyContent = ('<div class="header">Book the following days off</div>Start Time: </b></label>' + $.fullCalendar.formatDate(start, "yyyy-MM-dd") + '<br>' + '<label><b>End Time: </b></label>' + $.fullCalendar.formatDate(end, "yyyy-MM-dd") + '<br>' + '<label><a href="#" class="button">yes</a><a class="button" href="#">no</a></div>');
            $.fancybox({
                content: fancyContent
            });


            $('.button').click(function () {

                if ($(this).html() == "yes") {

                    // ajax to insert into DB 

                    $.post("ajax.php", {
                        start: $.fullCalendar.formatDate(start, "yyyy-MM-dd"),
                        end: $.fullCalendar.formatDate(end, "yyyy-MM-dd"),
                        action: 'add',
                        userid: userid
                    },

                    function (data) {

                        // render event an insert id generated from query

                        calendar.fullCalendar('renderEvent', {
                            id: data,
                            title: fullname + 'pending approval',
                            start: start,
                            end: end,
                            className: 'unapproved'
                        },

                        false // make the event "stick"     

                        );


                    }, "json");

                    // close fancybox

                    $.fancybox.close();


                } else {
                    // close fancybox

                    $.fancybox.close();

                } // end of  if

            });


            //if ajax post successful then show booking on page - not sure how to get value from previous fancybox

        } // end liveDate > start else

        calendar.fullCalendar('unselect');
    },
    editable: true,


    eventSources: [

    // event sources from json

    {
        url: 'json-events.php',
        type: 'POST',
        error: function (data) {
            alert('there was an error while fetching events!' + data.msge);
        },


    // if event is approved = 1 then change color and title of event. This does not work

        success: function (data) {
            var event = data.approved;

            if (data.approved == "1") {

                var title = title + "approved";
                var className = "approved";

            } else {

                var title = title + "awaiting approval";

                var className = "unapproved";

            }
        }

    }



    ]



});

});

Answer 1

我通过从日历中删除过时的事件并使用更新的信息重新创建它来解决这个问题.

注意:只需确保为每个事件分配唯一ID,以避免不必要的行为.

这是一个例子:

$('#calendar').fullCalendar( 'removeEvents', [5] );

$('#calendar').fullCalendar( 'renderEvent', {
    id: 5,
    title: 'Some Title',
    start: '2013-03-30',
    end: '2013-03-30',
    className: 'fancy-color'
}, true );