使用模态显示编辑路径答案

【问题标题】：Using a modal to show edit path使用模态显示编辑路径
【发布时间】：2012-04-02 17:11:37
【问题描述】：

我正在编写一个非常简单的 ruby on rails 3 应用程序：用户可以创建显示在其主页上的帖子，以及编辑和删除这些帖子。我的问题与编辑功能有关。我知道编辑内容的典型方法是调用

<%= link_to "edit", edit_post_path(post_item) %>

其中 post_item 是选定的帖子。但是，我不想将用户重定向到编辑页面（/views/posts/edit.html.erb），而是希望当用户单击编辑按钮时，编辑页面以模式呈现。我正在使用 twitter-bootstrap，并且知道如何创建模态。有什么想法吗？

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-3 twitter-bootstrap

【解决方案1】：

不确定您是否仍在处理此问题，我遇到了类似的问题并通过执行以下操作解决了它：

我使用的是 jquery-ui 对话框，而不是引导模式，因为它无法正常工作。因此，如果您没有它，请在此处添加库。

在 assets/javascripts/application.js 我有

$(document).ready(function() {

        var modal=$('#modal');
        $('#edit_house_link').click(function(e) {
          var edit_url = $(this).attr('href'); 
          modal.load(edit_url + ' #content',function(){
            modal.dialog("open");
          });
        });
        modal.dialog({ autoOpen: false, title: "Your title", draggable: true,
        resizable: false, modal: true, width:'auto'});

    });

然后在我的 layouts/application.html.erb 我有

<p id="modal"></p>

页面正文中的某处，这是我们要加载所有信息的元素。

在我的索引视图中，我有处理此问题的链接，请注意我的模型称为房屋，因此请更改为您的模型。

<%= link_to 'Edit', edit_house_path(house), :remote => true, :id => 'edit_house_link' %>

如您所见，我给它的是 edit_house_link id，我在 application.js 文件中引用了它。

在我拥有的房屋控制器内：

def update
  @house = House.find(params[:id])
  respond_to do |format|
    if @house.update_attributes(params[:house])
      format.js 
    else
      format.js
    end
  end
end

然后我有三个视图，一个是views/houses文件夹的edit.html.erb、update.js.erb和_form.html.erb。

所以在 views/houses/update.js.erb 我有：

<%- if @house.errors.any? %>
  $('#modal').html('<%= escape_javascript(render('form')) %>');
<%- else %>
  $('#modal').dialog('close');
  $('#modal').remove();
  window.location.reload();
<%- end %>

这段代码是为了防止模态框在出现错误时关闭。如您所见，如果不存在错误，则会关闭对话框并刷新页面以显示更改。

在 views/houses/edit.html.erb 文件中，这是我所拥有的：

<div id="content">
<%= render :partial => 'form' %>
</div>

因此，如果您再次查看 application.js 文件中的内容 id，我们将其加载到模式中。

最后是部分视图/houses/_form.html.erb

<%= simple_form_for(@house, :html => { :class => 'form-vertical' }, :remote => true) do |f| %>
<fieldset>
    <%= f.input :address %>
    <%= f.input :postcode %>
    <%= f.input :city %>
    <%= f.input :country %>
</fieldset>
    <div class="form-actions">
    <%= f.button :submit %>
    </div>
<% end %>

我使用的是 simple_form，因此您可以通过使用普通表单来适应您的需求，但我必须添加 :remote => true 属性才能使其实际工作。

希望这会有所帮助！

【讨论】：

【解决方案2】：

最简单的方法是为您的链接设置 remote => true 选项。在客户端渲染 js，它将与您的表单一起渲染，并调用 $('#myModal').modal(options) 并打开对话框。

【讨论】：

你能给我一个如何做到这一点的例子吗？我一直在努力解决这个问题，但无济于事。
具体来说，我希望在模式中预先填充字段，因为它们位于编辑页面上。你能澄清一下我应该如何渲染 js 来渲染我的表单部分吗？

【解决方案3】：

试图遵循投票的答案，但它对我不起作用。所以我计划了一个可行的解决方案。这是我所做的。

1.) 我首先在我的资产 javascript 中添加了 //= require jquery-ui

2.) 我创建了一个表单来编辑我的笔记。这里使用了 ID 名称。如果您注意到我在表单标签上的 URL 是一个空字符串。你会在我的 javascript 上看到。


<%# this is the form that is used to update the notes %>
<div id="dialog" title="Update Notes">
  <%= form_tag('', method: "put", class: 'comment_form', id: 'workorder_form') do %>
    <div>
      <%= text_area_tag(:message, '', class: "form-control workorder_notes_text_area") %>
    </div>
    <div class="mt-5 text-right">
      <%= submit_tag("Submit", type:"submit", class:"btn btn-primary", id: 'workorder_notes_button')  %>
    </div>
  <% end %>
</div>

3) 对于列出的每个注释，我都会获取注释 ID 并将其附加到注释消息中

<%# id attribute is also used to get the %>
   <td class="text-center" id="note_message_id_<%=note.id%>">
        <%= note.message %>
   </td>

4) 对于编辑按钮，我使用 data 属性添加了一些数据，例如笔记的 ID。此外，classname edit-workorder 被用来监听每个按钮的点击事件

<button data-notesid="<%= note.id%>" class="btn btn-success edit-workorder">
   <span class="icon icon-pencil"></span> 
</button>

JAVASCRIPT 部分

5) 监听每个编辑按钮的点击事件

$('.edit-workorder').click(function(e) {}

the next javascript are inside the click event function

6) 这会抓取按钮数据属性中的数据。请参阅第 4 条。

const notesId = $(this).data('notesid');

7) 这将抓取当前消息并对其进行修剪。

// this will return the current notes and removes spaces
    const notesMsg = $(`td#note_message_id_${notesId}`)
      .text()
      .trim();

8) 抓取对话框。

// dialog modal
    // this comes from _workordernotes.html.erb
    const dialogUI = $('#dialog');

9) 这将附加到 form_tag，因此 URL 将是动态的。由于笔记的 ID，我需要这个。

 $('#workorder_form').attr('action',`${workorderId}/workordernotes/${notesId}`);

10) 这是对话部分。 close 方法很重要，因为当您第一次打开模式并关闭它时。操作 URL 不会更改，因为状态被保留。您需要销毁元素或将它们置于初始状态（空字符串状态）。

  // dialog API
    // https://api.jqueryui.com/dialog/
    dialogUI.dialog({
      modal: true,
      draggable: false,
      height: 400,
      width: 600,
      resizable: false,
      // show: { effect: 'slideDown', duration: 1000 },
      // on close dailog should return from its normal state or else
      // action attribute wont change
      close: function(e, ui) {
        dialogUI.dialog('destroy');
      }
    });

11) 最后，这会将当前消息附加到表单的文本区域。

$('textarea#message').val(notesMsg);

workordernotes_controller.rb RoR

12) 这是我的更新方法。这还没有完成。我只需要在这里创建一个 try-catch 块然后就完成了。但在它的所有工作中。

def update
   Spree::Workordernote.find(params[:id]).update(message: params[:message])
   redirect_to admin_workorder_path(params[:workorder_id])
end

完整的 JAVASCRIPT 代码

$(document).ready(function() {
  $('#dialog').hide();

  const workorderId = $('tbody#table_body').data('workorderid');

  $('.edit-workorder').click(function(e) {
    e.preventDefault();

    // returns the workordernotes ID
    // this comes from _workordernotes.html.erb button
    const notesId = $(this).data('notesid');

    // this will return the current notes and removes spaces
    const notesMsg = $(`td#note_message_id_${notesId}`)
      .text()
      .trim();

    // dialog modal
    // this comes from _workordernotes.html.erb
    const dialogUI = $('#dialog');

    // this should be called before dialog or else action attr wont attached
    $('#workorder_form').attr(
      'action',
      `${workorderId}/workordernotes/${notesId}`
    );

    // dialog API
    // https://api.jqueryui.com/dialog/
    dialogUI.dialog({
      modal: true,
      draggable: false,
      height: 400,
      width: 600,
      resizable: false,
      // show: { effect: 'slideDown', duration: 1000 },
      // on close dailog should return from its normal state or else
      // action attribute wont change
      close: function(e, ui) {
        dialogUI.dialog('destroy');
      }
    });

    // attached the old message on text area
    $('textarea#message').val(notesMsg);
  });
});

【讨论】：