Добавить поле input в GridView и передавать кол-во по Ajax

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
remix
Сообщения: 59
Зарегистрирован: 2018.01.01, 18:24

Добавить поле input в GridView и передавать кол-во по Ajax

Сообщение remix »

Приветствую всех!

Хочу добавить новую колонку "Количество" в таблицу GridView. В этой колонке должен показываться "input", который и будет принимать количество и передавать их в корзину по нажатии кнопки "Купить".

1) Прошу Вас посмотрите правильно ли я реализовал поле input в GridView.
2) У меня в таблице товара есть 2 колонки первая Количество с input, а вторая колонка называется Купить с кнопкой. Кнопка "Купить" добавляет товар в корзину через Ajax и она 100% рабочая. Но хочу реализовать, чтобы и количество клиент сразу вводил перед добавлением товара в корзину. А с этим беда :shock: при передаче данных через Ajax количество из input не попадает в корзину и хоть тресни - не знаю что делать...

Код колонки "Количество" с полем Input: ПРОШУ Проверьте

Код: Выделить всё

[ 
            'label'=>'Кол-во',
            'format'=>'raw',
            'headerOptions' => ['width' => '50'], 
            'value' => function($model, $key, $index, $column){                 
                return Html::input(
                 'text', 'кол-во', 
                 $value = '1', 
                 [
                 'class' => 'qty', 
                 'id' => $model->id, 
                 'data-pjax'=>true,
                 'action'=>Url::to(['cart/add']),
                 'style' => 'width:40px; border-radius:1px;padding-left:3px;',
                 ]); 
            }
],
Код поля Input в HTML документе формируется так:

Код: Выделить всё

<input type="text" id="271" class="qty" name="кол-во" value="1" action="/cart/add" data-pjax="" style="width:40px; border-radius:1px;padding-left:3px;">
Код колонки "Купить" с кнопкой: Код рабочий и добавляет товар, но количество из input не цепляет

Код: Выделить всё

[               
'header'=>'Купить',
'format' => 'raw',
'value' => function($model, $key, $index, $column) {
  return Html::a(
   '<i class="fa fa-shopping-cart"> Купить</i>',
  Url::to(['cart/add', 'id' => $model->id]),
        [
        'data-id' => $model->id,
        'data-pjax'=>true,
        'action'=>Url::to(['cart/add']),
        'class'=>'btn-sm btn-success gridview-add-to-cart',
        ]
  );
}
],
Код JavaScript: код рабочий

Код: Выделить всё

$('body').on('click', '.gridview-add-to-cart', function (e) {
 		e.preventDefault();
 		var id = $(this).data('id'),
 			qty = $('#qty').val();
 		$.ajax({
 			url: '/cart/add',
 			data: {id: id, qty: qty},
 			type: 'GET',
 			success: function(res){
 				if(!res) alert('Данные не верны!'); 				
 				showCart(res);
 			},
 			error: function(){
 				alert('Ошибка!');
 			}
 		});
 	});
Код кнопки "Купить" + поле "Input" на любой странице товара: код рабочий

Код: Выделить всё

<span>											
	<a href="<?= \yii\helpers\Url::to(['cart/add', 'id' => $product->id])?>" data-id="<?= $product->id?>" class="add-to-cart-button">
	<i class="fa fa-cart-plus"></i> Купить</a><br>
	<b>Количество:</b> <input type="text" value="1" class="qty" id="qty" />											
</span>
Может у кого найдётся решение проблемы - прошу Вашей поддержки.
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Добавить поле input в GridView и передавать кол-во по Ajax

Сообщение andku83 »

$('#qty').val() - выполните в консоли на любой странице где работает добавление товара и потом на странице с вашим гридВью
remix
Сообщения: 59
Зарегистрирован: 2018.01.01, 18:24

Re: Добавить поле input в GridView и передавать кол-во по Ajax

Сообщение remix »

shnir писал(а): 2018.02.21, 16:06 $('#qty').val() - выполните в консоли на любой странице где работает добавление товара и потом на странице с вашим гридВью
Честно не понимаю. Я посмотрел в консоли что в обычных товарах прикрепляется к ссылке еще и qty=44 или qty=99 и тд ...
Но когда я в ГридВью делаю - qty нет либо qty=1 других значений нет.

В первом случае виден товар (строки) id=456, qty=1 передается в корзину Но в Ajax запросе /cart/add?id=259:

Код: Выделить всё

'class' => 'qty', 
'id' => $model->id, 
Во втором случае id товара нет, но передается qty=1 И в Ajax запросе /cart/add?id=260&qty=1:

Код: Выделить всё

'class' => 'qty', 
'id' => 'qty', 
Что всё-таки не так ? не понимаю ...
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Добавить поле input в GridView и передавать кол-во по Ajax

Сообщение andku83 »

судя по всему вам нужно сначала разобраться что делает эта конструкция - $('#qty')
andku83
Сообщения: 988
Зарегистрирован: 2016.07.01, 10:24
Откуда: Харьков

Re: Добавить поле input в GridView и передавать кол-во по Ajax

Сообщение andku83 »

ну и по идее вот так должно заработать

Код: Выделить всё

    [
        'label'=>'Кол-во',
        'format'=>'raw',
        'headerOptions' => ['width' => '50'],
        'value' => function($model, $key, $index, $column){
            return Html::input(
                'text', 'кол-во',
                $value = '1',
                [
                    'class' => 'qty',
                    'data-pjax'=>false,
                    'style' => 'width:40px; border-radius:1px;padding-left:3px;',
                ]);
        }
    ],
    [
        'header'=>'Купить',
        'format' => 'raw',
        'value' => function($model, $key, $index, $column) {
            return Html::a(
                '<i class="fa fa-shopping-cart"> Купить</i>',
                '#',
                [
                    'data-id' => $model->id,
                    'data-pjax'=>false,
                    'class'=>'btn-sm btn-success super-add-to-cart',
                ]
            );
        }
    ],

Код: Выделить всё

$('body').on('click', '.super-add-to-cart', function (e) {
 		e.preventDefault();
 		var id = $(this).data('id'),
 			qty = $(this).closest('tr').find('input.qty').val();
 		$.ajax({
 			url: '/cart/add',
 			data: {id: id, qty: qty},
 			type: 'GET',
 			success: function(res){
 				if(!res) alert('Данные не верны!'); 				
 				showCart(res);
 			},
 			error: function(){
 				alert('Ошибка!');
 			}
 		});
 	});
remix
Сообщения: 59
Зарегистрирован: 2018.01.01, 18:24

Re: Добавить поле input в GridView и передавать кол-во по Ajax

Сообщение remix »

Спасибо большое за поддержку! Ваш код работает на все 100% :D :D :D

Правда чтобы он заработал на GridView + Pjax код у меня такой вышел на VDS сервере:


Код: Выделить всё

[
                  'label'=>'Кол-во',
                  'format'=>'raw',
                  'headerOptions' => ['width' => '50'],
                  'value' => function($model, $key, $index, $column){
                      return Html::input(
                          'text', 'кол-во',
                          $value = '1',
                          [
                              'class' => 'qty',
                              'data-pjax'=>false,
                              'style' => 'width:40px; border-radius:1px;padding-left:3px;',
                          ]);
                  }
              ],
              [
                  'header'=>'Купить',
                  'format' => 'raw',
                  'value' => function($model, $key, $index, $column) {
                      return Html::a(
                          '<i class="fa fa-shopping-cart"> Купить</i>',
                          Url::to(['cart/add', 'id' => $model->id]),
                          [
                              'data-id' => $model->id,
                              'data-pjax'=>true,
                              'action'=>Url::to(['cart/add']),
                              'class'=>'btn-sm btn-success super-add-to-cart',
                          ]
                      );
                  }
              ],
А код Ajax такой же как показано в вашем примере.
Ответить