рельсы-у js сталкиваются с фундаментом в рельсах 5.1 - PullRequest
Новая
       15

рельсы-у js сталкиваются с фундаментом в рельсах 5.1

0 голосов
/ 28 мая 2020

У меня есть скрытая форма, которая открывается в модальном представлении в приложении Rails 5.1 с использованием фундаментных рельсов. Эта форма загружается через AJAX, но когда remote: true установлен в теге link_to, модальное окно не отображается. Форма правильно вставляется на страницу, но модальное окно не отображается. Если я удалю remote: true, модальное окно выглядит нормально, поэтому они каким-то образом конфликтуют.

Это началось недавно после того, как я решил перейти с jquery_u js на rails-u js.

Ниже мой код:

приложение. js

//= require turbolinks
//= require jquery
//= require rails-ujs
//= require foundation
//= require jquery.Jcrop.min
//= require rails.validations
//= require cookies_eu
//= require Chart.bundle
//= require simple_chartjs
//= require cocoon
//= require toastr
//= require_tree .

_form. html

    <div class="cell">
        <%= link_to "Add an episode", new_webinar_path(slug: @webinar_series.slug), class: 'button small hollow', data: { toggle: "new_webinar" }, remote: true if @webinar_series.slug %>
    </div>

        <% @webinar_series.episodes_by_date.each do |webinar| %> 
            <% if webinar.id %>
                <div class="cell small-6">
                    <div class="dotted-border">
                        <h4><%= webinar.name %></h4>
                        <%= link_to "Edit", edit_webinar_path(webinar), class: 'button tiny hollow', data: {remote: true, toggle: "edit_webinar" } %>
                        <%# binding.pry%>
                        <ul class="no-bullet">
                            <li>Date: <%= webinar.date %></li>
                            <li>Time: <%= webinar.time.strftime("%R") %></li>
                        </ul>
                        <%= markdown(webinar.video) if webinar.video %>
                        <%= markdown(webinar.description) if webinar.description %>
                        <%= link_to 'Delete this episode', webinar_path(webinar), method: :delete, data: { confirm: 'Are you sure?' } %>
                    </div>
                </div>
            <% end %>
        <% end %>

<!-- Modals -->

<div class="reveal" id="new_webinar" data-reveal data-close-on-click="true" data-animation-in="fade-in" data-animation-out="fade-out">
    <div class="white-bg fixed-height">
      <div id="new-webinar-form"></div>
    </div>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

макет: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "Driving Vision" %></title>
    <%= favicon_link_tag "favicon.ico" %>
    <%= stylesheet_link_tag    "application" %>

    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <%#= analytics_init if GoogleAnalytics.valid_tracker? %>
  </head>

  <body>


    <div class="off-canvas-content" data-off-canvas-content>
      <%= render 'shared/nav_bar' %>
      <%= render 'cookies_eu/consent_banner' %>


      <%= yield %>


      <%= render 'shared/nav_menu' %>

    </div>

    <%= toastr_flash %>
  </body>
</html>

Я пробовал использовать как rails-u js, так и jquery_u js, но из-за этого формы отправлялись дважды. Я попытался изменить порядок вещей, которые требуются в приложении. js манифест. Кажется, ничего не работает. Любая помощь или идеи будут очень признательны!

...