4

Есть сайт на рельсах и навигация по сайту полностью на jquery без перезагрузки страниц(не знаю хорошо это или плохо). Все работает, но не так как хотелось бы, код я писал по мере изучения самого языка. Есть меню(заказы, магазин..) с активным "remote: true"

link_to order_index_path, remote: true
link_to shop_index_path, remote: true

... или тоже самое, но в цикле:

- menu.each do |m|
    - if ((m.parent == 0) && (can? :read, m.access.constantize))
      = link_to eval(m.link), remote: true do
        .menu-btn = m.title

В каждом "index.js" присутствует определенный jQuery(ajax) код:

$("#main_content").html("<%= j (render 'index') %>")
...
   $(#somebutton).click(function(){
      console.log('help')
   })
...

Если я перехожу на нужную мне вкладку используя меню (link_to order_index_path, remote: true), то все работает(логично что подключается index.js), но если перезагрузить страницу, то jQuery код не работает. Мне приходится дублировать код и прописывать его в coffee script или в application.js

Подобная ситуация встречается везде.

Например, мне нужно создать новый заказ, для этого я использую модальное окно (с использованием "slide" эффекта) и когда заказ создан, то в create.js отрисовывается только сама таблица, а не index

<% if !@order.errors.empty? %>
...
<% else %>
  $(".panel .panel-body").html("<%= j (render "ordertable") %>")
  $("#product-modal").modal("hide")
<% end %>

Возвращаясь к началу, jQuery код с $(#somebutton).click в order_index_path после срабатывания create.js так-же перестает работать. Далее в create.js мне снова приходится дублировать то же самое действие. И на выходе мы получаем дубликат уже в 3-х вьюхах: index.js, coffeescript(application.js) и собственно в create.js(update.js)

Как быть? Как мне все это оптимизировать?

Обновление

Как я написал выше, все работает. Мне хочется оптимизировать код. Я не считаю правильным копировать один и тот же эвент во все вьюхи, которые связаны с index-ами. Как же DRY? При переходе по ссылке подгружается index.js, при перезагрузке страниц подгружается coffee и application.js, но не используется index.js и наоборот. Можно как нибудь обойтись например только coffee?

2
  • У вас не работает javascript/jquery код в элементах подгруженных динамически через ajax запросы?
    – Visman
    21 сен 2015 в 10:05
  • Насчет избавление от дубликатов в assets есть require. т.к у вас динамически обновляется контент, используйте события следующим образом $(document).on('event_name', '.element', function() { }); и это достаточно выполнить при начальной инициализации
    – Invision
    26 янв 2016 в 9:25

1 ответ 1

1

Есть сайт на рельсах и навигация по сайту полностью на jquery без перезагрузки страниц(не знаю хорошо это или плохо).

Воспользуйтесь turbolinks для решения вашей задачи

https://github.com/rails/turbolinks

Статья на русском

https://habrahabr.ru/post/167161/

Пример использования

https://my100brands.com

В качестве прелоадера я воспользовался плагином NProgress http://ricostacruz.com/nprogress/

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

initDomPage = ->
 # исполнить код при начальной инициализации DOM дерева

 # Прелоадер для Ajax запросов
 $(document).ajaxSend ->
   NProgress.set(0.7).start()

 $(document).ajaxComplete ->
   NProgress.done()

 $(document).ajaxError ->
   NProgress.done()

initPage = ->
 # исполнить код при обновлении страниц и начальной инициализации

$(document).on 'ready', initPage
$(document).on 'ready', initDomPage
$(document).on 'page:load page:restore', initPage
$(document).on 'page:before-change', -> NProgress.set(0.7).start()
$(document).on 'page:change', ->
  NProgress.remove()
  NProgress.done()

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.