Почему при перезагрузке страницы не выполняется условие скрипта?

Question

[ligisayan]

Приветствую. Есть интернет-витрина с корзиной, в которую добавляются товары. При удалении позиции, по клику remove происходит удаление элемента как положено, но после этого сама страница перезагружается и не отрабатывает уже условие внутри клика if ($(".fixed-bottom .cart_list li").hasClass("empty")) {} т.е. это блок в котором находятся удаляемые элементы и по умолчанию, когда в нем ничего нет кроме div с классом empty он скрыт. А вот когда он есть -в нем находятся уже элементы, которые можно удалить, но проблема в том, что после удаления любого элемента страница перезагружается и блок снова скрывается, хотя из условия должен отображается, т.к. он не пустой.

$(".remove-item").click(function() {
  if ($(".fixed-bottom .cart_list li").hasClass("empty")) {
    $(".fixed-bottom").hide();
  } else {
    $('#foot-carousel').data('owlCarousel').removeItem($(this));
    $(".fixed-bottom").show();
  };
});

<div class="fixed-bottom">
  <div class="container">
    <div class="item" style="width: 315px;">
      <div class="li">
        <a href="#">
          <img width="60" height="60" src="#" class="attachment-60x60 wp-post-image" alt="item-4">
        </a>

        <div class="product-text">
          <div class="product-name">Название</div>
          <span class="quantity">13 × <span class="amount">120,000&nbsp;руб.</span></span>
        </div>
        <span class="cart-quantity">
							<a href="#" class="remove-item" title="Удалить эту позицию">remove</a>						</span>
      </div>
    </div>
    ...
  </div>
</div>

Comments

[Александр Зонов]

1. removeItem() - не смог найти такой метод в документации jQuery
2. .data('name') - возвращает именованное значение, привязанное к определенному элементу DOM, а не объект jquery через который можно манипулировать связанным элементом DOM

[ligisayan]

Александр Зонов removeItem() и data('name' это методы и атрибуты owl carusel. ты не на том концентрируешься - у меня вопрос в другом: почему при перезагрузке страницы условия не отрабатываются? до перезагрузки все работает норм

[Александр Зонов]

ligisayan: не достаточно информации, чтобы сделать какое-то обоснованное предположение, дайте страничку, где можно воспроизвести эффект

[ligisayan]

Александр Зонов вот страничка моей темы
velikorodnov.com/wordpress/flatastic/classic
принцип тот же - набираем товары в корзину и удаляем по одиночке из выпадающего списка. после удаления одного/двух товаров страница начинает произвольно перезагружаться и после этого момента мое условие уже не выполняется..

Answer 1

[Александр Зонов]

Хорошо, когда есть на что посмотреть velikorodnov.com/wordpress/flatastic/classic

Теперь все ясно. Ты забыл указать, что твой элемент .remove-item это ссылка. Это меняет все. Переход по ссылке происходит раньше, чем обрабатывается твой обработчик события. Это можно предотвратить, передав колбеку объект события и обратиться к ее методу

$(".remove-item").click(function(e) {
  e.preventDefault();
  if ($(".fixed-bottom .cart_list li").hasClass("empty")) {
    $(".fixed-bottom").hide();
  } else {
    $('#foot-carousel').data('owlCarousel').removeItem($(this));
    $(".fixed-bottom").show();
  };
});

Перезагрузка страницы не произойдет и твои условия будут выполнены, но тогда твой сервер не узнает, что товар был удален из корзины, потому что сейчас эти данные передаются на бекенд именно через перезагрузку страницы. Тогда тебе придется исполнять этот запрос самостоятельно, через ajax, передавая те параметры, которые прописаны в ссылке.

Дополнение
Если элементы, на которые вы добавлили обработчик событий появляются на странице динамически, то есть в результате работы других скриптов, то ваш обработчик на них не сработает.

В таких случаях нужно использовать делегирование

$('родитель-элементов-который-точно-есть-на-странице').on(
'click', 
'.remove-item', 
function(e) { /*...далее по списку... */ });

Без этого ваш обработчик вообще никогда не запускается, чтобы мы внутри него не прописали.

Comments

[Александр Зонов]

а условие не выполняется при перезагрузке потому, что на старой странице клик не успел обработаться, а на новой еще никто не кликнул.

[ligisayan]

Александр Зонов эмм.. добавил e.preventDefault(); - перезагрузка страницы произошла и сервер узнал, что товар был удален..за пояснения спасибо, но решения по-прежнему все нет..

[Александр Зонов]

ligisayan: Вообще, ЭТО НЕВОЗМОЖНО. Но раз это происходит, то у меня есть следующая теория. Во-первых, если элементы, на которые вы добавлили обработчик событий появляются на странице динамически, то есть в результате работы других скриптов, то ваш обработчик на них не сработает. В таких случаях нужно использовать делегирование $('родитель-нужных-элементов-который-точно-есть-на-странице-с-самог-начала').on('click', '.remove-item', function(e) { ...далее по списку... }); Без этого ваш обработчик вообще никогда не запускается, чтобы мы внутри него не прописали.

[ligisayan]

да, элементы появляются динамически.
Александр Зонов т.е. вот так?
[JS]$('#foot-carousel').on('click', '.remove-item',
function(e) {
e.preventDefault();
if ( $(".fixed-bottom .cart_list li").hasClass("empty") ) {
$(".fixed-bottom").hide();
}
else {
$('#foot-carousel').data('owlCarousel').removeItem($(this));
$(".fixed-bottom").show();
};
});[/JS]
неа, теперь вообще ничего не может удалить, а если с главной корзины удалить, то страница снова перезагружается и блок не появляется...

[Александр Зонов]

ligisayan: тут нужно проговорить фундаментальные моменты, которые вы кажется упускаете.

1. Если происходит перезагрузка страницы по клику на ссылку, коей и является элемент .remove-item, то этот все что бы вы дальше не написали не сработает, потому что на рефрешнутой странице никто не сделал клика, на который вы расчитываете. Он был сделан на старой странице, которой уже нет.

2. Использование e.preventDefault() позволяет избежать перезагрузки. В этом случае не нужно открывать меню, оно вообще не закроется. Но разумеет ТОВАР НЕ БУДЕТ УДАЛЕН сам собой. О его удалении придется позаботиться вам. Нужно будет сделать запрос к серверу, который удалит товар из корзины пользователя и нужно будет удалить сниппет элемента со страницы. Повторюсь, магии не произойдет и само не удалиться.

[ligisayan]

Александр Зонов 1 - да, это я понимаю. мне нужно, чтобы эта же проверка тогда выполнилась на перезагруженной странице.
2 - " Использование e.preventDefault() позволяет избежать перезагрузки" но не в случает, если элемент, для которого оно выполняется динамический - вы это уже говорили.
"В этом случае не нужно открывать меню, оно вообще не закроется. " вот такое поведение мне не нужно. необходимо, чтобы меню было открыто, когда в нем есть элементы, если элемент удален и в нее по прежнему еще есть элементы (даже после перезагрузки) и закрываться только в случае, если в ней элементов нет, поэтому использование e.preventDefault() получается отпадает..

[Александр Зонов]

1. Чтобы обработчик сработал на перезагруженной странице его нужно вешать не на клик, а $('document').on('ready', cb).
2. Вам решать использовать preventDefault или нет. Он решает одну конкретную задачу — не допускает выполнения стандартного поведения определенных элементов (ссылки, кнопки, инпут-сабмит и подобные). Срабатывает в любом случае, если выполняется дело доходит до его исполнения. Если вам кажется что он не сработал, значит колбек, которые его содержит не был выполнен вообще.

[ligisayan]

Александр Зонов поясните, что значит на $('document').on('ready', '.remove-item') {if ( $(".fixed-bottom .cart_list li").hasClass("empty") ) {
$(".fixed-bottom").hide();
}
else {
$('#foot-carousel').data('owlCarousel').removeItem($(this));
$(".fixed-bottom").show();
}; } вот так?

[Александр Зонов]

ligisayan: нет, это работать не будет. потому что тут вы почти все напутали.
$('document').on('ready', function(){
if (!$(".fixed-bottom .cart_list li").hasClass("empty")) {
// этот блок будет выполнен после загрузки DOM если у элемент .fixed-bottom .cart_list li есть на странице и У НЕГО НЕТ КЛАССА empty
$('#foot-carousel').data('owlCarousel').removeItem($(this));
$(".fixed-bottom").show();
}
});

[ligisayan]

Александр Зонов пусть я напутал, но почему теперь блок .fixed-bottom отображается ВСЕГДА?? при любых раскладах, даже когда в .fixed-bottom .cart_list li есть класс empty...

[Александр Зонов]

ligisayan: У меня есть несколько предположений. Первое состоит в том, что вы указали в примере селектор, который не указывает на нужный вам элемент. Посмотрите скриншот take.ms/f6R6w и подставьте селектор, который будет указывать на нужный элемент, убедитесь что он присуствует на странице сразу, а не подгружается скриптами.

[ligisayan]

Александр Зонов по поводу селектора все верно -я его сам создаю в структуру. другое дело, что li c классом empty виден через через инструмент обработчика, но не в исходном коде страницы, т.к. подгружается виджетом вордпресс - можете посмотреть фидл - fiddle.jshell.net/z5r2zbpd

[ligisayan]

а в инструментах обработчика видно так: [http://s017.radikal.ru/i430/1506/96/871bd8b0e15f.png]

[Александр Зонов]

ligisayan: С этим я не спорю. Я говорю о том, что этот элемент не имеет родителя .fixed-bottom, а значит селектор ".fixed-bottom .cart_list li" бъет мимо и не позволит проверит есть у li класс empty или нет.

[ligisayan]

Александр Зонов вы не переходили по фидлу из пред коммента? разве там нет родителя .fixed-bottom в самом вверху..?

[Александр Зонов]

ligisayan: теперь посмотрел, но, во-первых, на этот раз там внутри .cart_list нет ни одного li, как с классом empty, так и без него, а во-вторых, в настройках фидла не подключена библиотека jQuery. ))))

[ligisayan]

Александр Зонов ну я же писал "другое дело, что li c классом empty виден через через инструмент обработчика, НО НЕ В ИСХОДНОМ КОДЕ СТРАНИЦЫ, т.к. подгружается виджетом вордпресс - можете посмотреть фидл" в фидле как раз отображение исходного кода страницы, поэтому и не было нужды подключать библиотеку

[Александр Зонов]

ligisayan: раз li.empty осутствует на момент загрузки страницы, то есть два пути. Использовать setInterval для создания проверок его появления пару раз в секунду, чтобы потом произвести нужное действие, главное потом не забыть удалить созданный интервал. Второй путь вносить изменение в виджет, чтобы он открывал выпадающую панельку корзины, если она не пустая.

[ligisayan]

Александр Зонов второй вариант нравится мне гораздо больше! т.е. смотрите, есть php функция - в нее мы вносим echo "" ?
if ( ! function_exists( 'woocommerce_mini_cart' ) ) {

/**
* Output the Mini-cart - used by cart widget
*
*/
function woocommerce_mini_cart( $args = array() ) {

$defaults = array(
'list_class' => ''
);

$args = wp_parse_args( $args, $defaults );

wc_get_template( 'cart/mini-cart.php', $args );
}
}

[Александр Зонов]

ligisayan: есть предположение, что копаться нужно не в серверных скриптах, а javascript, который подключается сниппетом

[Александр Зонов]

ligisayan: чем все кончилось? мне правда любопытно какое решение вы применили

[ligisayan]

Александр Зонов вторым путем "Второй путь вносить изменение в виджет, чтобы он открывал выпадающую панельку корзины, если она не пустая." отыскал виджет и внес изменения туда - спасибо!

Answer 2

[Андрей Саныч]

И так, по порядку:

• В консоль смотрели?
  
• Вставьте в колбек клика какой-нибудь алерт и проверьте срабатывает ли вообще клик
  
• Ни один из блоков if-a не выполняется? Может Owl матерится на что-то?
  

p.s. в консоли по-любому что-то сыпется

Comments

[ligisayan]

Андрей Саныч да, давайте по-порядку:
1. да, смотрел - в консоли кроме как ошибки при загрузке и ругани на саму jquery
"jquery.js GET undefined 404 (Not Found)" ничего больше нет
2. зачем ставить колбек, если я вижу, что клик срабатывает? по клику remove происходит удаление элемента как положено, но после этого сама страница перезагружается и не отрабатывает уже условие внутри клика if ($(".fixed-bottom .cart_list li").hasClass("empty")) {}
т.е. это блок в котором находятся удаляемые элементы и по умолчанию, когда в нем ничего нет кроме div с классом empty он скрыт. А вот когда он есть -в нем находятся уже элементы, которые можно удалить, но проблема в том, что после удаления любого элемента страница перезагружается и блок снова скрывается, хотя из условия должен отображается, т.к. он не пустой. Надеюсь, что теперь мне удалось яснее донести суть.
3. выполняется, но только 1 раз - см выше

Answer 3

[jekaD]

Не понял, при чем тут условие. оно же срабатывает только по клику. Кликнул, скрипт проверил, есть внутри элементы или нет, если нет скрыл. А после перезагрузки страницы этот скрипт ничего не проверяет. Смотрите состояние этого блока по умолчанию или ищите скрипт который при загрузке страницы проверяет, наличие элементов в блоке.