Rails+Bootstrap 模态渲染但不显示答案

【问题标题】：Rails+Bootstrap Modal renders but doesn't showRails+Bootstrap 模态渲染但不显示
【发布时间】：2024-10-30 02:45:02
【问题描述】：

我可以让模态框在 DOM 中呈现，但我不能让它显示，我让它瞬间闪烁，但它没有停留。这是相关代码。

tasks_controller.rb

def edit
  @task = Task.find(params[:id])
  respond_to do |format|
    format.html
    format.js
  end   
end

edit.js.erb

$(document).ready( function() {
  $("#edit_task_modal").html("<%= escape_javascript(render 'tasks/edit_task_modal') %>");
  $("#edit_task_modal").modal('show');
});

_edit_task_modal.html.erb

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button id="close_edit_task_modal" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title" id="edit_task_modal_label">Edit Task</h4>
    </div>
    <%= form_for(:task, url: {action: 'update', id: @task.id},:html => {:class => 'form-horizontal'}) do |f| %>
      <div class="modal-body">
          <%= render(partial: 'form', locals: {f: f}) %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <%= f.submit 'Save Changes', class: 'btn btn-primary' %>
      </div>
    <% end %>
  </div>
</div>

_task_div.html.erb

<div class="task well">
  <a>Title: <%= "#{task.title}" %></a><br/>
  Description: <%= "#{task.description}" %> <br>
  Status: <%= "#{task.status}" %> <br>
  Due Date: <%= "#{task.due_date}" %> <br>
  Completed Date: <%= "#{task.completed_date}" %> <br>
  <div style='text-align:right;'>
    <%= link_to 'Edit', {controller: 'tasks', action: 'edit', id: task.id},  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#edit_task_modal'}  %>    
  </div>
</div>

show.html.erb

<div id="edit_task_modal" class="modal fade" role="dialog" aria-labelledby="edit_task_modal_label" aria-hidden="true" tabindex="-1"></div>

编辑：添加模式代码

【问题讨论】：

与论坛网站不同，我们不使用“谢谢”、“任何帮助表示赞赏”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“在先致谢”。
实际的<div class="modal" id="edit_task_modal"> 在哪里？它不在您的任何 sn-ps 中。
你想做什么？我猜当 index.html.erb 页面中的 new 按钮或 edit 链接时，会在那里显示模式对话框以创建或更新任务.对吗？
正确。表单确实在 DOM 中呈现，并正确连接到控制器以创建或更新任务。我只是无法让模式出现在 UI 中。

标签： ruby-on-rails twitter-bootstrap bootstrap-modal

【解决方案1】：

原来我所要做的就是从模态链接中删除'data-toggle'='modal'。 javascript 显示它，然后 html 将切换它使其再次隐藏。

【讨论】：