通过 AJAX 保存数据

Question

我正在使用带有自定义 eeditAction 的 SonataAdminBundle。

此操作显示我正在编辑的普通实体，以及一个日历（完整日历）

这是用作预约系统。

我遇到的问题是添加约会。当我添加第一个约会时，一切顺利。它保存实体、关闭表单并将事件添加到日历而不刷新页面。

如果我像以前一样尝试重新添加约会并保存它，它会增加 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 模态，这样表单就不会不断地重新提交数据？

谢谢

Answer 1

当我想使用引导程序清除/销毁模式时（这是针对版本 > 3，事件的名称不同）

  $('#modal').on('hidden.bs.modal', function () {
    $(this).removeData('bs.modal'); //destroy the binded data every time the box closes
  });

另外

function closeModalBox() {

  $('#modal').modal('hide');
  $('.modal-content').html(''); //reset the content html when closing the modal
}

希望它有所帮助，并且您没有其他奏鸣曲管理捆绑问题；）