發布成功后執行jQuery代碼

Question

我正在設計一個Web應用程序，該Web應用程序將Twitter引導程序用於前端框架，將Laravel用於后端框架。

我創建了一個存在於Twitter引導程序模式中的表單（請參閱http://getbootstrap.com/javascript/#modals ），並且我試圖利用AJAX提交表單數據而不離開頁面。

現在，我的表單可以使用以下代碼來做到這一點：

jQuery(function ($) {
   $('form[data-async]').on('submit', function (event) {
       var $form = $(this);
       var $target = $($form.attr('data-target'));

   $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),

        success: function (data, status) {
            $target.html(data);
        },

        error: function () {
            alert("Please check your submission and try again.");
        }
    });

    event.preventDefault();
});
});

如果AJAX發布成功，我將嘗試關閉模式，但我似乎無法完成。 我嘗試使用：

$('#createTicket').modal('hide');

但這會導致腳本出於某種原因離開頁面。

如果成功的話，有人會知道如何進行模式隱藏/切換嗎？ 如果您需要更多代碼，請告訴我。

Answer 1

在要傳遞到表單的提交處理程序中的event對象上調用preventDefault和stopPropagation方法：

event.preventDefault();
event.stopPropagation();

Answer 2

我確實需要確定您的html。 嘗試將此屬性添加到您的表單標簽。

<form onSubmit='return false;'>

Answer 3

由於您使用過event.preventDefault()並且還使用.moadl('hide')方法，因此它應該可以工作，但是很可能您遇到了JavaScript錯誤（請檢查瀏覽器控制台），因此它不起作用，但是您可以使用以下方法，並且應該管用：

$('form[data-async]').on('submit', function (event) {
    event.preventDefault();
    var $form = $(this);
    var $target = $($form.attr('data-target'));
    // Cache a reference of your modal form
    var createTicket = $('#createTicket');

    $.ajax({
        //...
        success:function(data){
            createTicket.modal('hide');
            // ...
        }
    });
});