jQuery：雖然ajax請求塊元素

Question

所以我在JS中有這個功能，發送一個請求來插入一個新的狀態消息到數據庫。

function DoStatusInsert(){ 
    var wrapperId = '#statusResponseNow'; 
    $.ajax({ 
     type: "POST", 
     url: "misc/insertStatus.php", 
    data: { 
    value: 'y', 
    uID : $('#uID').val(), 
    message : $('#message').val() 
    }, 
     success: function(msg){ 
    $('#message').val(""); 
    $('#statusResponse').toggle(); 
    $(wrapperId).prepend(msg); 
    $(wrapperId).children().first().fadeIn('slow'); 
     } 
    }); 
} 

如果是這種形式：

<input name="message" type="text" id="message" value="" size="60"> 
<input type="hidden" name="uID" id="uID" value="<?php echo $v["id"]; ?>"> 
<input name="submit" type="submit" id="submit" value="Spara"> 
<div id="statusResponseNow"></div> 

現在我希望做這樣的事情阻止提交按鈕或消息字段設置爲「只讀」，直到收到響應/成功，所以你不」沒有機會喜歡新聞提交很多次，所以它插入很多..（我知道你可以做一個PHP檢查雙數據庫後）

所以：當你點擊提交然後它使任一消息字段和/或提交按鈕只讀

我應該怎麼做？

Answer 1

function DoStatusInsert(){ 
    $('#IdOfYourSaveButton').attr('disabled', 'disabled'); 
    var wrapperId = '#statusResponseNow'; 
    $.ajax({ 
     type: "POST", 
     url: "misc/insertStatus.php", 
     data: { 
     value: 'y', 
     uID : $('#uID').val(), 
     message : $('#message').val(), 
     success: function(msg){ 
      $('#IdOfYourSavebutton').removeAttr('disabled'); 
      $('#message').val(""); 
      $('#statusResponse').toggle(); 
      $(wrapperId).prepend(msg); 
      $(wrapperId).children().first().fadeIn('slow'); 
     } 
    }); 
} 

啓用和禁用按鈕。好和容易:)

Answer 2

我最初的想法。將插入

$（ '輸入[類型=提交]'，這一點）.attr（ '禁用'， '禁用'）;

在ajax調用開始之前，然後使用ajax請求的成功函數刪除禁用的屬性。

Answer 3

在調用函數，設置按鈕的禁用屬性，然後設置成功。

function DoStatusInsert(){ 
$('#submit').attr("disabled", "true"); 

var wrapperId = '#statusResponseNow'; 
    $.ajax({ 
     type: "POST", 
     url: "misc/insertStatus.php", 
    data: { 
    value: 'y', 
    uID : $('#uID').val(), 
    message : $('#message').val() 
    }, 
     success: function(msg){ 
     $('#message').val(""); 
     $('#statusResponse').toggle(); 
     $(wrapperId).prepend(msg); 
     $(wrapperId).children().first().fadeIn('slow'); 
     $('#submit').attr("disabled", "false"); 
     } 
    }); 
} 

Answer 4

手動切換按鈕的禁用狀態的作品不夠好，但jQuery有幾個幫手事件做出更好一點：.ajaxStart()和.ajaxStop()。您可以在提交按鈕上使用這兩個處理程序，而不必擔心在$ .ajax（）請求周圍維護該手動代碼。

只需用其他初始化代碼在$扔這，大概（文件）。就緒（）：

$('#submit').ajaxStart(function() { this.disabled = true; }); 

$('#submit').ajaxStop(function() { this.disabled = false; }); 

Answer 5

您可以從http://jquery.malsup.com/block/例如使用jQuery的BlockUI插件（見演示上http://jquery.malsup.com/block/#element和http://jquery.malsup.com/block/#demos） 。

如果有，你需要屏蔽所有表單元素div具有ID formDiv，那麼你可以調用

jQuery('#formDiv').block({ message: '<h1>Just a moment...</h1>' }); 

jQuery.ajax前兩個success調用

jQuery('#formDiv').unblock(); 

作爲第一行和errorjQuery.ajax的處理程序。