Один скрипт мешает другому функционировать
 

Доброй ночи,

На сайте стоит скрипт фильтра товаров, при подключении скрипта обратного звонка, фильтр перестает работать вот код фильтра:

$('#fltr a').click(function(){
	var fltr = $('#fltr a');
	var width = $('#yoo-zoo .width50');
	var row = $('#yoo-zoo .row');
	if($(this).attr('rel') == 'all'){
		fltr.removeClass('current');
		$(this).addClass('current');
		width.show();
}
	else{
		row.hide();
		width.unwrap().css({
		'padding':'0 0 5px',
		'height':'90px'
}).hide();
	fltr.removeClass('current');
	$(this).addClass('current');
	var newSelection = $(this).attr('rel');
	var newRout = newSelection + 'h';var doubleRout = newSelection + 'x';
	$('a[href*=' +newRout+ ']').parentsUntil('.row').show();
	$('a[href*=' +doubleRout+ ']').parentsUntil('.row').show();
	width.wrapAll("<div class='row'></div>")
	;};});}); // конец ready

по консоли гугл хрома, ошибка возникает вот здесь

if($(this).attr('rel') == 'all'){

пишет uncaught typeerror undefined is not a function .

Скрипт обратного звонка callme. Callme работает и с фильтром и без. Фильтр работает только без callme. Скрипт для фильтра писал сам, настолько хорошо насколько хватило моих познаний.

Возможно callme подключает какую то не ту версию jquery, из за чего фильтр ломается?

Помогите разобраться новичку =)

Можете HTML логику продемонстрировать?

Т.е.:
Если некий лист ссылок
При клике на ссылку что должно происходить?
- с данной ссылкой
- с остальными и т.п.

Идет список ссылок в ряд, при клике на ссылку, например М12, товар показывается соответственно с параметром М12, при клике на Все , показывается весь товар.

<a rel="all">Все</a>
<a rel="12">М12</a>
<a rel="16">М16</a>
<a rel="20">М20</a>
<a rel="24">М24</a>
<a rel="30">М30</a>

Сам список товаров идет блоками по 2 <div> в ряд примерно вот так:

<div class="row">
<div class="width50 first-item">
<div class="teaser-item">
<h2 class="pos-title">
<a href="...." title="....">....</a> 
</h2>
<p class="pos-links">
<span class="element element-itemlink first last"> 
<a href="....">Подробнее...</a>
</span></p></div></div>
<div class="width50">
<div class="teaser-item">
<h2 class="pos-title"> 
<a href="...." title="....">....</a>
</h2>
<p class="pos-links">
<span class="element element-itemlink first last"> 
<a href="....">Подробнее...</a>
</span></p></div></div></div>

http://learn.javascript.ru/play/00hgsc

не до конца пойму - вам что то похожее требуется?

А вообще посмотрите нет ли .noConflict()

И заключайте функции с перспективой на бесконфликтную работу.

PS я всегда использую

(function($){
  $(function(){
    // function .....
  });
}(jQuery));

В callme нашел такой кусок

function callMe() {
	var 
		$ 	= jQuery.noConflict(),
		tpl = {}, cmeForm, cmeCSS = jQuery('<link>'); // add css

Это оно?

Подскажите как исправить ситуацию?

Код который вы прислали, по сути да, нужно как раз это, только у меня нет доступа к части кода там где вы ставите атрибут data-rel , поэтому я цепляюсь за классы .width50 и .row

(function($){
  $(function(){
    // ТУТ ФУНКЦИЯ ФИЛЬТРА
  });
}(jQuery));

поместите функцию фильтра или что там конфликтует в такую функцию..

Либо попробуйте так:

$   = jQuery.noConflict(),

заменить на

$  = $,

Получилось =) Спасибо

Я так понимаю на будущее конструкция

$(document).ready(function() {
//СКРИПТ
}); // конец ready

Ведет к этим проблемам, и надо изначально строить как вы написали, верно?

плохому скрипту всегда что-то мешает :)