Question

我正在尝试在调用控制器操作时更新元素背景图像，但无法弄清楚它。在我看来，我有以下标签

<%= link_to '', color_animal_path(@article), method: :post, :id => "animal-image", remote: true %>

单击它时，它会在我的AnimalsController.rb中调用下面的方法

  def color
    respond_to do |format|
      format.js {}
    end
    puts 'color called'
  end

我在app / assets / javascripts中有一个名为color.js的js文件，其中包含以下内容

$('#animal-image').css('background-image', 'url("green.jpg")');

元素的css看起来像这样

#animal-image {
  float: left;
  width: 28px;
  height: 28px;
  background: grey;
  background: url('red.png') no-repeat;
  background-size: contain;
}

视图正确渲染红色图像，点击图像调用控制器（我可以看到puts输出）但是元素背景图像没有更新...我希望有人能帮忙，我是在正确的轨道上，我错过了什么？

由于

Answer 1

UJS呼叫有什么特别的原因吗？为什么不在客户端jQuery中完成所有这些？

即使有原因（例如，颜色需要由服务器动态设置，或者您想跟踪事件），我建议您在客户端单独测试它，直到它开始工作为止 - 然后重新集成Rails UJS组件。

例如，首先为绿色图像添加一个新的CSS类：

#animal-image.updated {
  background-image: url('green.png');
}

然后添加一些JS：

$( "#animal-image" ).click(function() {
  $(this).toggleClass('updated');
});

如果一切正常，那么您可以将其全部放回color.js，然后在浏览器的开发工具中验证响应是否正确回复并且正在评估。< / p>

在post action Rails中更新视图背景

1 个答案: