Question

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

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

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

Answer 1

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

我正在使用jquery-ui对话框，而不是bootstrap模式，因为无法使其工作。所以如果没有它，请添加库。

在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>

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

在我的索引视图中，我有一个处理这个的链接，请注意我的模型叫做house，所以改为调用你的名字。

<%= 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 / house文件夹的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，我们就会在模态中加载它。

最后是部分views / 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 =＆gt;它真正起作用的真实属性。

希望这会有所帮助！

Answer 2

最简单的方法是设置remote =＆gt;链接的真实选项。在客户端渲染js，它将使用您的表单呈现部分，并调用$（'＃myModal'）。modal（options）并打开对话框。

Answer 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。此外，类名edit-workorder用于监听每个按钮的点击事件

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

JAVASCRIPT PART

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

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

the next javascript are inside the click event function

6）这将在按钮的data属性内获取数据。请参阅编号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）这是对话框部分。关闭方法很重要，因为当您第一次打开模态并关闭它时。操作网址不会更改，因为状态已保留。您需要销毁元素或将其置于初始状态（空字符串状态）。

  // 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);
  });
});

使用模态显示编辑路径

3 个答案: