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> 

Теперь я хочу сделать что-то вроде блокировки кнопки или поля сообщения представить «только для чтения», пока вы не получите ответа/успех, так что вы не» у меня есть возможность, чтобы нажимать submit много раз, чтобы он вставлял alot .. (я знаю, что вы можете сделать php для проверки после двойных в БД)

Итак: когда вы нажимаете на submit, поле и/или кнопку отправки только для чтения

Как мне это сделать?

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'); 
     } 
    }); 
} 

Включена и отключена кнопка. nice и easy :)

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().

Просто выбросить это с другим кодом инициализации, вероятно, в $ (документ) .ready():

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

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

Answer 5

Вы можете использовать, например, JQuery плагин BlockUI из http://jquery.malsup.com/block/ (см демо на http://jquery.malsup.com/block/#element и http://jquery.malsup.com/block/#demos) ,

Если div со всеми элементами форм, которые вам нужно блокировать имеет идентификатор formDiv, то вы можете позвонить

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

Перед jQuery.ajax и вызвать

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

в качестве первой линии в обоих success и error обработчик jQuery.ajax.