Question

我正在尝试这样做，以便当用户点击此“新笔记”按钮时，它将创建一个模式，允许他们添加新笔记。所以为此，我需要这个模态来拥有notes_controller =＆gt; '新'行动。但我不确定如何解决这个问题。以下是我到目前为止的情况：

#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

如何将此Bootstrap Javascript与link_to链接？

1 个答案: