如何將此Bootstrap Javascript與link_to鏈接？

Question

我試圖做到這一點，以便當用戶單擊此“新筆記”按鈕時，它將創建一個模態，允許他們添加新筆記。 因此，為此，我需要此模式以具有notes_controller =>'new'操作。 但是我不太確定如何去做。 這是我到目前為止的內容：

#views/websites/show.html.erb (not whole file)
<div class="tab-pane" id="notes"><%= render 'notes/index' %><br /> 
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  New note
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

因此，基本上，我希望單擊此按鈕后從notes控制器中加載new_note操作，我將如何執行此操作？ 我閱讀了其他一些類似的問題，但無法獲得有效的答案。

Answer 1

如果我了解您要執行的操作，則有兩種方法：

1）創建其他ajax調用，如下所示：

$(document).on('click', '[data-target=#myModal]', function() {
  $.get(#{new_note_path.to_json}, function(data) {
    // work with data here
  })
})

2）將data-remote添加到您的鏈接，這使您可以通過ajax加載模式內容。 您可以在此處閱讀有關模式選項的信息： http : //getbootstrap.com/javascript/#modals