在 jquery 对话框中使用 rails partial答案

【问题标题】：Using a rails partial in a jquery dialog box在 jquery 对话框中使用 rails partial
【发布时间】：2010-06-23 07:43:16
【问题描述】：

我正在尝试将部分插入到 jquery 对话框中。对话框正在工作，但不是部分的..

这是我的代码：

application.js

$(document).ready(function(){
    $("#add_note").click(function(){
        $("#notes").html("<%= escape_javascript(render(:partial => @note)) %>").dialog({title: 'Basic Dialog'})
    })
})

我的看法

<div class="title">
        <span>Historique :</span>
        <span id="add_note">Ajouter une note</span>
      </div>

      <div id="notes">
      </div>

我的部分 在 myview/_note.html.erb

<div class="note">
    <%= form_for(@add_note) do |f| %>
        <dl>
          <dt>Type de note</dt>
          <dd><%= f.collection_select :note_type_id, NoteType.find(:all), :id, :label, :allow_blank => "Type" %></dd>
        </dl>
         <dl>
          <dt>Titre :</dt>
          <dd><%= f.text_field :title %></dd>
        </dl>
        <dl>
          <dt>Description :</dt>
          <dd><%= f.text_field :description %></dd>
        </dl>
        <%= f.hidden_field :project_id, :value => @project_id %>
        <%= f.hidden_field :organization_id, :value => @project.organization_id %>
        <%= f.hidden_field :user_create_id, :value => current_user.id %>
        <%= f.hidden_field :domain_id, :value => current_user.domain_id %>
        <%= f.hidden_field :created_at %>

        <div class="actions">
          <%= f.submit %>
        </div>
      <% end %>

如果您有线索，那将非常有帮助！谢谢

法比恩

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-3

【解决方案1】：

application.js 文件是存放静态 JavaScript 的地方。它不会传递给 ERB 以处理每个请求，因此您的 <%= code %> 永远不会运行。如果您将浏览器指向/javascripts/application.js，您就会明白我在说什么。

确保您对 Rails 中的请求处理方式有很好的了解。您可能在这里遗漏了一些细节。 application.js 是存在于/public/javascripts 目录中的静态文件，因此它由您的网络服务器直接提供；当浏览器获取它时，Rails 甚至不会被触及。这就像当你创建一个新的 Rails 应用程序时，你必须先删除 /public/index.html 文件，然后 Rails 才能处理 routes.rb 文件中的 map.root。

您有几个不同的选择：

Here 是较早的 Railscast 剧集，但它似乎与您正在寻找的内容很接近。它使用一个名为javascripts_controller 的控制器来生成动态javascript。这不是一个非常细粒度的方法。

在this episode 中，Ryan 用于为嵌套模型添加字段的方法可以适应您的需求。这个方法我用过几次，效果很好。

推荐方法

你也可以调用一个action，通过ajax返回partial的html，并将结果用于$(#notes).html(result)。在rails jquery ajax 上的快速搜索提供了一些关于如何实现这一点的指南（Here 似乎是合理的）。 Here 是另一个涉及 jQuery 和 Rails 2 的 Railscast 剧集。我不建议在这一点上使用 jRails，因为它已经相当过时了，而且正如剧集所提到的，它有点违背了切换到 jQuery 作为 Rails 2 的目的助手生成突兀的 JavaScript。

这是一种灵活的做事方式。您有一组用于调用远程方法的通用静态 JavaScript。在单个控制器方法中，您可以respond_to 这些 ajax 调用并返回带有动态数据、html 或 JSON 的 JavaScript。

在 jQuery 中查看 ajax 的方法列在 jQuery api 的 this section 中。 $.ajax$.post和$.get是主要的。

对于您的示例，$.get 将是一个很好的起点。这是 api 文档中的一个示例：

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

Here 是关于 Rails 3 如何处理不显眼的 JavaScript 以及 HTML5 自定义属性的 Railscast。您可以在 Rails 2 中模仿这种方法，但标准辅助方法不会为您生成 data-remote、data-method、data-disable-with 或其他 data-* 属性。您可以在 Rails 3 ujs 的 jQuery version 中看到，它最类似于我提到的前面的方法，其中控制器方法使用 $.ajax 调用并根据数据类型（默认为“脚本”）以不同方式处理响应.

【讨论】：

@Fabien：不客气。我用更多信息更新了我的答案，包括 Rails 3 的做事方式。我希望它有帮助:)

【解决方案2】：

我也一直在尝试这样做并偶然发现了这个解决方案：

http://jenwendling.com/quick-clean-modal-form-dialogs-w-jquery-eeeee/

可能更容易实现

【讨论】：

【解决方案3】：

在查看 Rails 演员表和文档之后，我最好通过查看真实世界的示例并根据需要对其进行调整。因此，如果您确实采用了 Ajax 路线（Awgy 建议）并想要更多示例，那么除了 InfectiouSoul 的链接（来自同一站点）之外，这里还有一个链接，该链接显示了使用 ajax 请求的对话框示例。

http://jenwendling.com/fancy-forgot-password-with-jqueryui-and-rails/

【讨论】：