Ajax微調器即使顯示它的功能也不會被調用（在有ajax調用之後）

Question

我在AJAX調用中使用微調器。我在一個函數內部實現了綁定代碼，所以我可以隨時使用它，並避免使用微調器的某些AJAX調用。例如，我有一個用戶名和電子郵件存在檢查onkeyup，顯然我不想讓微調只要按下一個鍵就顯示。

但是，如果客戶端驗證完成，例如在註冊頁面觸發ajax調用，並且發送錯誤，則用戶名和電子郵件將開始顯示微調器，只要一個鍵被按下。

下面是代碼：

HTML

<div id="spinner" class="spinner hidden"> 
    <img id="img-spinner" src="<?php echo base_url(); ?>/images/spinner.gif" alt="Loading"/> 
</div> 

屏蔽功能

function show_hide_loading_mask() { 
     $("#spinner").bind("ajaxSend", function() { 
      $(this).show(); 
      $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead 
     }).bind("ajaxStop", function() { 
      $(this).hide(); 
      $.unblockUI(); 
     }).bind("ajaxError", function() { 
      $(this).hide(); 
      $.unblockUI(); 
     }); 
    } 

表單提交，電話

$('#frmMyForm').submit(function(){ 
     if (validate()) { 
     show_hide_loading_mask(); 

     $.ajax({ 
      type: "POST", 
      url: "ajax/path", 
      data: $('#frmMyForm').serialize(), 
      dataType: "json", 

      success: function(data){ 
       if (data.response == "OK") { 
        console.log('OK'); 
       } else { 
       console.log('NOT OK'); 
       } 
      }, 
      error: function(xhr, textStatus, errorThrown) { 
       console.log('Exception...'); 
      } 
     }); 
    } else { 
     console.log('client side validation failed'); 
    } 
    return false; // do not actually submit 
    }) 

驗證功能：

function validate() { 
    var param1 = $('#txtParam1').val(); 
    var param2 = $('#txtParam2').val(); 
    return param1.length >= 5 && param2.length >= 5 //return true when both are at least 5 chars long 
} 

任何想法爲什麼在旅行到服務器後發生這種情況？當有ajaxStop時，應該再次禁用。

謝謝。

Answer 1

我不確定你應該在微調器的div上綁定ajaxStop事件。

你想做些什麼可以利用.ajaxError()和/或.ajaxComplete()被acomplished。

Answer 2

我找到了解決方案。問題在於，一旦函數被調用，它將繼續與ajax函數綁定。

通過對ajax函數進行命名可以解決這個問題。我現在有兩個功能：

function show_loading_mask() { 
    $(document).bind("ajaxStart.showSpinner", function() { 
     $('#spinner').show(); 
     $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead 
    }); 

    $(document).bind("ajaxStop.showSpinner", function() { 
     $('#spinner').hide(); 
     $.unblockUI(); 
    }); 

    $(document).bind("ajaxError.showSpinner", function() { 
     $('#spinner').hide(); 
     $.unblockUI(); 
    }); 
} 

function no_loading_mask() { 
    $(document).unbind('.showSpinner'); 
} 

然後在每個ajax調用之前，我都會相應地調用上面的方法。這樣，我只向那些需要的ajax調用顯示微調。