web-dev-qa-db-ja.com

AJAX成功後にモーダルウィンドウを閉じる方法

モーダルを開くボタンがありますが、背景またはESCキーをクリックして、モーダルを閉じません。

私のボタンは次のようになります。

<button data-toggle="modal" data-target="#CompanyProfile"data-backdrop="static" data-keyboard="false">Click </button>

JQueryを使用して$.ajax成功後にこのモーダルを閉じるにはどうすればよいですか？

いくつかのテストを実行しました-モーダルは閉じましたが、バックグラウンドがロックされ、ページを更新するまで何もできません

javascriptjqueryajaxtwitter-bootstrap
11
Rimaz

bootstrap= modalを閉じるには、次のように 'hide'をオプションとしてmodalメソッドに渡すことができます。

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

このコードをajaxの成功の中で使用します。

フィドルデモ

19
Rino Raj

リストされた汎用メソッドがないように見えるため、このソリューションを追加します。

成功時にモーダルを閉じたいが、サーバーへの各$ .ajax呼び出しを手動で作成したくない場合は、次を使用できます。

$('.modal form').on('submit', function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serializeObject(),
        contentType: 'application/json',
        beforeSend: function(xhr){xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")},
        success: function(data) {
            console.log(data.success);
            if(data.success===1) {
                // loop through all modal's and call the Bootstrap
                // modal jQuery extension's 'hide' method
                $('.modal').each(function(){
                    $(this).modal('hide');
                });
                console.log('success');
            } else {
                console.log('failure');
            }
        }
    });
});

余談ですが、上記のコードをコピー/貼り付けとして使用する場合は、フォームデータを取得してサーバーに投稿するためにJSONに変換するか、$(this).serializeObject()を$(this).serialize()：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    o = { request: o };
    return o;
};

参照： Bootstrap JS Modal

1
Kraang Prime

あなたは次のようなものを試すことができます

 $( document ).ready(function() {               
        $(".btn").button().click(function(){         // button click

                $('#CompanyProfile').modal('show')   // Modal launch
                     $.ajax({
                              type: "POST",
                              url: "url",
                              data:{data:data},
                              cache: false,                         
                              success: function(data) { 
                                                  $('.text').html(data); 
                                                 }
                   })                          
         });   
  });

モーダルが一度だけ起動されることを確認してください

1
S.Maina

以下のようなものを試すことができます。テストされていないが、あなたはアイデアを得るでしょう。

$.ajax({
  url: 'yourscript.php',
  data: $('form#yourForm').serialize(),
  type: 'post'
}).done(function(response) { 
  // trigger modal closing here since ajax is complete.
});
0
Ben

モーダルを定義します：

  <div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>Waiting</strong>
            </div>
            <div class="modal-content">
                <div>
                    Please don't close your tab!
                </div>
                <div class="d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <strong>Loading...</strong>
            </div>
        </div>
    </div>
</div>

次に、関数createを使用します。

var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
    console.log("trigger show");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
    console.log("trigger");
    $("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
    console.log("event");
    $(e.currentTarget).off('shown');
    $(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");

}

私のアイデアは、ajaxの成功後、関数StopLoadingAnimationを呼び出して、要素btnCloseModalのイベントクリックをトリガーすることです（モーダルを閉じるときにボタンbtnCloseModalをクリックするようなものです）

0
TrungNgo