tomclancys
@tomclancys

Почему не работает скрипт на jQuery + ajax?

Здравствуйте.

Уже сутки ломаю голову как оживить следующий jquery скрипт.
Смысл работы такой: скрипт после добавления товара в избранное запоминает атрибут ID товара и отправляет его через функцию productDeleteWish() в модуль который в ответ передаёт функции число которое нужно подставлять в атрибут delete_url товара.
На данный момент функция ничего не подставляет в атрибут delete_url. Товаров на странице 20 штук. Код HTML в спойлере.

//Добавление и удаление товара из избранного
		$('.js-addwish').each(function(){
			var productId = $(this).attr('product_id');
			function productDeleteWish() {
				$(this).load('/?option=com_ajax&module=jshopping_wishlist&product_id='+productId+'&format=raw&method=myProductDeleteCart', function(response) {
					$(this).attr('delete_url', response);
					alert(response);
				});
			};
			$(this).on('click', function(){
				
				// Проверяем наличие товара в корзине по классу
				if (!$(this).hasClass('in_wishlist')) {
					$(this).addClass('in_wishlist');
					//Отправляем запрос на добавление товара в избранное
					$.ajax({
						url: $(this).attr('add_url'),
						method: 'GET',
						cache: false
					}).done(function(data){
						productDeleteWish();
					});
				} else {
					$(this).removeClass('in_wishlist');
					//Отправляем запрос на удаление товара из избранного
					$.ajax({
						url: $(this).attr('delete_url'),
						method: 'GET',
						cache: false
					}).done(function(data){
					});
				}
			});
		});


spoiler

<div class="row isotope-grid">

    <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item category_18">
        <div class="block2">
            <div class="block2-pic hov-img0">
                <img src="images/products/img_products/thumb_timb0375.jpg" alt="Бело-желтая футболка">
            </div>
            <div class="block2-txt flex-w flex-t p-t-14">
                <div class="block2-txt-child1 flex-col-l ">
                    <a href="/products/futbolki/belo-jeltaya-futbolka"
                        class="stext-110 cl5 hov-cl1 trans-04 js-name-b2 p-b-6">
                        Бело-желтая футболка </a>
                    <span class="stext-105 cl3">
                        <span class="new_price">100 ₽</span>
                    </span>
                </div>
                <div class="block2-txt-child2 flex-r p-t-3">
                    <span add_url="/cart/add?to=wishlist&category_id=18&product_id=58&ajax=1"
                        delete_url="" product_id="28" 
                        class="btn-addwish-b2 dis-block pos-relative js-addwish">
                        <img class="icon-heart1 dis-block trans-04"
                            src="images/icons/icon-heart-01.png" alt="В избранное"
                            title="В избранное">
                        <img class="icon-heart2 dis-block trans-04 ab-t-l"
                            src="images/icons/icon-heart-02.png" alt="Убрать из избранного"
                            title="Убрать из избранного">
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item category_18">
        <div class="block2">
            <div class="block2-pic hov-img0">
                <img src="images/products/img_products/thumb_timb0375.jpg" alt="Бело-желтая футболка">
            </div>
            <div class="block2-txt flex-w flex-t p-t-14">
                <div class="block2-txt-child1 flex-col-l ">
                    <a href="/products/futbolki/belo-jeltaya-futbolka"
                        class="stext-110 cl5 hov-cl1 trans-04 js-name-b2 p-b-6">
                        Бело-желтая футболка </a>
                    <span class="stext-105 cl3">
                        <span class="new_price">200 ₽</span>
                    </span>
                </div>
                <div class="block2-txt-child2 flex-r p-t-3">
                    <span add_url="/cart/add?to=wishlist&category_id=18&product_id=58&ajax=1"
                        delete_url="" product_id="51" 
                        class="btn-addwish-b2 dis-block pos-relative js-addwish">
                        <img class="icon-heart1 dis-block trans-04"
                            src="images/icons/icon-heart-01.png" alt="В избранное"
                            title="В избранное">
                        <img class="icon-heart2 dis-block trans-04 ab-t-l"
                            src="images/icons/icon-heart-02.png" alt="Убрать из избранного"
                            title="Убрать из избранного">
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item category_18">
        <div class="block2">
            <div class="block2-pic hov-img0">
                <img src="images/products/img_products/thumb_timb0375.jpg" alt="Бело-желтая футболка">
            </div>
            <div class="block2-txt flex-w flex-t p-t-14">
                <div class="block2-txt-child1 flex-col-l ">
                    <a href="/products/futbolki/belo-jeltaya-futbolka"
                        class="stext-110 cl5 hov-cl1 trans-04 js-name-b2 p-b-6">
                        Бело-желтая футболка </a>
                    <span class="stext-105 cl3">
                        <span class="new_price">300 ₽</span>
                    </span>
                </div>
                <div class="block2-txt-child2 flex-r p-t-3">
                    <span add_url="/cart/add?to=wishlist&category_id=18&product_id=58&ajax=1"
                        delete_url="" product_id="55" 
                        class="btn-addwish-b2 dis-block pos-relative js-addwish">
                        <img class="icon-heart1 dis-block trans-04"
                            src="images/icons/icon-heart-01.png" alt="В избранное"
                            title="В избранное">
                        <img class="icon-heart2 dis-block trans-04 ab-t-l"
                            src="images/icons/icon-heart-02.png" alt="Убрать из избранного"
                            title="Убрать из избранного">
                    </span>
                </div>
            </div>
        </div>
    </div>

</div>

  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
у вас 2 ошибки(даже можно сказать 3):
1)
function productDeleteWish() {
        $(this)...
в этом месте контекст $(this) уже потерян, что легко проверяется console.log($(this)).
Вместо этого выше нужно передать контекстную переменную в другую, let that = $(this);
2) function productDeleteWish() { не принимает аргументов, хотя функция done() возвращает какой-то результат. Хотя это по моему тут вообще лишнее.
3) Не используете дебаг, всего-то надо было последовательно отловить что происходит по ходу скрипта.

Вообще логика скрипта - мрак и ужас, все умещается в 4-5 значимых строк:
$('.js-addwish').on('click', function(){
        $(this).toggleClass('in_wishlist');
          //Отправляем запрос на удаление/добавление товара из избранного, 
          //так как id уникальный, никаких других данных серверу передавать не нужно
          //в ответ просто получаем 1 или 0 (добавили/удалили)
        $.get('/wishlist/?product_id=' + $(this).attr('product_id'), function(data)){
           (data == 1)? alert('addet!') : alert('removed!');
         )}
    )}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы