web-dev-qa-db-fra.com

Comment fermer une fenêtre modale après AJAX

J'ai un bouton qui ouvre un modal mais j'ai empêché la fermeture du modal en cliquant sur le fond ou sur la touche ESC.

Mon bouton ressemble à ceci:

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

Comment fermer ce modal après $.ajax succès avec jQuery?

J'ai fait quelques tests - le modal s'est fermé mais le fond est verrouillé, et je ne peux rien faire avant d'avoir rafraîchi la page

javascriptjqueryajaxtwitter-bootstrap
11
Rimaz

Pour fermer bootstrap modal, vous pouvez passer 'hide' en option à la méthode modale comme suit.

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

Utilisez ce code dans le succès ajax.

Démo de violon

19
Rino Raj

Ajout de cette solution car il ne semble pas y avoir de méthode générique répertoriée.

Si vous souhaitez fermer un modal en cas de succès, mais ne souhaitez pas créer à la main chaque appel $ .ajax au serveur, vous pouvez utiliser ce qui suit:

$('.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');
            }
        }
    });
});

En passant, si vous cherchez à utiliser le code ci-dessus comme copier/coller, vous aurez besoin des éléments suivants qui prennent la forme de données et les convertissent en JSON pour publication sur le serveur, ou changez la $(this).serializeObject() en $(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;
};

Référence: Bootstrap JS Modal

1
Kraang Prime

Vous pouvez essayer quelque chose comme

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

Assurez-vous que le modal n'est lancé qu'une seule fois

1
S.Maina

Vous pouvez essayer quelque chose comme ci-dessous. Non testé mais vous aurez l'idée.

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

Je définis mon modal:

  <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>

alors j'utilise la fonction 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");

}

Mon idée est après le succès ajax est d'appeler la fonction StopLoadingAnimation ce qui déclenchera l'événement cliquez sur l'élément btnCloseModal (comme vous cliquez sur le bouton btnCloseModal lorsque vous fermez le modal)

0
TrungNgo