Как реализовать отслеживание ссылки ajax(данные)?

Question

[l55uiz]

Доброго времени всем.
Ситуация следующая: нужно получить список блюд через ajax запрос, при клике на X подменю(например, горячие закуски). После чего сделать это подменю активным. Если мы еще раз нажмем на это подменю - то заново не подгружать список блюд.
Не могу правильно сделать активное подменю и отследить текущее подменю для того, чтобы еще раз не подгружать его.
А так все работает.
Буду рад помощи.
https://jsfiddle.net/m5o8pwrd/1/ - код

Answer 1

[ThunderCat]

UPD: Итак, напишу вопрос как я в итоге понял. Есть меню, с пунктами подменю( что нифига не важно ;) ), в итоге необходимо:
1) Аяксом загрузить некий контент (например список блюд из подраздела) и запомнить его неким образом, чтобы не тащить еще раз при клике на данный пункт подменю.
2) Подсветить линк в меню, тот который текущий.

иотго:
1) делать для каждой аякс даты уникальный ключ(использовать тот что меню передает для запроса аяксом), хранить по этому ключу полученные данные в массиве, при клике на меню проверять или есть в массиве такой ключ, если есть не дергать сервер, взять из массива, иначе аяксом и запомнить.
например создать массив menu, у вас же запрашивается id=3 аяксом, вот и пусть что приходит в ответ от сервера будет храниться в menu[3]; далее в следующий раз if(menu[3]! = undefined) получаем значение аяксом, елсе берем что лежит в menu[3];
2) по клику на любой пункт делать для всех подпунктов стиль неподсвеченный, затем кликнутый меняем на подсвеченный.

Comments

[l55uiz]

Почему костыль на велосипеде? Почему аяксом не получать данные? Я хочу без перезагрузки страницы получать список блюд. Объясните

[ThunderCat]

l55uiz: у вас этот список блюд откуда? Вы его ежесекундно меняете? Зачем вы его запрашиваете отдельно? Вы тянете меню - там у вас (допустим) 10 пунктов. В каждом 5 подпунктов (или 20, не суть), их надо получить все сразу, не надо дергать сервер 10 раз, просто этот список подпунктов имеет атрибут hidden. По клику атрибут становится visible.

[ThunderCat]

l55uiz: посмотрите любое меню на сайте где есть вложенность, неужели так сложно открыть код и посмотреть как делать нормально, а как неправильно.

[l55uiz]

ThunderCat: ну изначально у меня сразу все меню прогружается. Вы имеете в виду, что при клике на подменю считать его id, считать id блюда(который будет равен подменю)и, если они не равны - скрывать через display:none?

[ThunderCat]

l55uiz: это вы перемудрили. Всё же посмотрите меню аккордеон как реализовано. Практически любое.

[l55uiz]

ThunderCat: Стоп. Подождите. При чем тут аккордеон меню? Смотрите. У меня есть меню - "основное и второе". У каждого меню есть подменю - "Холодные закуски, Горячие и т.д". Соответственно, у этого подменю есть свои блюда, которые я должен выводить! Возьмем для примера "Холодные закуски". При клике на них я получаю весь список блюд этого подменю "Бутерброд с чем-то, запиканки и т.д" в контент. Скажите, при чем тут аккордеон?

[ThunderCat]

l55uiz: так, мы явно говорим о разных вещах

[l55uiz]

ThunderCat: я уже понял) Немного изменил слова в 1-м посту. Значит, вопрос актуален на счет ajax'a - нужно получить блюда, согласно подменю. При этом подменю сделать активным(добавить класс active). При клике на тоже самое подменю - не обрабатывать ничего. Как видно из моего кода, я скрываю каждый раз при запросе блок $(".list-items").hide().fadeIn(1000); .

[l55uiz]

ThunderCat: сделал задачу с активной вкладкой - https://jsfiddle.net/m5o8pwrd/3/ Скажите, говнокод? Но я так и не понял как "если есть не дергать сервер, взять из массива, иначе аяксом и запомнить."

[ThunderCat]

l55uiz: м, проще сделать $(".active").each().removeClass('active'); кажется так, а насчет массива сейчас подробнее в ответе, хотя вроде проще уже куда...

[l55uiz]

ThunderCat: понял. Мне кажется, что даже массив не надо. Смотрите, у меня в ajax.success() есть строка $(".list-items").hide().fadeIn(1000); - она при успехе делает маленькую анимацию для интерактива так сказать. Если убрать всю анимацию, то блюда получаю моментально, и при повторном нажатии на то же самое подменю - ничего не происходит. Ибо данные уже получены. Вся фишка в анимации. Если я оставляю анимацию, то при повторном клике она сработает, и так вечно. Вот как мне запретить анимацию, если блюда уже получены?

[ThunderCat]

l55uiz: воот, а так - делаем проверку, в массиве ключ есть, до аякса и анимации вообще код не доходит.

[l55uiz]

ThunderCat: писал код проверки в ajax.beforeSend() ?

[l55uiz]

ThunderCat: https://jsfiddle.net/m5o8pwrd/4/ сделал так. Вроде бы работает. Сделал проверку на наличие класса при клике на подпункт. Это глупо?
П.с: был бы не против, если бы вы смогли все-таки подправить код на тот, который вы имели в виду

Answer 2

[Максим Тимофеев]

Используйте localStorage запихивайте туда результаты ajaх. Проверили ключ в localStorage, если есть - вывели из него, если нет сделали ajax получили данные закинули в localStorage.

Comments

[l55uiz]

Понял. Но я все же получаю данные через свой код, все работает. Но из-за того, что я при success делаю анимацию блока, эта анимация срабатывает постоянно при клике на подменю. Как это исправить?)

[Максим Тимофеев]

l55uiz: Вы пытаетесь избавиться от доп запросов, соответственно и success у Вас будет вызываться только 1 раз на меню. Не понимаю в чем проблема? Вы не хотите использовать localStorage?

[l55uiz]

Максим Тимофеев: я не понимаю как это реализовать в моем коде, к сожалению. И какие доп. запросы?

[Максим Тимофеев]

l55uiz: Перепишите код, если в этом не получается реализовать. В чем проблема? Там же кода на 10 минут писать.

[l55uiz]

Максим Тимофеев: я имел в виду, что не знаю как это использовать вообще и подстроить под мой код

[Максим Тимофеев]

l55uiz: Вот чтиво на 15 минут, все станет понятно:
www.w3schools.com/html/html5_webstorage.asp

[l55uiz]

Максим Тимофеев: спасибо, но я все же не понял зачем вообще использовать Storage? Что это мне даст? Как я ответил другому человеку - я сделал вот так - https://jsfiddle.net/m5o8pwrd/4/ Вроде бы работает. Сделал проверку на наличие класса при клике на подпункт. Это глупо?

[Максим Тимофеев]

l55uiz: Клик меню - ajax - получены данные, вставили в html, сохранили в localStorage еще 1 клик, проверили нет ли у нас в localStorage уже этой инфы, если нет - опять ajax. Вы же хотели избежать лишних запросов?

[l55uiz]

Максим Тимофеев: да, но разве я не избежал лишних запросов? Проверил на наличие класса. Если он есть - ничего не делать. "Если убрать всю анимацию, то блюда получаю моментально, и при повторном нажатии на то же самое подменю - ничего не происходит. Ибо данные уже получены"