CODEWITHSUNDEEP
javascriptphpjqueryajaxfullcalendar
Sangsom
Sangsom

Reputation: 257

jQuery FullCalendar how to show data after ajax call without refreshing page

I'm trying to integrate jQuery FullCalendar with PHP and MySQL.. Problem for me is that when i'm inserting new event with by selecting day(s) with AJAX I don't know how to show this newly added event without refreshing page.. So basically this is the FullCalendar call:

var calendar = $('#calendar').fullCalendar({

    editable: true,
    firstDay: 1,

    header: {
        left: 'month, agendaWeek, agendaDay',
        center: 'title',
        right: 'prev, next, today'
    },

    // receive events from DB
    events: {
        url: 'events.php',
        type: 'POST',
        cache: false,
        error: function() {
            alert('ERROR');
        }
    },

    buttonIcons: {
        prev: 'left-single-arrow',
        next: 'right-single-arrow'
    },

    // Convert the allDay from string to boolean
    eventRender: function(event, element, view) {
        if (event.allDay === 'true') {
            event.allDay = true;
        } else {
            event.allDay = false;
        }

        element.find('.fc-event-title').append("<br/>" + event.description);
    },

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

        var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
        var end   = moment(end).format("YYYY-MM-DD HH:mm:ss");
        var user_id = <?php echo $_SESSION['user_id']; ?>

        // to unix
        start = moment(start).unix();
        end = moment(end).unix();

        $('#myModal').modal({
            remote: 'modals/add_event.php?start='+start+'&end='+end+'&id='+user_id
        });

    }           

});

The place where I'm doing event insertion is:

select: function(start, end, allDay) {

    var start = moment(start).format("YYYY-MM-DD HH:mm:ss");
    var end   = moment(end).format("YYYY-MM-DD HH:mm:ss");
    var user_id = <?php echo $_SESSION['user_id']; ?>

    // to unix
    start = moment(start).unix();
    end = moment(end).unix();

    $('#myModal').modal({
        remote: 'modals/add_event.php?start='+start+'&end='+end+'&id='+user_id
    });

}

It's opening modal dialog where I'm submitting calendar data and afterwards submitting data to DB via AJAX.. And after this point I can't figure out how to show newly added data without refreshing page.. Any help here?

Additionally: this is my AJAX call when submitting modal dialog form:

$.ajax({
    type : "POST",
    url : "ajax/add_event.php?start="+start.unix()+'&end='+end.unix()+'&id='+user_id,
    data : $("#smart-form-event").serialize(),
    success : function(data, status, xhr) {
        $.smallBox({
            title : "Event added successfully",
            content : "<i class='fa fa-exclamation'></i> <i></i>",
            color : "#659265",
            iconSmall : "fa fa-check fa-2x fadeInRight animated",
            timeout : 4000
        });
        $("#myModal").modal('hide');
    }
});

Thank you!

Upvotes: 4

Views: 4237

Answers (3)

Abdallah Arffak
Abdallah Arffak

Reputation: 1193

You can call "refetchEvents" after you inserting new event http://fullcalendar.io/docs/event_data/refetchEvents/

$('#calendar').fullCalendar('refetchEvents');

...
success : function(data, status, xhr) {
        $.smallBox({
            title : "Event added successfully",
            content : "<i class='fa fa-exclamation'></i> <i></i>",
            color : "#659265",
            iconSmall : "fa fa-check fa-2x fadeInRight animated",
            timeout : 4000
        });
        $("#myModal").modal('hide');
        $('#calendar').fullCalendar('refetchEvents');
    }
...

Upvotes: 3

Muhammad Bilal
Muhammad Bilal

Reputation: 1152

Please try this.





$('#calendar').fullCalendar('destroy');

  $('#calendar').fullCalendar({
                header: {

                    left: 'prev,next today',
                    center: 'title',strong text
                    right: 'month,basicWeek,basicDay'

                    //,agendaWeek,agendaDay
                },


                defaultView: 'month',
                editable: true,


                events: myevents



            });

Upvotes: 1

wayzz
wayzz

Reputation: 627

Try adding return false;

$.ajax({
    type : "POST",
    url : "ajax/add_event.php?start="+start.unix()+'&end='+end.unix()+'&id='+user_id,
    data : $("#smart-form-event").serialize(),
    success : function(data, status, xhr) {
        $.smallBox({
            title : "Event added successfully",
            content : "<i class='fa fa-exclamation'></i> <i></i>",
            color : "#659265",
            iconSmall : "fa fa-check fa-2x fadeInRight animated",
            timeout : 4000
        });
        $("#myModal").modal('hide');
    }
});

return false;

The return false; must be inside the submit function.

$('form').submit(function(e){

    $ajax({...});

    return false;

});

Upvotes: 1

Related Questions