Приложение My Rails не будет загружать всплывающее окно Jquery без жесткого обновления - PullRequest
Новая
       8

Приложение My Rails не будет загружать всплывающее окно Jquery без жесткого обновления

0 голосов
/ 07 мая 2018

Я последовал учебнику для простого всплывающего окна,

демоверсия найдена здесь: http://demos.inspirationalpixels.com/popup-modal/ код найден здесь: https://inspirationalpixels.com/tutorials/custom-popup-modal/

Моя проблема выглядит следующим образом:

  1. Приземлитесь на 1-й странице, нажмите всплывающую кнопку - откроется всплывающее окно.
  2. Закрыть всплывающее окно и перейти ко 2-й странице.
  3. Вернуться на 1-ю страницу, нажать всплывающую кнопку - ничего не происходит.

Я думаю, что проблема с Turbolinks. Из того, что я прочитал, Turbolinks отображает HTML с помощью Ajax вместо перезагрузки страницы, иногда это может повлиять на работу Jquery. Я прочитал документацию Turbolinks, описывающую, как это работает, и следовал их рекомендациям. Я также прошел через то, что похоже на каждое сообщение в блоге, описывающее подобные проблемы, но ничто из того, что я пробовал, не имело большого значения. Есть несколько других SO вопросов, похожих на этот, но многие из решений были сделаны до того, как вышла новая версия Turbolinks, и те, которые являются новыми, не решили мою проблему.

Вот соответствующий код.

HTML в поле зрения 

  <a data-popup-open="popup-2" href="#">Open popup</a>

  <div class="popup" data-popup="popup-2">
    <div class="popup-inner">
      <div class="popup-content">
         .
         .
         .
        <button data-popup-close="popup-2" href="#">Close popup.</button>
      </div>
    </div>
  </div>

Application.js 

//= require jquery
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .

Файл Custom.js. 

$(document).on('turbolinks:load', function() {

//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});

});

Сначала я завернул код в document.ready. Узнав, что проблема связана с турболинками, я проследил за их документацией и заменил Jquery "$ (document) .ready ..." на "$ (document) on ('turbolinks: load' ...". Проблема сохраняется. , но теперь консоль разработчика показывает ошибку необработанного типа (см. ниже) после возврата на первую страницу и нажатия всплывающего окна. 

site-wide.self-ef6....js?body=1:5 Uncaught TypeError: $ is not a function
  at HTMLDocument.<anonymous> (site-wide.self-ef6....js?body=1:5)
  at HTMLDocument.dispatch (jquery.self-bd7d....js?body=1:5227)
  at HTMLDocument.elemData.handle (jquery.self-bd7d....js?body=1:4879)
  at Object.Turbolinks.dispatch (turbolinks.self-2db6e....js?body=1:6)
  at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6e....js?body=1:7)
  at e.visitCompleted (turbolinks.self-2db6ec....js?body=1:7)
  at e.complete (turbolinks.self-2db6ec....js?body=1:6)
  at e.<anonymous> (turbolinks.self-2db6ec....js?body=1:6)
  at turbolinks.self-2db6ec....js?body=1:6

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

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

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

Эта ошибка может возникать, когда jQuery загружается дважды.

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

Другая возможность состоит в том, что где-то в коде приложения $ указывает на что-то еще. Если это так, (при условии, что jQuery также не был переопределен), исправление "bandaid" может заключаться в добавлении Custom.js к: 

var $ = jQuery;

См .: загрузка jquery дважды вызывает ошибку?

0 голосов
/ 07 мая 2018

Вы можете сделать это, поместив <%= javascript_include_tag .... %> перед закрывающим тегом body (</body>) вместо тега <head>. Нечто вроде ниже. 

  <%= javascript_tag 'application.js', data-turbolinks-track" => true %>
</body>
0 голосов
/ 07 мая 2018

Размещение моего решения.

Вы не должны заменить 

$(document).ready(function( $ ) {

с 

$(document).on('turbolinks:load', function() {

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

$(document).ready(function($) {
$(document).on('turbolinks:load', function() {

//----- Your JS code here.

});
});

Отвечайте на этот вопрос о jQuery uncaught type ошибок за ответ.

...