Question

我有这个js代码，它迭代一个div并为每个触发一个ajax调用。 ajax调用运行正常。但我想在每个循环中显示和隐藏一个“进度条”。

我的HTML代码是：

<div class="progress progress-striped active" id="waiting" style="display: none">
                <div style="width: 100%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-info">
                    <span class="sr-only">40% Complete (success)</span>
                </div>
            </div>

这个HTML代码很好（因为当我删除样式'display：none'时，我会看到进度条）。

我的js代码是：

$('#btn_valider_paris').click(function() {

    var _token = $('meta[name="_token"]').attr( 'content' );
    var token_parieur = $('#token_parieur').val();

    // @todo : l'animation n'apparait pas , à creuser + tard.
    $('#waiting').show();

    $('#div_liste_questions').children('.form-inline').each(function() {

        // alert('id_question = '+$(this).data('id_question') + ' / ' + $(this).data('id_type_question')    ) ;
        var id_question = $(this).data('id_question');
        var id_type_question = $(this).data('id_type_question');
        var numeric_entier = $(this).find('.numeric_partie_entiere').val();
        var numeric_decimal = $(this).find('.numeric_partie_decimale').val();
        var text = $(this).find('.text').val();
        var match_score_equipe1 = $(this).find('.match_score_equipe1').val();
        var match_score_equipe2 = $(this).find('.match_score_equipe2').val();
        var liste_reponse = $(this).find('.liste_reponse').val();

        jQuery.ajax({
        url: $('#url_for_ajax').val() + '/post_enregistrer_pari_question_ajax',
        type: 'POST',
        dataType: 'json',
        data: {
                _token: _token, 
                token_parieur: token_parieur, 
                id_question: id_question, 
                id_type_question: id_type_question,
                numeric_entier: numeric_entier,
                numeric_decimal: numeric_decimal,
                text: text,
                match_score_equipe1:match_score_equipe1,
                match_score_equipe2:match_score_equipe2,
                liste_reponse:liste_reponse
            },
        success: function (data, textStatus, xhr) {

                if(data.code_retour === -1){
                     toastr["error"](data.texte_retour);
                } 

            }
        });

    });

    $('#waiting').show();


});

$（'#wait'）。show（）和 $（'#waiting）。hide（）根本没有效果。并且在consol中没有错误消息。

我怀疑这些ajax调用的代码有问题。但我不知道是什么。

感谢您的帮助。的Merci

多米尼克

Answer 1

要驱动进度温度计，你需要一些计数器和一些简单的逻辑。

以下是适合您的模式（删除了庞大的代码）：

$('#btn_valider_paris').click(function() {
    var _token = $('meta[name="_token"]').attr( 'content' );
    var token_parieur = $('#token_parieur').val();
    var ajaxCalls = { total:0, complete:0 }; // <<<<< initialize two counters
    $('#div_liste_questions').children('.form-inline').each(function() {
        // var ..., ... etc.
        jQuery.ajax({
            // etc, etc.
        }).then(function(data, textStatus, xhr) {
            if(data.code_retour === -1) {
                toastr.error(data.texte_retour);
            }
        }, function(xhr, textStatus, errorThrown) {
            console.log(textStatus || errorThrown);
        }).always(function() { // .always fires on both success and error.
            ajaxCalls.complete++; // <<<<< count ajax completions asynchronously, as the responses arrive.
            console.log(ajaxCalls.total, ajaxCalls.complete); 
            // Here, set progress thermometer to indicate that "ajaxCalls.complete of ajaxCalls.total" are complete.
            if(ajaxCalls.complete === ajaxCalls.total) {
                $('#waiting').hide(); // <<<<< hide #waiting when all calls are complete.
            }
        });
        ajaxCalls.total++; // <<<<< count ajax calls synchronously, as the calls are made.
    });
    if(ajaxCalls.total > 0) {
        // Here, initialise the progress thermometer to indicate that "0 of ajaxCalls.total" are complete.
        $('#waiting').show();
    } else {
        $('#waiting').hide();
    }
});

特别注意：

ajaxCalls.total在.each()循环
ajaxCalls.complete会异步递增。

Answer 2

它可能是内联样式覆盖它，为什么不在函数中设置状态？

您也可以使用

$('#waiting').css('display','none');
$('#waiting').css('display','block');

Answer 3

你可以使用beforeSend在每次通话之前显示div。

jQuery.ajax({
  url: $('#url_for_ajax').val() + '/post_enregistrer_pari_question_ajax',
  type: 'POST',
  dataType: 'json',
  beforeSend: function( xhr ) {
    $('#waiting').show();
  }
  data: {
     _token: _token, 
     token_parieur: token_parieur, 
     id_question: id_question, 
     id_type_question: id_type_question,
     numeric_entier: numeric_entier,
     numeric_decimal: numeric_decimal,
     text: text,
     match_score_equipe1:match_score_equipe1,
     match_score_equipe2:match_score_equipe2,
     liste_reponse:liste_reponse
    },
    success: function (data, textStatus, xhr) {

      if(data.code_retour === -1){
        toastr["error"](data.texte_retour);
      } 

    }
  });

为什么hide（）和show（）函数在循环中不起作用？

3 个答案: