Блокировка действия

[meta]

Всем добрый день.

Делаем интернет-магазин, на странице товара после добавления товара в корзину, появляется кнопка "перейти в корзину" с ссылкой на страницу с корзиной, но добавление срабатывает не сразу и возникает вероятность того что пользователь может кликнуть несколько раз по кнопке и тогда добавиться больше одного товара.

Подскажите как можно заблокировать кнопку после первого клика и возобновить её действие после того, как кнопка с ссылкой исчезнет?

Есть идея с помощью setInterval, задать через долю секунды отключение клика, потом его включить, после исчезновения кнопки с ссылкой.

Вот код:

function addToShoppingCart(productId) {
   NopSolutions.NopCommerce.Web.Services.OrderService.addtoshoppingcard(productId, productAdded, productAddingError);
}

function productAdded(result) {
   if (result.Error.length > 0) {
       alert(result.Error);
   }
   else {
       document.getElementById('miniShoppigCartLabel').innerHTML = result.ShoppingCartLabel;
       updateButtons(result.ProductId, result.StockQnty);
       showGoToBasketButton();
   }
}

function productAddingError(result) {
   alert(result.get_message());
}

function updateButtons(productId, qnty ) {
   if (qnty <= 0) {
       document.getElementById('btnAddToCart').style.display == "none";
       document.getElementById('btnPreOrder').style.display = "block";
       document.getElementById('pnlPreOrderMessage').style.display = "block";
   }
}

function showGoToBasketButton() {
   if (document.getElementById('GotoBasket').style.display == "none")
   { document.getElementById('GotoBasket').style.display = "block"; }
   if (document.getElementById('buyMessage').style.display == "none") {
       document.getElementById('buyMessage').style.display = "block";
   }
   setTimeout("hideButton('GotoBasket')", 4000)
}
function hideButton(GotoBasket) {
   if (document.getElementById('GotoBasket').style.display == "block") {
       document.getElementById('GotoBasket').style.display = "none";
   }
}

Вот ссылка: http://demo.arammu.ru/products/1-fashion-%...6%D0%BE-12.aspx

[sigma77]

meta,

Ссылка не рабочая.

А как реализована сама кнопка? Если формой, то можно, например, при клике добавлять к кнопке атрибут disabled. А после срабатывания функции добавки товара, убирать его.

Ну и можно еще индикатор какой-нибудь добавить, чтобы показать, что процесс идет.

Edited July 19, 2011 by sigma77

[meta]

Нет, кнопка реализована блоком - div.

вот ссылка:

http://demo.arammu.ru/products/1-fashion-%D0%BA%D0%BE%D0%BB%D1%8C%D1%86%D0%BE-12.aspx

[Great Rash]

Подменить кнопку аналогичной по виду, но без события на ней. Метод cloneNode именно это и делает, насколько я знаю.

Т.е. действия такие:

1. юзер кликает на кнопку
   
2. мы клонируем ноду и прячем оригинал
   
3. после того как инфа добавилась уничтожаем клона и вновь показываем оригинал
   

[meta]

Ни разу им не пользовалась, где можно почитать как он применяется?

[Int]

http://w3schools.com/dom/dom_nodes_clone.asp

[SelenIT]

А почему бы просто не воспользоваться той же самой проверкой видимости кнопки про корзину (if (document.getElementById('GotoBasket').style.display == "none") {...) при вызове ф-ции добавления?

[meta]

Так она должна быть видима, но не кликабельна

[SelenIT]

Я понял так, что по клике на первую кнопку появляется вторая и видна пока идет процесс добавления, всё это время некликабельной должна быть первая кнопка. Это не так?

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

[meta]

В общем, вот как идет процесс:

кликается первая кнопка и начинается добавление товара, после того как он стал добавлен появляется вторая с ссылкой, которой задано время её видимости (4 сек), а проблема в том что процесс добавления не всегда сразу срабатывает, и соответственно вторая кнопка не сразу появляется, и в это время пользователь может ещё несколько раз кликнуть по первой, что приведет ещё к добавлению товара, поэтому надо заблокировать кнопку на время добавления товара

[SelenIT]

Понятно, значит, вторая кнопка к блокировке ни при чем. Ну а вариант с отдельной переменной-флагом чем плох?