2015-06-11 4 views
1

Я все мои функции JavaScript в одном файле, который называется site.jsфункции Javascript в одном файле, вызывающие конфликт

Этот файл объявлен в нижней части на моей странице мастера компоновки для более быстрой загрузки.

Однако я заметил, что некоторые из моих функций не работают, если я не переключу их порядок в файле. Например, следующий порядок этих двух функций предотвращает работу виджета datetimepicker.

$(function() { 
    $(".js-multi-select").select2(); 
}); 

$(function() { 
    $('#start_dt').datetimepicker({ 
    showTodayButton: true, 
    format: 'D MMM YYYY HH:mm', 
    defaultDate: moment().hours(0).minute(0) 
    }); 
}); 

Если я изменить порядок и поместить функцию DateTimePicker перед Выбор2 fucntion то, кажется, работает.

$(function() { 
    $('#start_dt').datetimepicker({ 
    showTodayButton: true, 
    format: 'D MMM YYYY HH:mm', 
    defaultDate: moment().hours(0).minute(0) 
    }); 
}); 

$(function() { 
    $(".js-multi-select").select2(); 
}); 

Обратите внимание на странице, на которой у меня DateTimePicker поля Doesnt есть поле списка Выбор2 раскрывающихся и страница, на которой у меня есть Выбор2 выпадающего список всегда не имеет поле DateTimePicker. Я не хочу иметь десяток файлов javascript для каждой функции, поэтому я поместил их все в один файл.

Почему эти функции ведут себя таким образом, и что такое исправление, так что они работают независимо от того, независимо от того, что они объявлены в.

+2

Получение ошибок в консоли? – Ted

+0

Скорее всего, нам понадобится дополнительная информация, например, что-нибудь из консоли JS на странице, которая не работает, и т. Д. –

+0

Я предполагаю, что select2 является ошибкой. Что в консоли js? – Kenji

ответ

0

Просто удалите вторую функцию doc.ready и поместить код в ваш первый.

$(function() { 
    $('#start_dt').datetimepicker({ 
    showTodayButton: true, 
    format: 'D MMM YYYY HH:mm', 
    defaultDate: moment().hours(0).minute(0) 
    }); 
    $(".js-multi-select").select2(); 
}); 
+0

Это не связано; может быть несколько '$ (function() {...})' без проблем. –

0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>select2</title> 
<script src="./jquery.min.js"> </script> 
<link href="./jquery.datetimepicker.css" rel="stylesheet" /> 
<script src="./jquery.datetimepicker.js"></script> 
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> 
<script> 
$(function(){ 
    $('#start_dt').datetimepicker(); 
}); 

$(function() { 
    $(".js-example-basic-single").select2(); 
}); 

</script> 
</head> 
<body> 
    <select class="js-example-basic-single"> 
     <option value="AL">Alabama</option> 
     <option value="WY">Wyoming</option> 
    </select> 
    <input type="text" id="start_dt"/> 
</body> 
</html> 

Существует вероятность того, что что-то еще происходит для вас.

Поскольку на предыдущей странице я попытался переименовать класс js-example-basic-single в js-example-basic-single1, так что селектор select2 пуст. select2() не вызывает ошибку js.

Два, я переупорядочил порядок звонков, но все работает так, как ожидалось.

Следовательно, это должно быть что-то еще ИМХО.

+0

Datetimepicker, который я использую, - это bootstrap datetimepicker, и проблема связана с полем datetimepicker, а не select2. https://eonasdan.github.io/bootstrap-datetimepicker/ – adam78

Смежные вопросы