Показать сообщение отдельно
  #9 (permalink)  
Старый 01.03.2015, 02:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Так примеры есть и по ссылке. Ну если не понятно как их задействовать конкретно к кнопке и полю ввода, то можно поступить например так - поля input, это поля вне формы, если не подразумевается добавление N-товаров с одной страницы, то есть запрос на добавление, это добавление только одного товара. Пусть все товары на странице отображаются в списке, и элемент UL имеет id "products", в нем, а не по всей странице и нужно искать кнопки инициализирующие запрос сервера:

<ul id="products">
    <li><input type="number" name="pid[100]" value="1" min="1"> <button></button></li>
    <li><input type="number" name="pid[212]" value="1" min="1"> <button></button></li>
</ul>


Поле выбора количества товара лучше сделать типа number - в Opera, Chrome, в последнем FF такое поле будет иметь кнопки. Старые браузеры будут "понимать" такое поле как text. Имя поля, это ключ содержащий идентификатор товара, в примере равен pid. На сервере идентификатор можно получить так: (int)key($_POST['pid']).

Кнопки добавления по умолчанию, это что-то кругленькое, с иконкой корзины к примеру, а по нажатию кнопке добавляется класс "send", при котором изображение кнопки изменятся на gif-анимацию, крутилку указывающую что идет обмен с сервером.

На время запроса сервера нужно блокировать запросы на добавление товара, а по окончании снимать блокировку. Это можно сделать с помощью двух методов jQuery - ajaxStart и ajaxStop, которые можно привязать к любою объекту. В итоге получится, что-то такое:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function toBasket(o) {
    $.post('url', o.attr('name')+'='+o.val(), function(d) {
        //d содержит ответ сервера
        //удаляем анимацию у кнопки
        o.next().removeClass('send');
    })
}

$(function() {
    var add = $('#products').find('button');
    add.click(function() {
        //добавляем анимацию кнопке и передаем количество товара серверу
        toBasket($(this).addClass('send').prev())
    }).on({
        ajaxStart: function() {
            //блокируем отправку 
            add.prop('disabled', 1)
        },
        ajaxStop: function() { 
            //разрешаем отправку
            add.prop('disabled', 0) 
        }   
    });
});
</script>


PS. Подправил, совершенно из головы вылетел идентификатор товара )

Последний раз редактировалось laimas, 01.03.2015 в 05:21.
Ответить с цитированием