Fullcalendar duplicating record inserted into database

Asked

Viewed 432 times

2

I’m using the fullCalendar to register for events.
But the following happens, if I click on a specific day appears a modal with form for me to save the data in the database, so far so good it inserts in the database.
But if I click on one day of the calendar and then on any other day for later I register the event it registers the data with the date of the previous day that I clicked and generates a blank record with the other date clicked.

Can someone shed some light on this please?

Below is the code I’m using:

NOTE: I tried to remove the Ubmit event from the form inside the select:function(){} but it didn’t work because I need the variables that come as parameter (start,end) which are the dates that are recorded in the bank.

$(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();
});
php jquery fullcalendar

  • Why did you register another question? http://answall.com/questions/54944/erro-ao-registerevento-fullcalendar

  • Why I could not comment on the previous question, I kept appearing a message that I needed points and as I am newly registered here, I do not understand yet how the forum works in this question of points

  • I still think the problem is this Ubmit event. Since you need the parameters, try saving them in an Hidden field in the form just before opening the modal. Then when it’s time to submit, you take the value of these fields.

  • Lucas, it worked out what you said, I take it now and I always pass the values pro form and then I can save correctly, thank you very much for the help.

  • Good. I’ll add an answer

  • You can accept the answer. How and why to accept an answer?

Show 1 more comment

1 answer

1

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

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

Browser other questions tagged php jquery fullcalendar

You are not signed in. Login or sign up in order to post.