Добро пожаловать на сайт <БагБД>, где вы можете задавать вопросы о программировании и разработке на Битрикс и Битрикс24, и получать быстрые и квалифицированные ответы от профессионалов!

AJAX Битрикса и Jquery

00 голосов
8
Здравствуйте! Есть проблема, над которой бьюсь уже довольно долгое время. Подскажите пути решения.

На странице опубликован компонент каталога, в который интегрирован табулятор Jquery. Шаблон компонента следующий:
Код
<div id="tabs">
   <ul>
      <li class="tabs_active"><a href="#tabs-1">Поиск по номеру</a></li>
      <li><a href="#tabs-2">Поиск по названию</a></li>
   </ul>
   <div id="tabs-1">
      инклюдим "bitrix:catalog.filter" и "bitrix:catalog.section"
   </div>
   <div id="tabs-2">
      инклюдим "bitrix:catalog.filter" и "bitrix:catalog.section" с другими шаблонами
   </div>
</div>


Если НЕ включен стандартный аякс битрикса, то все работает хорошо, на каждой вкладке отображается свое поле ввода и свои результаты. Однако если включить аякс в компоненте и попробовать что-то найти, то вкладки перестают работать. Вторая вкладка перестает работать и поиск можно вести только с помощью первой вкладки...

Я так понимаю в конфликт вступают ajax битрикса и jquery, но как заставить работать jquery вместе с аяксом битрикса? :(
спросил 05 Июль, 13 от An3or (140 баллов)

8 Ответы

00 голосов
Не встречал такую проблему. В некоторых моих проектах есть и jquery и работает аякс Битрикс. Возможно у вас просто пересекаются какие-либо идентификаторы?

Очень хорошо для поиска ошибок использовать файрбаг.
ответил 05 Июль, 13 от ZakonD3D (600 баллов)
00 голосов
перегружается кусок DOM дерева - соотв. исчезают все жкверевские бинды
решение - в загружаемых аяксом компонентах прописать стартап-скрипты для жквери
т.е. в шаблоне bitrix:catalog.section и bitrix:catalog.filter прописываем
<script>
$(document).ready(function() {
/// бла бла бла
});
</script>

зы. можно поставить условие на ajax
ответил 17 Авг, 13 от Hitten (140 баллов)
00 голосов
А лучше не юзать ajax Битрикса. При всем моем уважении к его автору. ;)
ответил 15 Ноя, 13 от Pomnep (13,960 баллов)
00 голосов
Цитата
Дмитрий Вислов пишет:
перегружается кусок DOM дерева - соотв. исчезают все жкверевские бинды
решение - в загружаемых аяксом компонентах прописать стартап-скрипты для жквери
т.е. в шаблоне bitrix:catalog.section и bitrix:catalog.filter прописываем
<script>
$(document).ready(function() {
/// бла бла бла
});
</script>

зы. можно поставить условие на ajax

Тоже думал что это решит проблему, однако не сработало
ответил 24 Фев, 14 от An3or (140 баллов)
00 голосов
Цитата
Евгений Жуков пишет:
А лучше не юзать ajax Битрикса. При всем моем уважении к его автору.


Либо юзать только API Битрикс - при большем уважении к автору. :)
ответил 15 Июнь, 14 от ZakonD3D (600 баллов)
00 голосов
Цитата
Евгений Жуков пишет:
А лучше не юзать ajax Битрикса. При всем моем уважении к его автору. smile;)

А почему не поясните?
ответил 14 Окт, 14 от FireLuna (580 баллов)
00 голосов
Цитата
Рустам Санеев пишет:
Я так понимаю в конфликт вступают ajax битрикса и jquery, но как заставить работать jquery вместе с аяксом битрикса? smile:(


Эти проблемы решает плагин jQuery - "live query" - http://plugins.jquery.com/project/livequery
Нужен как раз если DOM изменяется.

P.S. jQuery и AJAX БУС не конфликтуют - прекрасно работают совместно
ответил 14 Фев, 15 от FireLuna (580 баллов)
00 голосов
Цитата
Павел пишет:
Эти проблемы решает плагин jQuery - "live query" - http://plugins.jquery.com/project/livequery
Нужен как раз если DOM изменяется.


Ну да, вроде должен помочь. Только что мне добавлять в скрипт? Изначально код в шаблоне такой:
Код
   <script type="text/javascript" >
      $(document).ready(function() {
         $("#tabs ul li").click(function() {
              $("#tabs ul li").removeClass('tabs_active');
              $(this).addClass('tabs_active');
              $($("#tabs div").hide().get($("#tabs ul li").index(this))).show();
          });
      });
   </script>

А должно быть что-то типа такого:
Код
   <script type="text/javascript" >
      $(document).ready(function(example) {
         $("#tabs ul li").click(function() {
              $("#tabs ul li").removeClass('tabs_active');
              $(this).addClass('tabs_active');
              $($("#tabs div").hide().get($("#tabs ul li").index(this))).show();
          });
      });
      $('#tabs ul li')
         .livequery('click', example);
   </script>

???
ответил 25 Май, 15 от An3or (140 баллов)

Похожие вопросы

0 голосов
9 ответов
спросил 27 Апр, 13 от HeJIJIu (630 баллов)
0 голосов
5 ответов
спросил 27 Май, 13 от Biscuit (160 баллов)
0 голосов
1 ответ
спросил 25 Фев, 13 от pilOt666 (120 баллов)
0 голосов
4 ответов
спросил 08 Фев, 14 от Kiriel (2,010 баллов)
0 голосов
5 ответов
спросил 04 Ноя, 13 от Asteria (1,840 баллов)