рельсы - JQuery неопределен при загрузке и после работы, как ожидалось - PullRequest
0 голосов
/ 26 апреля 2019

Я новичок в Rails (использую Rails 5.1.7 на ruby ​​2.5.3-p105), у меня возникли некоторые проблемы при установке шаблона для работы на моей целевой странице.Я использую bootstrap 4 и jQuery 3.

(это шаблон https://startbootstrap.com/themes/agency/)

Error

Кажется, что jQuery загружается после всехкак-то загружаются другие скрипты.

Я пытался поставить jquery для загрузки раньше, чем bootstrap, но безрезультатно. Попытался изменить ордера и на turbo_links.

assets/javascripts/application.js выглядит следующим образом

//base
//= require jquery3
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//
//template
//= require popper
//= require bootstrap
//
//vendors
//= require jquery-easing/jquery.easing
//
//assets
//= require template/agency
//= require template/contact_me
//= require template/jqBootstrapValidation

Нужно ли ставить javascript_include_tag в application.html.erb для jQuery и bootstrap? Или достаточно просто драгоценных камней? Может ли это быть причиной?

Я надеялсячтобы шаблон работал точно так же, как он работает автономно. Может кто-то пролить свет?

Большое вам спасибо!

Редактировать: строка, которая выдает ошибку,

 // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

Но это не должно иметь значения, потому что дело в том, что jQuery не загружается

Ответы [ 2 ]

1 голос
/ 27 апреля 2019

Вы должны обернуть код, который выполняет эту функцию в обратном вызове, в ready событие jquery https://api.jquery.com/ready/.

Также обратите внимание, что вы также используете turbolinks, у него есть свое собственное событие для загрузки страницы (document.addEventListener('turbolinks:load', function(e){....})), которое запускается turbolinks.

Вам может понадобиться вложить оба обратных вызова, чтобы убедиться, что все готово.

Что-то вроде:

document.addEventListener('turbolinks:load', function(e) {
  //code that should be run on each page load

  $(document).on('ready', function() { // you can use the shortcut $(function() {
    //code that should be run on each page load after jquery was initialized
  }
})
1 голос
/ 26 апреля 2019

Я сталкивался с той же проблемой раньше с jquery gem. Теперь для всех моих веб-приложений я буду использовать jquery cdn вместо gem и ставить после тега.

Ниже приведены коды из моего примера веб-приложений.

 <meta name="viewport" content="width=device-width">
    <%= stylesheet_link_tag    'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', media: 'all', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <%= yield %>
  </body>
  <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js' , 'data-turbolinks-track': 'reload'%>

Надеюсь, что это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...