Изменение значения кнопки с помощью ajax

Общие вопросы по использованию фреймворка. Если не знаете как что-то сделать и это про Yii, вам сюда.
Ответить
Atonaome
Сообщения: 2
Зарегистрирован: 2013.07.25, 10:39
Контактная информация:

Изменение значения кнопки с помощью ajax

Сообщение Atonaome »

Здравствуйте! Есть интернет-магазин, в котором реализовано сравнение товаров. При нажатии на кнопку обновляется страница и в определённом месте выводится количество товаров в сравнении и у добавленного товара значение кнопки с "Добавить в сравнение" меняется на "Убрать из сравнения". Всё это происходит без использования ajax и, соответственно, страница "прыгает" вверх после нажатия на кнопку. Как можно сделать всё это с помощью ajax? Сейчас есть рабочий вариант, но меняется только значение в области, информирующей о количестве товаров в сравнении. Бьюсь над этой кнопкой уже второй день%) Код приведён ниже.
Код формы с кнопкой:

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

<form class="in_collation" method="POST"  id="form-compare-<?php echo $product->id;?>">
        <input type="hidden" value="<?php echo Yii::app()->request->csrfToken; ?>" name="YII_CSRF_TOKEN">
        <input type="hidden" value="<?php echo $product->id;?>" name="product_id">
        <?php 
//проверяю существует ли массив сравнения
if (!empty(Yii::app()->session['compare'])) {
//если существует, то ищу есть ли в нём данный товар и в зависимости от результата проверки вывожу добавить или //убрать из сравнения
            if (in_array($product->id, Yii::app()->session['compare'])) {
                echo CHtml::ajaxSubmitButton('Убрать из сравнения',$this->createUrl('shop/deleteofcompare'), array('type' => 'POST','update' => '#basket',),array('type' => 'submit','class'=>'compare-btn','form'=>'form-compare-'.$product->id
));} else {echo CHtml::ajaxSubmitButton('Добавить в сравнение',$this->createUrl('shop/addtocompare'), array(
'type' => 'POST','update' => '#basket',),array('type' => 'submit','class'=>'compare-btn','form'=>'form-compare-'.$product->id,));};} else {echo CHtml::ajaxSubmitButton('Добавить в сравнение',$this->createUrl('shop/addtocompare'), array('type' => 'POST','update' => '#basket',),array('type' => 'submit','class'=>'compare-btn','form'=>'form-compare-'.$product->id));};
?>
    </form>
Это код области с уведомлением о количестве товаров в сравнении:

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

<div id="choice"><a href="<?php echo $this->createUrl('shop/compare');?>">Сравнить товары <span id="basket">(<?php echo isset(Yii::app()->session['compare'])? sizeof(Yii::app()->session['compare']) : '0';?>)</span></a></div>
Действие добавления товара в сравнение:

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

 public function actionAddToCompare(){
        if(isset($_POST['product_id'])){
            if (!empty(Yii::app()->session['compare'])) {
                if (!in_array($_POST['product_id'], Yii::app()->session['compare'])) {
                $compare = Yii::app()->session['compare'];
                   $compare[] = $_POST['product_id'];
                   Yii::app()->session['compare'] = $compare;
            }} else {
                $compare = Yii::app()->session['compare'];
                   $compare[] = $_POST['product_id'];
                   Yii::app()->session['compare'] = $compare;
            }
            }
            if(Yii::app()->request->isAjaxRequest){
             echo '('.sizeof(Yii::app()->session['compare']).')';
         Yii::app()->end();
    } else Yii::app()->request->redirect($_SERVER['HTTP_REFERER']);
    }
Действие удаление товара из сравнения:

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

public function actionDeleteOfCompare(){
                if(isset($_POST['product_id'])){
            Yii::app()->session['compare']=array_diff(Yii::app()->session['compare'], array($_POST['product_id']));
          } 
                if(Yii::app()->request->isAjaxRequest){
             echo '('.sizeof(Yii::app()->session['compare']).')';
         Yii::app()->end();
    } else Yii::app()->request->redirect($_SERVER['HTTP_REFERER']);
            }
DRX_wat
Сообщения: 36
Зарегистрирован: 2012.01.23, 02:32

Re: Изменение значения кнопки с помощью ajax

Сообщение DRX_wat »

Реализовывал подобное следующим образом:
В форму ничего не заворачивал.
По условию:

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

 //проверяю существует ли массив сравнения
if (!empty(Yii::app()->session['compare']))
Отображаем либо ajaxButton для добавления товара либо для его удаления. Код ajaxButton:

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

  
 echo CHtml::ajaxButton('Сравнить', Yii::app()->createUrl('shop/AddToCompare'), array(
          'type' => 'POST',
          'data' => array('product_id' => $goods->id), // id товара
          'success' => 'function(data){
          $("#compare").html(data); // обновляем область с уведомлением о количестве товаров в сравнении
          $("[data-compare-id=\'' . $good->id . '\']").replaceWith("ТУТ КОД ВАШЕЙ КНОПКИ УДАЛЕНИЯ");  
                                    }', ), array('data-compare-id' => $good->id))
Кнопку я обновлял по data атрибуту data-compare-id соответствующему id товара.
При клике на кнопку происходит аякс запрос на ваш AddToCompare, а тот в свою очередь выполнив нужные действия возвращает вам полностью блок с с информацией о кол-ве товаров в "сравнени". В случае успеха заменяем этот блок результатом ajax ответа, а так же меняем кнопку по которой кликнул пользователь на новую кнопку.
Так же можно новую кнопку сгенерировать сразу и скрыть, а потом с помошью js менять их. Или просто менять url запроса (добавление/удаление).

Так это была вьюха.

В контроллере (действие ajaxAddToCompare) проверяем аяксовый ли запрос и наличие product_id, пересчитываем кол-во товаров в "сравнении" и отображаем вьюху без шаблона с помощью renderPartial() У Вас вот эта:
Это код области с уведомлением о количестве товаров в сравнении:

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

<div id="choice"><a href="<?php echo $this->createUrl('shop/compare');?>">Сравнить товары <span id="basket">(<?php echo isset(Yii::app()->session['compare'])? sizeof(Yii::app()->session['compare']) : '0';?>)</span></a></div>
В основной вьюхе, той, что отвечает за отображение страницы полностью
области с уведомлением о количестве товаров в сравнении
так же оторажаем с помощью renderPartial() завернутого в div с id селектора, по которому потом js'ом обновляем область. Для кода выше это

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

<div id="compare"><? $this->renderPartial('_compare') ?></div>
У меня к Вам встречный вопрос. Как Вы реализовали саму страницу сравнения? Какой алгоритм в случае когда товаров...скажем 15-20. Горизонтальная полоса прокрутки? Или js прокрутка горизонтально?
Atonaome
Сообщения: 2
Зарегистрирован: 2013.07.25, 10:39
Контактная информация:

Re: Изменение значения кнопки с помощью ajax

Сообщение Atonaome »

Спасибо, что откликнулись:)
Как Вы реализовали саму страницу сравнения?
Горизонтальная прокрутка с помощью js. Пример можно посмотреть по этой ссылке http://www.panic-media.ru/
Сайт там находится временно, так что если пропадёт - не пугайтесь)))
Попробовала реализовать ваш пример, но что-то у меня не получается. Не реагирует на нажатие кнопки((( С update всё работает.
Ответить