AJAX и document.ready() или набей посты с пользой

Тема в разделе "JavaScript", создана пользователем NinoZombie, 23 дек 2014.

Модераторы: ZiX
  1. NinoZombie

    NinoZombie Постоялец

    Регистр.:
    27 окт 2013
    Сообщения:
    118
    Симпатии:
    29
    Здравствуйте, уважаемые шарящие форумчане.
    Видимо я совсем дубовый в этом JavaScript, не могу уже сутки, казалось бы простую задачу решить...
    Слезно прошу Вас помочь мне в решении, хотя бы направить на верный путь.

    ИСХОДНЫЕ ДАННЫЕ:
    Есть страница карточки товара, на которой имеются кнопки выбора опций товара (напр. красный или желтый) и кнопка "Добавить в корзину". При нажатии на кнопку "Добавить в корзину" происходит само добавление и вывод уведомления посредством pnotify . При нажатии на кнопку выбора опции происходит обновление цены товара и его наличия.
    Также имеется в каталоге товаров на каждом товаре кнопочка "Быстрый просмотр", которая вызывает мини-страницу карточки товара со всеми кнопками во фрейме (magnificPopup вроде).

    ЗАДАЧА:
    Сделать так, чтобы при нажатии на кнопку выбора опции проверялось наличие товаров выбранной опции на складе:
    Если количество товара = 0 , то заменить кнопку "Добавить в корзину" на кнопку "Оформить предзаказ" (при нажатии на такую кнопку должен выскакивать colorbox и просить ввести имя и тел)
    Если количество товара > 0, то оставить все как есть.

    ПРОБЛЕМА:
    Блин! При добавлении кнопке "Добавить в корзину" необходимого класса и смене надписи на ней
    Код:
    $('#button-cart').addClass("fast_order");
    $('#button-cart .button-cart-text').html("ОФОРМИТЬ ПРЕДЗАКАЗ");
    почему-то отвязываются все события, привязанные к кнопке через функцию document.ready(), из-за чего кнопка становится нерабочей :(((
    И если в странице товара я выкрутился путем отвязки от кнопки всех функции и привязывании их заново прямо в AJAX запросе

    if (json.btn==1) {
    $('#button-cart').unbind();
    $('#button-cart').addClass("fast_order");
    $('#button-cart .button-cart-text').html("ОФОРМИТЬ ПРЕДЗАКАЗ");
    $('.fast_order').colorbox({href:"#fast_order_form",inline:true, width:"650px", height:"330px", title:" "});
    $('#fast_order_form .fast_order_center button').unbind();
    $('#fast_order_form .fast_order_center button').bind('click',function () {
    var product_name = $('#product_name').val();
    var product_price = $('#product_price').val();
    var customer_name = $('#customer_name').val();
    var customer_phone = $('#customer_phone').val();
    var customer_message = $('#customer_message').val();
    $('#result').html('Обрабатываем введенные данные..');
    $.post('./fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">Обязательно укажите ваше имя и телефон, иначе мы не сможем вам перезвонить!</span>'); } else { $('#fast_order_result').html('<span class="fast_order_success">Ваш заказ успешно оформлен!</span><br /><span>Мы перезвоним вам в течение дня. <a onclick="$(window).colorbox.close();">Закрыть</a> это окно?</span>'); } });

    });

    } else {
    $('#button-cart').removeClass("cboxElement fast_order");
    $('#button-cart').unbind();
    $('#button-cart').bind('click', function() {
    if ($('.hide-cart .right .cart.outofstock').length) {
    return false;
    }
    $.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
    dataType: 'json',
    success: function(json) {
    $('.success, .warning, .attention, information, .error').remove();

    if (json['error']) {
    if (json['error']['option']) {
    for (i in json['error']['option']) {
    $('#option-' + i).after('<span class="error">' + json['error']['option'] + '</span>');
    }
    }

    if (json['error']['profile']) {
    $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
    }
    }

    if (json['success']) {
    if (!Journal.showNotification(json['success'], json['image'])) {
    $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
    }

    $('.success').fadeIn('slow');

    $('#cart-total').html(json['total']);

    $('html, body').animate({ scrollTop: 0 }, 'slow');

    if (json['redirect']) {
    location = json['redirect'];
    }
    }
    }
    });
    });
    $('#button-cart .button-cart-text').html("В КОРЗИНУ");
    }

    , то в мини-странице товара ("Быстрый просмотр") такой трюк не работает :((
    Добавление товара в корзину происходит, а вот уведомления или colorbox не всплывают...
    В консоли пишет, что $.pnotify и colorbox становятся неопределенными (undefined) именно после нажатия на кнопки выбора опций. Почему так происходит, при чем тут они, если я их никак не обнуляю в скрипте, я совершенно не понимаю....
    Если вызывать окно быстрого просмотра у товара, у которого нет опций, то все работает как по маслу (насчет колорбокса только хз)

    ПРЕДПОЛАГАЕМОЕ МНОЙ РЕШЕНИЕ:
    A. Нужно каким-то образом заново определить переменные pnotify и colorbox при выборе опции, по аналогии с привязкой к кнопке функции добавления в корзину
    Б. Нужно каким-то образов перезагрузить мини-страничку (фрейм), чтобы все эти треклятые document.ready() функции заново сработали и при этом опция осталась выбранной

    Собственно прошу Вашего мнения по поводу сложившейся ситуации.

    Вычитал, что можно применять метод .on вместо метода .bind для привязывания функции к кнопке, но что-то так и не понял, может ли он мне помочь?


    Пациент
    . На главной странице можете потыкать на кнопочку "Быстрый просмотр" у iPod Classic (товар с опциями)
    Заранее спасибо!
    Обещаю сделать пожертвование в копилку форума в случае решения проблемы здесь.
     
    Последнее редактирование: 23 дек 2014
  2. NinoZombie

    NinoZombie Постоялец

    Регистр.:
    27 окт 2013
    Сообщения:
    118
    Симпатии:
    29
    Пока что решил проблему с pnotify, сделав вот так

    Кажется, что это жутко плохой костыль, что как-то по-другому это все можно сделать...
    Ну и плюс с colorbox ом не совсем понятно как это сделать - у него нет такой функции :(
     
  3. NinoZombie

    NinoZombie Постоялец

    Регистр.:
    27 окт 2013
    Сообщения:
    118
    Симпатии:
    29
    С колорбоксом разобрался, достаточно было просто его подключить жестко в хедере фрейма.
    Ну неужели эти костыли - наиболее правильное решение? Может быть все таки можно по-другому?