如何通过rails中的JS请求显示twitter bootstrap模式？

Question

我想显示一个twitter bootstrap模式作为对JS请求的响应.我的show.js.erb函数看起来像这样:

$(document).ready(function() {

    $('#dialog').modal('show')

});

这里"对话框"是模态的id.模态代码本身看起来像这样:

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">&times;</a>
          <h3> Showing Modal </h3>
    </div>
    <div class="modal-body">
        I need to show up!
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Done</a>
    </div>
</div>

我确信的一件事是调用了javascript.我可以让它改变页面上的项目.另一件事是模态工作正常.当我使用HTML按钮触发请求时,它显示得很好:

<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>

知道为什么modal没有出现在JS请求上吗？

谢谢!

Answer 1

我有一个类似的问题,我解决了一点点扭曲

我的模态div在调用页面上呈现(来自部分)而不是JS请求的响应:

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Loading...</h3>
  </div>
  <div class="modal-body center">
      <%= image_tag "loading.gif" %>
  </div>
  <div class="modal-footer">&nbsp;</div>
</div>

我使用这个链接依赖rails和Twitter不显眼的JS:

<%= link_to negotiation.name, negotiation_path(negotiation), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

我的show.js.erb看起来像这样(缩短了)

$('.modal-body').html('<%= escape_javascript(render :partial => 'negotiationdetail', :object => @negotiation) %>');
$('.modal-header').remove(); // don't need a header here

这样工作正常,并且在填充模态时向用户显示"加载"动画的好处.