具有单击时的引导模式窗体在屏幕过渡或某些操作后不显示

我想每次在 Rails 应用程序中都使用 Bootstrap 模态表单输入，但在链接到其他页面或某些操作后，模态表单没有显示(然后，也许 CoffeScript .on 单击无效(。我找不到解决方法。我注意到在失去有效性之前直接在网络浏览器上运行的蓝线。刷新屏幕、初始化或再次执行某些操作后，模态表单再次运行良好。

咖啡脚本

$ ->
  $('#topic_new').on 'click', ->
    $('#topic_modal').modal("show")

索引.html.erb

<p id="notice"><%= notice %></p>
<div id="topic_new">
  <%= render "new" %>
</div>
<div id="topic_modal" class="modal fade topic_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <%= render "modal_form" %>
</div>
<h1>Listing Topics</h1>
<table>
  <thead>
    <tr>
      <th>Index</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @topics.each do |topic| %>
      <tr>
        <td><%= topic.index %></td>
        <td><%= link_to 'Destroy', topic, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<br>

_new.html.erb

<%= render 'form' %>

_form.html.erb

<%= form_for(@topic) do |f| %>
  <% if @topic.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@topic.errors.count, "error") %> prohibited this topic from being saved:</h2>
      <ul>
      <% @topic.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.label :index %><br>
    <%= f.text_field :index %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

bootstrap_modal_form

<div class="modal-dialog">
  <div class="modal-content">
    <%= form_for(Topic.new, remote: true, authenticity_token: true) do |f| %>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="field">
          <%= f.text_area :index %>
        </div>
        <%= f.submit 'Create Topic' %>
      </div>
    <% end %>
  </div>
</div>

topics_controller.rb

class TopicsController < ApplicationController
  before_action :set_topic, only: [:destroy]
  def index
    @topics = Topic.all
    @topic = Topic.new
  end
  def create
    @topic = Topic.new(topic_params)
    respond_to do |format|
      if @topic.save
        format.html { redirect_to root_path, notice: 'Topic was successfully created.' }
        format.json { render :show, status: :created, location: @topic }
      else
        format.html { render :new }
        format.json { render json: @topic.errors, status: :unprocessable_entity }
      end
    end
  end
  def destroy
    @topic.destroy
    respond_to do |format|
      format.html { redirect_to topics_url, notice: 'Topic was successfully destroyed.' }
      format.json { head :no_content }
    end
  end
  private
    # Use callbacks to share common setup or constraints between actions.
    def set_topic
      @topic = Topic.find(params[:id])
    end
    # Never trust parameters from the scary internet, only allow the white list through.
    def topic_params
      params.require(:topic).permit(:index)
    end
end

top_controller.rb

class TopController < ApplicationController
  def index
    redirect_to topics_path
  end
end

应用程序.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>AaaExam</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <header>
    <%= link_to 'Topic', topics_path %> |
    <%= link_to 'Topic with redirect', root_path %>
  </header>
  <hr>
<%= yield %>
</body>
</html>

嘀咕的屏幕图像在此处输入图像描述

蓝线在此处输入图像描述

在index.html.erb文件中，

<div id="topic_modal" class="modal fade topic_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <%= render "modal_form" %>
</div>

您尝试渲染"modal_form"，但我找不到_modal_form.html.erb文件。你能发布这个文件的内容吗？

P/s：对不起，我没有足够的声誉来写评论。

相关内容

最新更新

热门标签：