FullCalendar duplicating record inserted in the database

2

I'm using fullCalendar to make an event log. But the following happens, if I click on a specific day a modal appears with form for me to save the data in the database, until then, it's okay to insert it into the database. But if I click on one calendar day and then another on whatever it is for later I register the event it records the data with the date from the previous day that I clicked and generates a blank record with the other date clicked. >

Can anyone give me a light on this please?

Here is the code I'm using:

NOTE: I have already tried to remove the submit event from the form from within select:function(){} but it did not work since I need the variables that come as parameter (start,end) which are the dates that are saved in the database.

$(document).ready(function() {
    var currentLangCode = 'pt-br';
    // build the language selector's options
    $.each($.fullCalendar.langs, function(langCode) {
        $('#lang-selector').append(
            $('<option/>')
            .attr('value', langCode)
            .prop('selected', langCode == currentLangCode)
            .text(langCode)
            );
    });

    // rerender the calendar when the selected option changes
    $('#lang-selector').on('change', function() {
        if (this.value) {
            currentLangCode = this.value;
            $('#calendar').fullCalendar('destroy');
            renderCalendar();
        }
    });

    function renderCalendar() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: Date(),
            selectable: true,
            selectHelper: false,
            select: function(start, end) {
                $("#myModal").modal('show');
                $("#eventForm").on('submit',function() {
                    var dados = $(this).serialize();
                    $.ajax({
                        type: "POST",
                        url: "eventos.php",
                        data: dados+"&start="+start.format("YYYY-MM-DD HH:mm:ss")+"&end="+end.format("YYYY-MM-DD HH:mm:ss"),
                        dataType: 'json',
                        success: function( data )
                        {
                            console.log(data);
                            /*var eventData;
                            if (data.title) {
                                if (start.format("hh:mm:ss") == end.format("hh:mm:ss")) {
                                    eventData = {
                                        title: data.title,
                                        start: start.format("YYYY-MM-DD"),
                                        end: end.format("YYYY-MM-DD"),
                                        content: data.content
                                    };
                                }else{
                                    eventData = {
                                        title: data.title,
                                        start: start,
                                        end: end,
                                        content: data.content
                                    };
                                }
                                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                            }*/
                            $('#calendar').fullCalendar('unselect');
                        }
                    });
                    this.reset();
                    $("#myModal").modal("hide");
                    $('#calendar').fullCalendar('unselect');
                    return false;
                });
            },
            eventClick: function(event) {
                $(this).popover({html:true,title:event.title,placement:'top',container:'body',content: event.content}).popover();
            },
            lang: currentLangCode,
            buttonIcons: false, // show the prev/next text
            weekNumbers: true,
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            events: {
                url: 'fullcalendar/demos/php/get-events.php',
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
            }
        });
    }
    renderCalendar();
});
    
asked by anonymous 19.03.2015 / 18:57

1 answer

1

The problem is that the submit event is within the select event. So it will create multiple calls as you click on the calendar.

Remove all $("#eventForm").on('submit',function() { ... from within select . Create 2 fields input type="hidden" in form and, before opening modal, save start and end in those fields. When submitting the form, the values will be sent.

    
20.03.2015 / 19:42