AjaxbeforeSend有時不會觸發以顯示引導進度條-有解無憂

我有 3 個引導選項卡，每個選項卡都有一個顯示查詢結果的表。單擊搜索按鈕或更改選項卡時，將觸發 ajax 呼叫，該呼叫具有beforeSend顯示 Bootstrap 進度條的功能。進度條總是在我第一次加載頁面時顯示，但在那之后只是間歇性的。我似乎無法弄清楚它什么時候顯示，什么時候不顯示。搜索可能需要 5 或 6 秒，因此確實有必要讓用戶知道搜索正在運行。

我看到了一些關于 async:false 導致 chrome 出現問題的執行緒，但我沒有那個設定，這個問題也出現在 Firefox 中。

我還看到了一個關于將 ajax 呼叫包裝在 document.ready 中的執行緒，但是這段代碼是在一個單獨的 .js 檔案中嗎？

好的，功能很長。我把整個事情都放在了以防萬一發生沖突。我嘗試在成功函式中注釋掉多個 ajax 呼叫，并使用 beforeSend 函式運行一個，但問題仍然出現。

如果您有任何解決問題的想法或潛在的解決方法，請告訴我...謝謝！

function submitSearch(method) {
  $("#programCount").html('');
  $("#plotCount").html('');
  $("#treeCount").html('');
  checkdata=validate_input();
  if (checkdata===false) {
     return;
  }
  yearLower= $('#startYr').val();
  yearUpper= $('#endYr').val();
   
  var state=[];
  if(!($('.state_sub_checkbox:checkbox:checked').length === $('.state_sub_checkbox').length)){
      $('.state_sub_checkbox:checkbox:checked').each(function() {
                state.push(this.value);
            });
    }
  var TSN=[];
  var treeSpecies=[];
  if (!($('.species_sub_checkbox:checkbox:checked').length===$('.species_sub_checkbox').length)) {
      $('.species_sub_checkbox:checkbox:checked').each(function() {
 //         species.push(this.value);
          TSN.push(this.value);
          treeSpecies.push($(this).closest("label").text().trim());
      });
  }

  var progList=[];
  var progListNames=[];
  if (!($('.program_sub_checkbox:checkbox:checked').length ===$('.program_sub_checkbox').length)) {
      $('.program_sub_checkbox:checkbox:checked').each(function() {
                progList.push(this.value);
                progListNames.push($(this).closest("label").text().trim());
            }); 
    }    
    
  forestHealth =[];
  if (!($('.FHI_checkbox:checkbox:checked').length===$('.FHI_checkbox').length)) {
      $('.FHI_checkbox:checkbox:checked').each(function() {
          forestHealth.push(this.value);
      });
  }
  crown="";
  if (!($('.crown_checkbox:checkbox:checked').length===$('.crown_checkbox').length)) {
      crown=$('input[name="crown"]:checked').val();
  }
  height=[];
  if (!($('.height_checkbox:checkbox:checked').length===$('.height_checkbox').length)) {
      $('.height_checkbox:checkbox:checked').each(function() {
          height.push(this.value);
      });
  }
  
  tree_status=[];
  if (!($('.tree_status:checkbox:checked').length===$('.tree_status').length)) {
      $('.tree_status:checkbox:checked').each(function() {
          tree_status.push(this.value);
      });      
  }
  
  missingDBH = $('#DBH_missing').prop('checked');
  dbhUpper = $('#endDBH').val();
  dbhLower = $('#startDBH').val();
  missingHeight = $('#height_missing').prop('checked');
  heightUpper = $('#endHeight').val();
  heightLower = $('#startHeight').val();

  var limit=10;  
  var offset="";
  if (method==='ajax_getPrograms') {
      fields = ['pkProgramID','fldName','fldOrganization','fldProgramStartDate','fldProgramEndDate','fldStates'];
      limit=$('#num_results').val();
      offset=$('#program_table_offset').val();
    }
  if (method==='ajax_getPlots') {
      fields = ['programID','lat','long','plotSampleYear','_nefin_plotID', '_nefin_plot_obsID'];  
      limit=$('#num_results_plot').val();
      offset=$('#plot_table_offset').val();      
  }  
  if (method==='ajax_getTrees') {
      fields = ['programID','TSN','treeSpecies','DBH','treeStatus','treeSampleYear','_nefin_plotID','_nefin_plot_obsID','_nefin_treeID','_nefin_tree_obsID'];   
      limit=$('#num_results_tree').val();
      offset=$('#tree_table_offset').val();      
  }
  
  var posturl = baseURL   "data/" method;
  var formData = new FormData();
  if (progList.length>0) {
      formData.append('progList',progList);
      formData.append('progListNames',progListNames);
  }
  if (TSN.length>0) {
      formData.append('TSN', TSN);
      formData.append('treeSpecies', treeSpecies);
  }

  
  if (yearLower!==filters.year_min) {
      formData.append('yearLower', yearLower);

  }
  if (yearUpper!==filters.year_max) {
      formData.append('yearUpper', yearUpper);
  }
  if(!($('.state_sub_checkbox:checkbox:checked').length === $('.state_sub_checkbox').length)){
      formData.append('state', state);
  }
  if (forestHealth.length>0) {
      formData.append('forestHealth',forestHealth);
  }
  if (crown!=="") {
      formData.append('crown',crown);
  }
  if (tree_status.length>0) {
      formData.append('status',tree_status);
  }
  var height_change=false;
  if (heightUpper!==filters.height_max) {
      height_change=true;
      formData.append('heightUpper',heightUpper);
  }
  
  if (heightLower!==filters.height_min) {
      height_change=true;
      formData.append('heightLower',heightLower);
  }
  if (height_change===true || missingHeight===false) {
      formData.append('missingHeight',missingHeight);
  }
  var dbh_change=false;
  if (dbhUpper!==filters.dbh_max) {
      dbh_change=true;
      formData.append('dbhUpper',dbhUpper);
  }
  
  if (dbhLower!==filters.dbh_min) {
      dbh_change=true;
      formData.append('dbhLower',dbhLower);
  }
  if (dbh_change===true || missingDBH===false) {
      formData.append('missingDBH',missingDBH);
  }

   //get options in array for getData variable
  var getData = {};
formData.forEach(function(value, key){
        getData[key] = value;  
});

var getDataJSON = JSON.stringify(getData);

  formData.append('fields',fields);
  formData.append('limit',limit);
  formData.append('offset',offset);
  
updateSearchParamHTML(formData);
  $.ajax({
            url: posturl,
            cache: false,
            data: formData,
            method: 'POST',
            contentType: false,
            processData: false,
            type: 'POST',
            beforeSend: function(){
                $('.progress').show();
                $('.progress-bar').attr('style', 'width: 100%;');

            },
            complete: function(){
                $('.progress').hide();
                $('.progress-bar').attr('style', 'width: 0%;');

            },
            error: function (xhr, status, error) {
                console.log(xhr);
                console.log(status);
                console.log(error);
            },
            success: function (data) {
                var data2 = JSON.parse(data);

                    $('#datasetErrors').removeClass('show');
                    $('#datasetErrors').addClass('hidden');
                    var datasetTable='';
                    
                    $('#getData').val(getDataJSON);

                    if (method==='ajax_getPrograms') {
                        
                        //assemble JSON of programs returned for data download
                        var programArray=[];
//                        console.log(data2);
                        if (data2.data && Object.keys(data2.data).length !== 0) {
                            $.each(data2.data, function (i, d) {
                                programArray.push(d['pkProgramID']);
                            });                       
                        }
                        //console.log(programArray);
                        var projectIDsJSON = JSON.stringify(programArray);
                        $('#projectIDs').val(projectIDsJSON);
                        
                        if (data2.resultCount<limit){
                            $("#program_next_btn").hide();
                        }
                        else {
                            $("#program_next_btn").show();                            
                        }
                        datasetTable = createProgramTable(data2.data);
                        $("#programCount").html('<strong>Your search returned ' data2.resultCount ' program(s) with tree data in our inventory.</strong>');
                        $("#programTable tbody").fadeOut(100, function () {
                            $(this).empty().html(datasetTable).fadeIn(); //Empty content and repopulate
                    });
                }
                if (method==='ajax_getPlots') {                      
                        //console.log(data2);
                        //console.log(programIDs);
                        var programIDs=data2.programIDs;
                        var projectIDsJSON = JSON.stringify(programIDs);
                        $('#projectIDs').val(projectIDsJSON);                        
                        if (data2.resultCount<=limit){
                            $("#plot_next_btn").hide();
                        }
                        else {
                            $("#plot_next_btn").show();                            
                        }
                        datasetTable = createPlotTable(data2.data, data2.fuzzflag);
                        //console.log(data2.fuzzflag);
                        $("#plotCount").html('<strong>Your search returned ' data2.resultCount ' plot observations in our inventory.</strong>');
                        $("#plotTable tbody").fadeOut(100, function () {
                            $(this).empty().html(datasetTable).fadeIn(); //Empty content and repopulate
                    });
                }
                if (method==='ajax_getTrees') {
                        //assemble JSON of programs returned for data download
                        //console.log(data2);
                        var projectIDsJSON = JSON.stringify(data2.programIDs);
                        $('#projectIDs').val(projectIDsJSON);
                       // console.log($('#projectIDs').val());
                        if (data2.resultCount<=limit){
                            $("#tree_next_btn").hide();
                        }
                        else {
                            $("#tree_next_btn").show();                            
                        }                    
                        datasetTable = createTreeTable(data2.data, data2.fuzzflag);
                        $("#treeCount").html('<strong>Your search returned ' data2.resultCount ' tree observations in our inventory.</strong>');
                        $("#treeTable tbody").fadeOut(100, function () {
                            $(this).empty().html(datasetTable).fadeIn(); //Empty content and repopulate
                    });
                }
                $("#download-tab-nav").prop("disabled",false);
                
                //check if we are on the download tab and update downloads if needed
                //console.log ("active tab: " $('#tableTab .active').attr('id'));
                if ($('#tableTab .active').attr('id')=="download-tab-nav"){
                        var programID = $('#projectIDs').val();
                        var posturl = baseURL   "data/ajax_getProgramFiles";
                        var formData = new FormData();   
                        formData.append('programID',programID);
                      $.ajax({
                                url: posturl,
                                cache: false,
                                data: formData,
                                method: 'POST',
                                contentType: false,
                                processData: false,
                                type: 'POST',
                                error: function (xhr, status, error) {
                                    console.log(xhr);
                                    console.log(status);
                                    console.log(error);
                                },
                                success: function (data) {
                                    var data2 = JSON.parse(data);
                                //    var data2=data;
                                //   console.log(data2);
                                   var file_download_div='';
                                   file_download_div = populateFileDownloadDiv(data2);             
                                   $("#fileDownloadDiv").html(file_download_div);
                                   setSelectedFiles();
                                    }
                                });    
                }
                //set hidden field to indicate if any of the programs returned are fuzzed
                var fuzzed=false;
                programArray = $('#projectIDs').val();
                var ajaxurl2 = baseURL   "data/ajax_arefuzzed";
                $.ajax({
                      method: "POST",
                      url: ajaxurl2,
                      data: {data : programArray}
                    })
                      .done(function(data) {
                          var data2 = JSON.parse(data);
                        $('#fuzzPlots').val(data2.fuzzed);
                      });

            }
        });
}

的HTML

<div class="table-responsive">
      <table id="plotTable" class="table table-striped table-centered" style="width:100%">
           <thead>
               <tr>
                 <th>Plot ID</th>
                 <th>Latitude</th>
                 <th>Longitude</th>
                 <th>Sample Year</th>
                 <th>Original Data</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                 <td class="text-center" colspan="5">
                   <div class="progress"> 
                     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                     </div> 
                   </div>                                            
                 </td>
               </tr>
            </tbody>
      </table>
</div>

uj5u.com熱心網友回復：

有兩種方法可以做到這一點：

1. 使用以下代碼概括所有 ajax 請求的進度/加載影片：

// jQuery 1.9 以上

// 參考：http: //jquery.com/upgrade-guide/1.9/#ajax-events-should-be-attached-to-document

$(document).ajaxStart(function() {
  $('.progress').show();
  $('.progress-bar').attr('style', 'width: 100%;');
});

$(document).ajaxStop(function() {
  $('.progress').hide();
  $('.progress-bar').attr('style', 'width: 0%;');
});

2.對你的ajax代碼這樣做：

updateSearchParamHTML(formData);
//Show loader before ajax call starts
$('.progress').show();
$('.progress-bar').attr('style', 'width: 100%;');
$.ajax({
    url: posturl,
    cache: false,
    data: formData,
    .
    .
    .
    //Hide loader in complete call
    complete: function(){
        $('.progress').hide();
        $('.progress-bar').attr('style', 'width: 0%;');
    },

我希望這些對你有用。

uj5u.com熱心網友回復：

通過查看代碼和描述，我了解到您正在尋找一些可進步的選項卡內容，其中資料來自選項卡單擊，直到它沒有出現，進度條應該出現在那里。

您可以在選項卡中添加進度條，并在回傳資料后將其洗掉。檢查以下代碼可能對您有所幫助。

var progressBarHtml = '<div id="progressBar"><div id="myBar"></div></div>';
var progressBarspeed = 10;
var intervalId;
var i = 0;

function showProgress(currentTab) {
    if ($("#progressBar").length > 0) {
        $("#progressBar").remove();
        clearInterval(intervalId);
       i = 0;
    }
    $("#"   currentTab).append(progressBarHtml);
    function move() {
        if (i == 0) {
            i = 1;
            var elem = document.getElementById("myBar");
            var width = 1;
            intervalId = setInterval(frame, progressBarspeed);

            function frame() {
                if (width >= 100) {
                    clearInterval(intervalId);
                    i = 0;
                    OnceProgressBarLoaded(currentTab);
                } else {
                    width  ;
                    elem.style.width = width   "%";
                }
            }
        }
    }
    move();
}

function OnceProgressBarLoaded(currentTab) {

    console.log(currentTab   "Tab data Loaded");
    $("#progressBar").remove();
    //call your response here.
    var dataId = currentTab   'Data';
    $("#"   dataId).show();
}

function openCity(evt, tabId) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i  ) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i  ) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabId).style.display = "block";
    evt.currentTarget.className  = " active";
    $(".tabdata").hide();
    showProgress(tabId);
}

$(document).ready(function() {
    $(".tabdata").hide();
})

 body {font-family: Arial;}
         /* Style the tab */
         .tab {
         overflow: hidden;
         border: 1px solid #ccc;
         background-color: #f1f1f1;
         }
         /* Style the buttons inside the tab */
         .tab button {
         background-color: inherit;
         float: left;
         border: none;
         outline: none;
         cursor: pointer;
         padding: 14px 16px;
         transition: 0.3s;
         font-size: 17px;
         }
         /* Change background color of buttons on hover */
         .tab button:hover {
         background-color: #ddd;
         }
         /* Create an active/current tablink class */
         .tab button.active {
         background-color: #ccc;
         }
         /* Style the tab content */
         .tabcontent {
         display: none;
         padding: 6px 12px;
         border: 1px solid #ccc;
         border-top: none;
         }
         .tabdata {
         background: white;
         }
         #myProgress {
         width: 100%;
         background-color: #ddd;
         }
         #myBar {
         width: 1%;
         height: 30px;
         background-color: #04AA6D;
         }

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <h2>Tabs With Loader</h2>
      <p>Click on the buttons inside the tabbed menu:</p>
      <div class="tab">
         <button class="tablinks" onclick="openCity(event, 'London')">London</button>
         <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
         <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
      </div>
      <div id="London" class="tabcontent">
         <div id="LondonData" class="tabcontent">
            <h3>London</h3>
            <p>London is the capital city of England.</p>
         </div>
      </div>
      <div id="Paris" class="tabcontent">
         <div id="ParisData" class="tabdata">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
         </div>
      </div>
      <div id="Tokyo" class="tabcontent">
         <div id="TokyoData" class="tabdata">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
         </div>
      </div>

uj5u.com熱心網友回復：

發生的事情是，在 ajax 呼叫的成功代碼中，我替換了每個表的 tbody。例如，在 plotTable 中：

$("#plotTable tbody").fadeOut(100, function () {
$(this).empty().html(datasetTable).fadeIn(); //Empty content and repopulate
  });

但是進度條在表格的主體中。因此，當我想將進度條設定為可見時，它不再在表格中。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507483.html

標籤：javascript jQuery 阿贾克斯推特引导

上一篇：引導行無法在移動設備上正確折疊

下一篇：單擊按鈕時更改頁面布局