Question

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

На странице опубликован компонент каталога, в который интегрирован табулятор 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 вместе с аяксом битрикса? :(

Answer 1

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

Очень хорошо для поиска ошибок использовать файрбаг.

Answer 2

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

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

Answer 3

А лучше не юзать ajax Битрикса. При всем моем уважении к его автору. ;)

Answer 4

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

Тоже думал что это решит проблему, однако не сработало

Answer 5

Цитата
Евгений Жуков пишет: А лучше не юзать ajax Битрикса. При всем моем уважении к его автору.

Либо юзать только API Битрикс - при большем уважении к автору. :)

Answer 6

Цитата
Евгений Жуков пишет: А лучше не юзать ajax Битрикса. При всем моем уважении к его автору. smile;)

А почему не поясните?

Answer 7

Цитата
Рустам Санеев пишет: Я так понимаю в конфликт вступают ajax битрикса и jquery, но как заставить работать jquery вместе с аяксом битрикса? smile:(

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

P.S. jQuery и AJAX БУС не конфликтуют - прекрасно работают совместно

Answer 8

Цитата
Павел пишет: Эти проблемы решает плагин 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>

???