Сохранение данных через AJAX

Я использую SonataAdminBundle с пользовательским eeditAction.

Это действие отображает нормальный объект, который я редактирую, плюс календарь (полный календарь)

Это должно использоваться в качестве системы бронирования заказов.

Проблема, с которой я сталкиваюсь, заключается в добавлении назначений. Когда я добавляю первую встречу, все идет хорошо. Он сохраняет объект, закрывает форму и добавляет событие в календарь, не обновляя страницу.

Если я затем попытаюсь повторно добавить встречу и сохранить ее, как я сделал ранее, она добавит 2 назначения.

Если я попытаюсь добавить еще один, он добавит 3, и 4 и так далее.

Я очень смущен, почему это делается.

Мой код выглядит следующим образом:

Javascript:

        function ShowEventPopup(date)
        {
            $('#popupEventForm').show();
        }

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

        $myCalendar = $('#calendar').fullCalendar({
            firstDay: 1,
            contentHeight: 450,
            editable: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month, basicWeek, basicDay'
            },
            events: '{{ path('fetch_events', { _sonata_admin: 'bm.crm.admin.event'} ) }}',
            dayClick: function (date, allDay, jsEvent, view) {
                $('#event_name').val("");

                ShowEventPopup(date);

                $('#EventForm').submit(function(event)
                {
                    event.preventDefault();

                    var url = Routing.generate('create_event', { 'id': {{ object.id }} , _sonata_admin: 'bm.crm.admin.event' });
                    var form = $(this);

                    // ajax call
                    $.post(url, form.serialize(), function(data) {

                                if(data.code == "OK") {
                                    var due_date_month = form.find('#event_due_date_month').val();
                                    var due_date_day = form.find('#event_due_date_day').val();
                                    var due_date_year = form.find('#event_due_date_year').val();
                                    var event_name = form.find('#event_name').val();
                                    var due_date = due_date_year+"-"+due_date_month+"-"+due_date_day;

                                    // refresh the calendar
                                    var myNewEvent = {
                                        "title": event_name,
                                        "start": due_date,
                                        "end": due_date
                                    };

                                    $('#calendar').fullCalendar("renderEvent", myNewEvent, true);

                                } else {
                                    alert("NOT SAVED");
                                }
                    });
                });
            }
        });

edit.html.twig

        <form id="EventForm" class="well" method="post" {{ form_enctype(formEvent) }}>
        {{ form_errors(formEvent) }}
        <div>
             {{ form_errors(formEvent.name) }}
             {{ form_label(formEvent.name) }}
             {{ form_widget(formEvent.name) }}
        </div>

         <div class="due_date">
             {{ form_errors(formEvent.due_date) }}
             {{ form_label(formEvent.due_date) }}
             {{ form_widget(formEvent.due_date) }}
         </div>

         <div>
              {{ form_errors(formEvent.due_time) }}
              {{ form_label(formEvent.due_time) }}
              {{ form_widget(formEvent.due_time) }}
         </div>

         <div class="modal-footer">
              <button type="button" id="btnPopupClose" class="btn btn-default" data-dismiss="modal">Close</button>
              <input type="submit" id="btnPopupSave" value="Add Appointment" />
         </div>

         {{ form_row(formEvent.__token)}}
         </form>

editAction()

    $form = $this->createForm(new EventType() );

    if($request->isMethod('post')) {
        $form->submit($request);

        if($form->isValid()) {

            $msg = "Success!";
            $code = "OK";

            // save values
            $em->persist($event);
            $em->flush();

        } else {
            $validator = $this->container->get('validator');
            $errors = $validator->validate($event);
            $msg = "<ul>";
            foreach ($errors as $err) {
                $msg.= "<li>".$err->getMessage() . "</li>";
            }
            $msg .= "</ul>";
            $code = "ERR";

        }

        // return values back to the view
        $response = new Response(json_encode(array('code' => $code, 'msg' => $msg)));
        $response->headers->set('Content-Type', 'application/json');
        return $response;

    }

Форма загружается через twitter bootstrap modal. Кажется, что проблема заключается в том, когда я закрываю модальный, а затем снова открываю его, он, похоже, повторно передает форму n раз.

Есть ли способ destroy модальный, чтобы форма не постоянно повторно отправляла данные?

благодаря