Question

我有一个包含共享类别参数的图片。现在，当我在一个模态中创建或编辑该图像时，它的功能正常。它使用几个js.erb部分来调用new，创建，编辑和更新。

我还希望能够通过单击复选框更新图像显示页面上的类别，并在不按下按钮的情况下立即使用ajax进行更新。其中大部分也适合我。如果我单击复选框并按下按钮进行更新，请执行控制器中的更新操作。编写我的CoffeeScript，如果检查其中一个框，我将它设置为console.log或alert（“whatever”）它将会。我需要做的是弄清楚如何连接这两个，而不使用之前使用的update.js.erb和edit.js.erb，因为它们触发打开模态，其他触发器关闭它。在这种情况下，这些都不是必需的。

我无法解决的问题是，因为我已经在使用更新和编辑操作，我如何调用它们来执行新操作，更新渲染任何内容？

我认为可以在路径中创建额外的图像路径，并在控制器中创建新动作。由于我不确定这是否是正确的方法，我试图在网上找到可能涵盖这个主题的教程或博客帖子，但我还没有到达任何地方。

有谁知道如何做我想弄清楚的事情？在此先感谢您的任何帮助

编辑已添加的代码并更好地尝试描述：

这是我在index中开始的更新操作的代码。一个链接用于调用edit.js.erb，它调用edit.html.erb，它将表单部分呈现。点击提交更新后。 update.js.erb被称为关闭模式，保存更新并在原始索引页面上呈现更新。我喜欢这个我的工作方式：

ImageController

...

 def show
    @image = Image.find(params[:id])
    @categories = current_user.categories.all
  end

  def update
    @image.update(image_params)
      redirect_to user_images_url(current_user), notice: 'Image Updated'
  end

  private
def image_params
   params.require(:image).permit(:file, :start_at, :end_at, category_ids: [])
end

edit.js.erb

$("#image-modal").html("<%= j render 'edit' %>")
$("#image-modal").modal("show")

edit.html.erb

<%= render 'form' %>

图像/ _form.html.erb

<%= simple_form_for shallow_args(current_user, @image) do |f| %>


<%= f.label :category_ids, "Categories" %><br>
<%= f.collection_select :category_ids,  current_user.categories.all, :id, :name, {}, { multiple: true } %>

<%= f.file_field :file, class: "fileinput-new" %>

<%= f.button :submit, "Add" %><br>
<%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>

update.js.erb

$("#images_<%= @image.id %>").replaceWith("<%= j render @image %>").preventDefault()
$("#image-modal").modal("hide")

这是令我困惑的代码。在@image显示页面上，它们是与图像的用户/所有者相关联的类别的集合，以及用户创建的所有类别，无论它们当前是否与此图像相关联。与此图像关联的类别在其复选框中有复选标记，其他类别则没有。如果我在另一个复选框中选中并按提交，它会像没有ajax关联的普通表单一样更新，重新加载整个页面。我想说，当我在未选中的复选框中打勾或取消选中复选框时，它会立即更新数据库而无需按下更新按钮。我已经使用update.js.erb和edit.js.erb来从索引页面更新我的图像，因此我无法使用它们从显示页面（tutorials tell me to use them）更新我的图像。来自show页面的更新的jquery行为与来自索引页面的更新的jquery非常不同。

关于我的coffeescript的一点是要证明.click脚本有效，所以我的问题不在于那部分。

我希望这更清楚。

图像/ show.html.erb

<div class="image-show">

    <%= image_tag(@image.file_url(:show).to_s) %>

</div>

<div id="category-list">
    <%= simple_form_for shallow_args(current_user, @image), remote: true do |f| %>

        <%= f.collection_check_boxes :category_ids,  current_user.categories.all, :id, :name, {}, { multiple: true } %>
        <%= f.button :submit, "Add" %><br>
    <% end %>

</div>

images.coffee

$ ->
  $('.edit_image input[type=submit]').remove()
  $('.edit_image input[type=checkbox]').click ->
    $(this).parent('form').submit()
    return

Answer 1

事实证明，我首先要解决的问题是什么。

我的解决方案的简短版本是，当我在.parent('form')点击事件上调用.edit_image时，由于某种原因，我无法在DOM上找到form＃＆＃ 39;我不完全确定这一点。 $(this).closest('form).submit()能够在DOM上找到form，并且无需重新加载页面即可成功为我的图片添加和删除类别。

可能影响我的结果的一些其他问题是update ImagesController方法respond_to format.js没有@image.update(image_params) @image.update_attributes!(image_params我更改了shallow_args到def update @image.update_attributes!(image_params) respond_to do |format| format.html { redirect_to user_images_url(current_user), notice: 'Image Updated' } format.js end）。我还删除了我的<%= simple_form_for @image, remote: true do |f| %> <%= f.collection_check_boxes :category_ids, current_user.categories.all, :id, :name, {}, { multiple: true } %> <%= f.button :submit, "Add" %><br> <% end %>帮助器方法，该方法确定这是一个项目的新实例还是在共享表单上编辑旧实例，因为这只是一个用于编辑的表单。

最终相关代码：

ImageController

$(document).on "turbolinks:load", ->
  $('.edit_image input[type=submit]').remove()
$ ->
  $('.edit_image input[type=checkbox]').click ->
    $(this).closest('form').submit()
    return

图像/ show.html.erb

{{1}}

images.coffee

{{1}}

如何从两个不同的视图更新对象？

1 个答案: