Как мне связать свою функцию Jquery с кнопкой asp.net и при этом разрешить валидацию и PostBack? - PullRequest
Новая
       6

Как мне связать свою функцию Jquery с кнопкой asp.net и при этом разрешить валидацию и PostBack?

1 голос
/ 22 сентября 2009

Теперь я могу пойти по этому пути неправильно, поэтому, если есть лучшее решение, пожалуйста, напишите об этом. То, что я пытаюсь сделать, это отключить кнопку, когда она нажата, чтобы предотвратить двойной щелчок. В прошлом я просто отключал кнопку по нажатию кнопки мыши, но с веб-формами я столкнулся с небольшим затруднением, потому что на странице есть проверка, поэтому мне нужно ее запустить и мне нужно отправить обратно.

Итак, у меня есть следующая функция JQuery, позволяющая отключить кнопку при нажатии. Вот JQuery: 

jQuery.fn.disableOnClick =
    function()
    {
        return this.each(function()
        {
            $(this).click(function()
            {
                $(this).attr('disabled', 'disabled');
                return true;
            })
        })
    };

Предполагаемое использование будет: 

$(document).ready(function()
{
    $("#<%= btnSomeButton.ClientID %>").disableOnClick ();
});

Это не работает ... кнопка всегда отключается, проверка игнорируется и обратная передача даже не происходит. Я бы предположил, потому что я перезаписал обработчик кликов. Предложения?

ОБНОВЛЕНИЕ: Я попробовал просто базовую функцию, которая связана с 'OnClientClick' кнопки, чтобы сделать: 

// In my Page_Load
btnSomeButton.OnClientClick = "return DisableButton('" + btnSomeButton.ClientID + "');";

// Javascript function
function DisableButton(id)
{
    var bButton = $("#" + id);
    if (Page_ClientValidate())
    {
        $("#" + id).attr('disabled', 'disabled');
        __doPostBack(id, '');
    }
}

Это работает, как и ожидалось, при настройке не главной страницы, но когда я пытаюсь использовать ее со страницей с главной страницей, происходит обратная передача, и запускается Page_Load, но обработчик нажатия кнопки никогда не вызывается. Это похоже на то, что __doPostBack не посылает, какое управляющее событие должно сработать правильно.

Любые предложения по изменениям или даже совершенно другой подход?

Ответы [ 4 ]

1 голос
/ 11 ноября 2009

Не пробовал, но что-то вроде этого: 

$("input[type=submit]").live("click", function() {
$(this).hide().clone().insertAfter(this).show().attr("disabled", "disabled").val("Please wait...");
    return true;
});

Это обеспечит отключение кнопки отправки, которая не нравится ASP.NET.

1 голос
/ 22 сентября 2009

У меня такое чувство, что вы можете использовать GetPostBackEventReference , чтобы сделать реальную обратную передачу после того, как вы сделали танец проверки.

Редактировать Ой, забыл вторую половинуОтвет: -)

Что касается двойной обратной передачи, я использовал Обратная передача Ritalin от Дейва Уорда в прошлом, чтобы ограничить этих надоедливых гиперактивных пользователей.

1 голос
/ 22 сентября 2009

Добавьте это к вашему коду запуска ( готовое событие обработчик): 

var elemButton = $('#<%= Button1.ClientID %>');
var fnExistingHandler = elemButton[0].onclick;
elemButton[0].onclick = function() 
{ 
  fnExistingHandler(); 
  if (!Page_BlockSubmit) 
  {
    $(this)
      .hide()
      .after('<input type="button" value="Please Wait..." disabled="disabled" />');
  }
};

По сути, вы добавляете новый код в существующий обработчик кликов. Обратите внимание на проверку глобальной переменной Page_BlockSubmit.

Вместо того, чтобы отключить кнопку отправки, вы можете спрятать ее и сразу же вставить вместо нее отключенную кнопку. Поскольку это происходит очень быстро, это выглядит как отключение кнопки для пользователя. Подробности в блоге Джоша Стодола .

Редактировать : исправлена ​​проверка клиента.

1 голос
/ 22 сентября 2009

Одна идея для другого подхода (отказ от ответственности: это не полностью запеченное решение) состоит в том, чтобы перейти от действия отправки формы вместо обработчика нажатия кнопки.

Проверка все происходит через обработчик отправки формы. Если все получилось, форму можно отправить. Если бы вы могли подключиться к этому процессу, то, когда форма начала отправлять по-настоящему, вы можете найти все кнопки с классом DisableOnSubmit и отключить их.

Однако проверка может занять некоторое время, и некоторым людям (досадно), кажется, нравится дважды щелкать веб-формы, поэтому может быть лучше смешать подходы. Немедленно отключите кнопку с помощью обработчика щелчков, затем, если проверка не пройдена, снова включите отключенные кнопки.

РЕДАКТИРОВАТЬ В ответ на комментарии

Это описание можно сделать более похожим на сигнатуру в вопросе (где любая кнопка может быть сделана нажатием одной кнопки независимо от ее классов CSS).

Создайте расширитель jQuery, в котором кнопкам, которые соответствуют селектору, предоставляется обработчик onClick и (если это еще не сделано) хук добавляется к завершению проверки. Обработчик onClick добавляет нажатую кнопку в коллекцию кнопок «в настоящее время находится в оценке кликов». Если проверка прошла успешно, форма отправляется нормально. Если проверка не пройдена, кнопки в коллекции снова включаются и удаляются из коллекции.

Для панелей злых обновлений вы можете захотеть определить эти события с помощью живых привязок (раньше это был плагин, но я думаю, что теперь это часть ядра jQuery в зависимости от используемой версии), так что обработчики событий перерегистрируются после завершения частичной обратной передачи.

...