Rails+Bootstrap模态渲染但不显示
Rails+Bootstrap Modal renders but doesn't show
我可以让模态在 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>
编辑:添加模态代码
原来我所要做的就是将 'data-toggle'='modal'
从 link 删除到模态。 javascript 正在显示它,然后 html 将切换它使其再次隐藏。
我可以让模态在 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>
编辑:添加模态代码
原来我所要做的就是将 'data-toggle'='modal'
从 link 删除到模态。 javascript 正在显示它,然后 html 将切换它使其再次隐藏。