Plugin Jquery blockUI ne fonctionne pas avec ajax

Je souhaite bloquer la page en cours lorsqu'un appel ajax est faite et l'utilisation d'un blockUI comme une boîte de message. Je ne peut pas utiliser de $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

Mon code est le suivant..

bc.find('.submit').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('lock'))
        return;
    $.blockUI();
    $(this).addClass('lock');
    bc.submit();
});

var validator;
validator = bc.validate({
    ignore: '',
    rules: {
        UserName: {
            required: true
        }
    },
    messages: {
        UserName: 'must have',
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/yyyy/xxxx',
            type: 'POST',
            data: postdata,
            complete: function () {
                bc.find('.submit').removeClass('lock');
            },
            success: function (data) {
                if (data.status == 'OK') {
                    $.blockUI({ message: 'OK' });
                    ......
                }
                else {
                    switch (data.status) {
                        case 'xxx':
                        ......
                    }
                    $.unblockUI();
                }
            },
            error: function () {
                $.unblockUI();
                alert('xxx');
            }
        });
    }
});

Le scénario, c'est que lorsque je clique sur le .submit bouton, la page est bloquée et un appel ajax est effectuée sur le serveur pour obtenir une réponse de données. Lors de l'appel ajax est un succès, j'ai débloquer la page en cours et si les données.le statut est "OK", j'affiche une boîte de message (également basé sur blockUI plugin). D'autre-je afficher une erreur sur la page en cours, puis le débloquer.

Modifier à 2016, il y a une édition qui changent la question du sens(peut-être à cause de ma mauvaise en anglais en ce moment), j'ai roulé revenir ici, et de le rendre plus clair, merci de ne pas changer de nouveau ci-dessous.

Mais en fait, seulement après l'appel ajax est terminé (debug étape sur le code de la ajax complete handler), voir:

  1. première $.blockUI(); exécutée
  2. exécuter $.blockUI({ message: 'OK' }) ou pas
  3. puis $.unblockUI() être appelé

(Ci-dessus est ce que je veux dire anormale de l'exécution de la séquence de chrome ou firefox, outil de débogage dans la réponse.parce que blockui code ne doit pas être exécuté après ajax complète)

Ce n'est pas ce que je veux, et je ne peux pas comprendre cela.

Vous pouvez grandement simplifier votre code à l'aide de ajaxBlockUI voir stackoverflow.com/a/28358070/460084

OriginalL'auteur Mithril | 2012-09-26