Проверяем существование элементов перед инициализацией плагинов jQuery

Ко мне очень часто обращаются владельцы сайтов за помощью в решении проблем, возникающих из-за ошибок javascript. Множество сайтов используют те или иные визуальные эффекты и удобства, которые предоставляют плагины jQuery.

Самой распространенной «плавающей» ошибкой в этом случае является то, что при подключении того или иного плагина javascript программисты и верстальщики не всегда проверяют наличие элемента, к которому подключается плагин, в контексте страницы.

А так как javascript – язык компилируемый во время выполнения, то при вызове ошибки весь код, следующий далее, не будет выполнен. При этом де-факто нужный js код с использованием плагинов и вовсе выносится верстальщиками в отдельные файлы js, которые потом просто подключаются к шаблону (зачастую везде и всюду).

А неплохо было бы проверить перед инициализацией плагина — существует ли указанный элемент (каждый необходимый элемент для нормальной работы плагина) в документе, или его нет? Ведь сделать это проще простого.

Достаточно проверить свойство .length у возвращаемого после поиска по выбранному css селектору объекта jQuery, и если оно отлично от 0, тогда элемент точно присутствует/встречается в контексте страницы. Иначе просто пропустить инициализацию плагина, так как инициализируем мы в этом случае только ошибки

Приведу простой пример из верстки интернет-магазина, допустим, мы используем один из стандартных элементов jQuery UI Slider для добавления на сайте/в интернет-магазине формы поиска с ползунком выбора диапазона цен, или количества товаров. В форме поиска у нас есть присутствует следующий код:

<div id="jsSlider"></div>
<input type="text" id="maxPrice" value=" 1999" name="maxPrice" />
<input type="text" id="minPrice" value=" 0" name="minPrice" />

Где:

• id=»maxPrice» – поле, связанное со значением максимальной цены товара во время поиска;
• id=»minPrice» – поле, связанное со значением минимальной цены товара во время поиска;
• id=»jsSlider» – контейнер для добавления ползунка выбора диапазонов.

Собственно остается подключить только сам javascript код плагина slider jquery ui:

<script type=»text/javascript» src=»/js/jquery.js» ></script>

<script type=»text/javascript» src=»/js/jquery.ui-slider.js»></script>

И добавить в шапку сайта между тегами head инициализацию самого плагина (или вынести в отдельный файл):

jQuery("#jsSlider").slider({
 min: 0,
 max: 1000,
 values: [0,1000],
 range: true,
 stop: function(event, ui) {
 jQuery("#minPrice ").val(jQuery("#jsSlider").slider("values",0));
 jQuery("#maxPrice").val(jQuery("#jsSlider").slider("values",1));
 },
 slide: function(event, ui){
 jQuery("#minPrice").val(jQuery("#jsSlider").slider("values",0));
 jQuery("#maxPrice").val(jQuery("#jsSlider").slider("values",1));
 }
});

А что будет в том случае, когда формы поиска нет на странице? Указанный код будет являться причиной ошибок и остановки выполнения js на странице после возникновения ошибки. А в Internet Explorer 8 и ниже так вообще начнет мозолить глаза, раздражая посетителей назойливыми сообщениями об ошибках (еще и со звуковым сигналом).

В итоге сайт потеряет своих посетителей со старыми версиями Internet Explorer. А магазин будет терять потенциальных покупателей. Перепишем указанный код правильно (если планируем практически на всех страницах оставить минимальную форму поиска по товарам):

jQuery(document).ready(function(){
if(jQuery("#jsSlider").length && jQuery("#minPrice").length
 && jQuery("#maxPrice").length){
 jQuery("#jsSlider").slider({
  min: 0,
  max: 1000,
  values: [0,1000],
  range: true,
  stop: function(event, ui) {
  jQuery("#minPrice").val(jQuery("#jsSlider").slider("values",0));
  jQuery("#maxPrice").val(jQuery("#jsSlider").slider("values",1));
  },
  slide: function(event, ui){
  jQuery("#minPrice").val(jQuery("#jsSlider").slider("values",0));
  jQuery("#maxPrice").val(jQuery("#jsSlider").slider("values",1));
  }
});
};
});

Как видите, пример отличается всего лишь в несколько строчек: if(jQuery(«#jsSlider»).length && jQuery(«#minPrice «).length && jQuery(«#maxPrice»).length){ — если в контексте страницы есть контейнер для слайдера – div id=» jsSlider», а также оба текстовых поля: id=»minPrice»,id=»maxPrice» – только тогда выполняем инициализацию плагина jquery slider ui.

Такой код не вызовет ошибки даже тогда, когда все эти элементы отсутствуют (на указанной странице просто нет минимальной формы поиска). Плагин просто не будет инициализирован.

Вывод прост: перед инициализацией jQuery плагинов проверяйте наличие необходимых для их работы элементов в контексте страницы при помощи свойства .length во избежание дальнейших ошибок.