Question

这是一个奇怪的问题，但似乎我的引导程序模态和引导程序下拉菜单似乎无法同时工作。

如果我在布局中包含脚本

我的模态工作正常，但是单击它时我的下拉列表没有响应。当我排除脚本时，我的下拉列表可以工作，但是我的模式不响应click事件。

我似乎找不到问题了，有人有什么想法吗？

请在下面找到：

我的模态代码
下拉代码
引导代码

代码模式

views / stores / index.html.erb

<div class="show-panel-form"></div>
  <%= render "partials/show_panel_stores_overview"%>

views / partials / show_panel_stores_overview.html.erb

<%= link_to 'New store', new_store_path, remote: true %>

views / stores / new.js.erb


// Add the dialog title
$('#dialog h3').html("<i class='glyphicon glyphicon-plus'></i>");

// Render the new form
$('.modal-body').html('<%= j render("form") %>');
console.log($('#dialog'))
// Show the dynamic dialog
$('#dialog').modal("show");

// Set focus to the first element
$('#dialog').on('shown.bs.modal', function () {
    $('.first_input').focus()
  })

views / stores / _dialog.html.erb

<div class="modal fade"
           id="dialog" tabindex="-1" role="dialog"
           aria-labelledby="myModalLabel"
           aria-hidden="true"
           data-backdrop="static"
           data-keyboard="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

视图/商店/ _表单

<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>

views / stores.create.js.erb

<% if @store.errors.any? %>
  oldForm.html("<%= j( render 'form' ) %>");
<% else %>
  $('#dialog').modal('toggle');
  $('.store-cards-insert').prepend('<%= j(render @store) %>');
<% end %>

商店控制器

def new
    @store = current_user.store.build
    @store.age_tables.build
    respond_to do |format|
      format.html { redirect_to root_url, alert: 'Page not accessible' }
      format.js
    end
    authorize @store

  end

  def create
    @store = current_user.stores.create(store_params)
    authorize @store
    if @store.save
      respond_to do |format|
        format.js
      end
    else
      render 'new'
    end
  end

代码下拉菜单 views / partials / _navbar.htmlerb


  <!-- Drop down setting menu -->
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="fas fa-cog fa-3x"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
      <li><%= link_to "stores", stores_path, class: "dropdown-item" %> </li>
      <% if (@store && @store.try(:id))%>
        <li><%= link_to "Accommodations",store_accommodation_categories_path(@store), class: "dropdown-item" %> </li>
        <li><%= link_to "Users", edit_users_store_path(@store), class: "dropdown-item" %> </li>
      <% elsif (@accommodation_category) %>
        <li><%= link_to "Accommodations",store_accommodation_categories_path(@accommodation_category.store), class: "dropdown-item" %> </li>
          <li><%= link_to "Users", edit_users_store_path(@accommodation_category.store), class: "dropdown-item" %> </li>
      <% end %>
      <li> <%= link_to "Log out", destroy_user_session_path, method: :delete, class: "navlink dropdown-item" %></li>

      <%# link_to "Accommodations", store_accommodation_category_accommodations_path(@store), class: "dropdown-item" %>
    </div>
  </div>

引导文件

views / layouts / application.html.erb

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>TODO</title>
  <%= csrf_meta_tags %>
  <%= action_cable_meta_tag %>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <%= stylesheet_link_tag 'application', media: 'all' %>
  <%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
</head>
<body>
  <%= render 'shared/flashes' %>
  <%= yield %>

  <%= javascript_include_tag 'application' %>
  <%= javascript_pack_tag 'application' %>

<!-- script that changes everything -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- end of script that changes everything -->
</body>
</html>

app / assets / javascripts / application.js

// = require jquery
//= require popper
//= bootstrap-sprockets
//= require cocoon
//= require flatpickr
//= require_tree .

app / javascript / packs / application.js

import {} from 'jquery-ujs'
import "bootstrap";

gemfile

source 'https://rubygems.org'
ruby '2.5.3'

gem 'bootsnap', require: false
gem 'jquery-rails'
gem 'popper_js'
gem 'jquery-turbolinks'
gem 'bootstrap'

package.json

{
  "name": "name",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "jquery-ujs": "^1.2.2",
    "popper.js": "^1.15.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

引导程序适用于下拉菜单，但不适用于模式

0 个答案: