Question

我正在尝试执行ajax“按钮”（不是实际的表单按钮），其行为就像普通的link_to "content", some_path, remote:true一样。当我点击它时，它会交换图像以指示状态（例如开/关，投票/未投票等）

原因是，我想使用javascript添加类，交换图像，切换它们。通常，人们通过在CSS中为给定类指定background-image属性来执行此操作，并通过javascript添加/删除类。

但是，当然，如果使用rails link_to，则会创建一个标记，这是一个内联元素。这个内联元素对于上述期望的行为不友好。您最终必须使用实际的图像标记，使javascript DOM遍历，以及CSS更加混乱。你也最终做了像

这样的愚蠢的事情

<div>
  <a>
    <div>
    </div>
  </a>
</div>

只是为了将链接标记保留为a标记，同时尝试确保“按钮”的特定大小

我正在寻找一种优雅的方法来完成创建一个简单的ajax“按钮”，其行为就像一个远程链接，它不是一个表单按钮，我可以简单地添加/删除一个类到元素，以便通过CSS交换图像。

有一个很好的解决方案吗？或者我是否必须在具有指定大小的div元素上使用spaghetti jquery和ajax调用？（我已尝试在content_tag内嵌套link_to，但这并不比嵌套image_tag代替content_tag更好（我考虑过做{{} 1}}到display: block的标签。这个方法有用吗？为什么？）

Answer 1

创建了link_to上的远程选项，以允许对链接URL的ajax请求。在查询服务器时，只有在AJAX查询成功完成时才会更改类。我会那样做：

<%= link_to "Vote", some_path, remote:true, "data-type" => :json, class: "vote-button" %>

使用以下jquery代码：

$('.vote-button').on('ajax:success', function(evt, data, status, xhr){
  if(data.voted == true){
    $(this).addClass("voted");
  }else{
    $(this).removeClass("voted");
  }
})

假设您的控制器操作返回包含已投票密钥的JSON对象：

class VoteController < ApplicationController
  def update
    voted = # Some stuff happening here that says if voted or not
    render :json => {voted: voted}
  end
end

你的css看起来像：

.vote-button{
  background-image: asset-url(unvoted.png);
}

.vote-button.voted{
  background-image: asset-url(voted.png);
}

不要只是复制粘贴，因为我不是100％确定它有效，但你明白了。

Rails远程链接作为非内联，非形式“按钮”

1 个答案: