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

Question

[Александр]

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

Уже сутки ломаю голову как оживить следующий 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>

Comments

[Одиночка Айс]

Причем здесь класс вообще? Вы должны общаться с сервером, проверяя, есть ли там товар в избранном.

[Одиночка Айс]

Вместо ваших add_url, delete_url, product_id, используйте атрибут data: data-add, data-del, data-id, к нему обращаться проще и правильнее, а то вы какой-то XML городите уже.

[Александр]

Добавление в избранное работает без нареканий как по часам.
Мне нужно по второму клику удалять из избранного, но удаление происходит только если подставить номер товара со страницы избранное который в свою очередь передаёт функция productDeleteWish в ответе.

По поводу замечания с data-add, data-del, data-id, ок, спасибо. Учтём =)

[Александр]

VicTHOR, Этот момент работает. Код черновой ещё.

Answer 1

[ThunderCat]

у вас 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!');
         )}
    )}

Comments

[Александр]

Спасибо за помощь! Всё получилось. Работает как надо! =)

Конечный результат такой:

var productId = $(this).attr('product_id');
			let that = $(this);
			function productDeleteWish() {
				// $that.load('/?option=com_ajax&module=jshopping_wishlist&product_id='+productId+'&format=raw&method=myProductDeleteCart', function(response) {
				// 	$that.attr('delete_url', response);
				// 	//alert(response);
				// });
				$.get('/?option=com_ajax&module=jshopping_wishlist&product_id=' +productId+ '&format=raw&method=myProductDeleteCart', function(data){
					that.attr('delete_url', '/wishlist/delete?number_id=' +data+ '&ajax=1');
				});
			};