rails 4 - файлы javascript необходимо вызывать дважды, чтобы работать

0

У меня есть следующий тег javascript include в файле application.html.erb:

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

Это приводит к следующим браузерам:

<link data-turbolinks-track="true" href="/chosen.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/jquery.ui.core.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/jquery.ui.theme.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/jquery.ui.datepicker.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/colorbox.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/conversations.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/employer_profile.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/employer_profiles.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/footer.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/freelancer_profile.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/header.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/home.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/jobs.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/jquery.c2selectbox.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/jquery.jscrollpane.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/popup.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/profiles.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/projects.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/relationships.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/schedules.css" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/static_pages.css" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/jquery.js"></script>
<script data-turbolinks-track="true" src="/jquery_ujs.js"></script>
<script data-turbolinks-track="true" src="/jquery.ui.core.js"></script>
<script data-turbolinks-track="true" src="/jquery.ui.datepicker.js"></script>
<script data-turbolinks-track="true" src="/users.js"></script>
<script data-turbolinks-track="true" src="/conversations.js"></script>
<script data-turbolinks-track="true" src="/dynamic_forms.js"></script>
<script data-turbolinks-track="true" src="/employer_profiles.js"></script>
<script data-turbolinks-track="true" src="/functions.js"></script>
<script data-turbolinks-track="true" src="/jobs.js"></script>
<script data-turbolinks-track="true" src="/jquery-1.8.3.min.js"></script>
<script data-turbolinks-track="true" src="/jquery.c2selectbox.js"></script>
<script data-turbolinks-track="true" src="/jquery.carouFredSel-6.2.0-packed.js"></script>
<script data-turbolinks-track="true" src="/jquery.checkbox.radio.js"></script>
<script data-turbolinks-track="true" src="/jquery.colorbox-min.js"></script>
<script data-turbolinks-track="true" src="/jquery.jscrollpane.min.js"></script>
<script data-turbolinks-track="true" src="/jquery.mousewheel.js"></script>
<script data-turbolinks-track="true" src="/modernizr.js"></script>
<script data-turbolinks-track="true" src="/profiles.js"></script>
<script data-turbolinks-track="true" src="/projects.js"></script>
<script data-turbolinks-track="true" src="/relationships.js"></script>
<script data-turbolinks-track="true" src="/schedules.js"></script>
<script data-turbolinks-track="true" src="/static_pages.js"></script>
<script data-turbolinks-track="true" src="/abstract-chosen.js"></script>
<script data-turbolinks-track="true" src="/select-parser.js"></script>
<script data-turbolinks-track="true" src="/chosen.jquery.js"></script>
<script data-turbolinks-track="true" src="/chosen-jquery.js"></script>
<script data-turbolinks-track="true" src="/cocoon.js"></script>
<script data-turbolinks-track="true" src="/application.js"></script>

По некоторым причинам некоторые из javascript в браузере (например, выпадающее меню) не будут работать, если я также отдельно не добавлю файлы javascript, которые уже выдает исходный javascript_include_tag. Например, javascript не будет работать, кроме как в этом оригинальном javascript_include_tag, я также поставлю:

<%= javascript_include_tag "jquery-1.8.3.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.checkbox.radio.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.mousewheel.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.jscrollpane.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.carouFredSel-6.2.0-packed.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.c2selectbox.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "modernizr.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.colorbox-min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "functions.js", "data-turbolinks-track" => true %>

который выводит:

<script data-turbolinks-track="true" src="/jquery-1.8.3.min.js"></script>
<script data-turbolinks-track="true" src="/jquery.checkbox.radio.js"></script>
<script data-turbolinks-track="true" src="/jquery.mousewheel.js"></script>
<script data-turbolinks-track="true" src="/jquery.jscrollpane.min.js"></script>
<script data-turbolinks-track="true" src="/jquery.carouFredSel-6.2.0-packed.js"></script>
<script data-turbolinks-track="true" src="/jquery.c2selectbox.js"></script>
<script data-turbolinks-track="true" src="/modernizr.js"></script>
<script data-turbolinks-track="true" src="/jquery.colorbox-min.js"></script>
<script data-turbolinks-track="true" src="/functions.js"></script>

Поэтому я не понимаю, почему файлы javascript нужно включать дважды. Я почти уверен, что это неверно, и их следует включать только один раз, но я не могу заставить js работать тогда. Как это исправить?

ПРИМЕЧАНИЕ. - Существует много javascript, поэтому я не знаю точно, где, например, находится раскрывающийся список, но я знаю, что сам javascript работает. Я почти уверен, что проблема связана с тем, как вызываются js файлы.

Теги:
ruby-on-rails-4

2 ответа

1
Лучший ответ

В первом включении вы не включаете jQuery, пока не включите пользовательский интерфейс jQuery, который, вероятно, поможет отобразить меню. После того, как вы загрузите файлы во второй раз, доступны зависимости.

Попробуйте включить JavaScript в том порядке, в котором это необходимо, jQuery не имеет зависимостей, тогда как jQuery UI зависит от jQuery, поэтому обязательно включите jQuery перед пользовательским интерфейсом jQuery и сделайте то же самое для любых других файлов JavaScript с зависимостями, обязательно включите их после файл, от которого они зависят.

Или вы можете включать в себя 2 разных версии jQuery каждый раз: я вижу jquery.js и jquery-1.8.3.min.js в каждом списке. jquery-1.8.3.min.js появляется после пользовательского интерфейса jQuery, который мне кажется плохим.

  • 0
    О, вы знаете, как изменить порядок вывода «javascript_include_tag« application »»? Я думаю, что это плохая форма в рельсах, чтобы перечислить все include_tags, javascript_include_tag «application» »должен быть единственным.
  • 0
    Я понятия не имею, как это сделать, Google будет вашим другом или, возможно, другой ответ StackOverflow.
0

Включите драгоценный камень 'turbolinks'
затем измените application.js как

//= требуется jquery
//= требуется jquery_ujs
//= требуется turbolinks
//= требуется jquery-1.8.3.min
//= require_tree.

и в макете это приложение <% = javascript_include_tag "%>

вам нужно попробовать эти шаги, нет необходимости вызывать файлы javascript в макете otherthen application.js

Ещё вопросы

Сообщество Overcoder
Наверх
Меню