Проблема: Ajax-табы в профиле пользователя

#1 15 марта 2015 в 23:17
Доброго времени суток, сообщество! Интересует такой момент, пытался ли кто нибудь делать подгрузку содержимого табов в профиле пользователя с помощью Ajax?.. два дня уже сижу, пытаюсь понять вообще логику работы этих табов, мозг кипит а результат-ноль.Подскажите хотя бы какие файлы смотреть..Instant CMS 2.1.2
#2 17 марта 2015 в 14:48
Да уж, любителей Ajax не так уж и много… ну немного помогу… в общем немного разобрался, есть такой java
  1. <script type="text/javascript" language="javascript">
  2. var containerId = '#tab_content';
  3. var tabsId = '.tabs-menu ul li ';
  4.  
  5. $(document).ready(function(){
  6. // Preload tab on page load
  7. if($(tabsId + ' LI.current A').length > 0){
  8. loadTab($(tabsId + ' LI.current A'));
  9. }
  10.  
  11. $(tabsId + ' A').click(function(){
  12. if($(this).parent().hasClass('current')){ return false; }
  13.  
  14. $(tabsId + ' LI.current').removeClass('current');
  15. $(this).parent().addClass('current');
  16.  
  17. loadTab($(this));
  18. return false;
  19. });
  20. });
  21.  
  22. function loadTab(tabObj){
  23. if(!tabObj || !tabObj.length){ return; }
  24. $(containerId).addClass('loading');
  25. $(containerId).fadeOut('fast');
  26.  
  27. $(containerId).load(tabObj.attr('href'), function(){
  28. $(containerId).removeClass('loading');
  29. $(containerId).fadeIn('fast');
  30. });
  31. }
  32. </script>
его прописываю в \templates\default\controllers\users\profile_header.tpl, а в profile_view.tpl добавляю контейнер с id tab_content
и все бы вроде как работает, но от также подтягивает хедер профиля, дублируя его… получается вот так:


у меня есть подозрение что это связано и менно с самим java кодом, может кто разбирается?
#3 17 марта 2015 в 23:21
я здесь еще поразмышляю немного… надеюсь, никому не мешаю… rofl
в общем пришел к такому выводу что код рабочий и все вкладки подгружаются как надо, просто в этот код надо добавить функцию удаления или скрытия главной вкладки с профилем пользователя… как это организовать?
#4 18 марта 2015 в 03:08

я здесь еще поразмышляю немного… надеюсь, никому не мешаю..

solitario84
laugh
Используйте jquery для удаления нужных элементов
  1.  
  2. $('.my_class' или '#my_id').remove();
  3.  
#5 18 марта 2015 в 04:47


я здесь еще поразмышляю немного… надеюсь, никому не мешаю..

solitario84
laugh
Используйте jquery для удаления нужных элементов
  1.  
  2. $('.my_class' или '#my_id').remove();
  3.  

Rossoman

спасибо большое!.. в этом вопросе не пригодилось, а в другом-очень даже!..
#6 18 марта 2015 в 04:54

Большое всем спасибо за помощь!..

и раз уж мне позволили здесь нарушать тишину,отдельное спасибо, я готов поделиться готовым решением :

"Подгрузка содержимого вкладок профиля с помощью Ajax"

если есть интерес-обращайтесь!..
#7 18 марта 2015 в 11:09
Весьма полезное добавление… на заметку взял, позже обращусь. :)
Жаль что такие новшества пока недоступны в официальном instantcms 2, надеюсь со временем все мелкие нюансы будут реализованы. :)
#8 19 марта 2015 в 00:16
Надо б человеку кармы прибавить. Не хорошо как-то: решение есть, а блога — нет.
Подсобите кому не лень.
Спасибо!
#9 19 марта 2015 в 01:02


Олег Васильевич я

Спасибо Вам!
#10 19 марта 2015 в 01:49
Плюс в карму, ждём в блоге v
#11 20 марта 2015 в 21:01
Рано радовался… косячок имеется… так все работает четко… подгружается как надо, только вот в хлебных крошках и соответственно в адресной строке остается без изменений… это косяк же? не должно же так быть? должно же быть решение?
#12 21 марта 2015 в 02:12
solitario84, в вашем решении сервер посылает ответ в виде html-страницы, соответственно хлебные крошки достаются методом парсинга этой страницы и замены "старых" крошек. Соответствия между хлебными крошками и браузерной строкой нет никакого!😊Чтобы работать с адресной строкой советую присмотреться к HTML5 history API.
#13 21 марта 2015 в 02:32


solitario84, в вашем решении сервер посылает ответ в виде html-страницы, соответственно хлебные крошки достаются методом парсинга этой страницы и замены "старых" крошек. Соответствия между хлебными крошками и браузерной строкой нет никакого!😊Чтобы работать с адресной строкой советую присмотреться к HTML5 history API.

Val

я наверное не совсем точно выразился… дело как раз таки в том что ничего никуда не парсится кроме содержимого вкладок… что в адресной строке, что в хлебных крошках остается без изменения..
сейчас скрины прикреплю, поймете о чем я…
#14 21 марта 2015 в 02:41
это без скрипта:



а это со скриптом:

#15 21 марта 2015 в 21:27
solitario84, я вас правильно понял! В приведенном вами коде в первом посте, вы используете метод .load() для подгрузке данных в табы. Этот метод является оберткой к методу jQuery.ajax, которому возвращается html-страница вызываемая по адресу переданному в параметре url (в вашем случае tabObj.attr('href') ). Так вот это самая обычная html-страница в рамках InstantCMS, которая бы отображалась полностью, если бы не подгрузка ее через аякс))) (упрощенно).
В этой странице есть участок html-кода откуда можно достать хлебные крошки и заменить ими участок со "старыми хлебными крошками". А данными в адресной строке можно управлять при помощи технологии HTML5 History API и соответствующих библиотек. Адрес куда ведет нажимаемый таб это и есть тот адрес который должен показываться в адресной строке.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.