使用Ajax切換按鈕而不刷新

問題是，頁面上的所有「進入」按鈕都具有相同的ID，並且所有「撤消」都具有相同的ID，因此單擊一個可以抵消其他按鈕。此外，按鈕只能切換一次。我對rails，CSS，ajax非常陌生，我非常感謝幫助，謝謝。 enter image description here 使用Ajax切換按鈕而不刷新

Micropost_Helper.rb

def toggle_like_button(micropost, user) 
    if user.voted_for?(micropost) 
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form", :remote => true 
    else 
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form", :remote => true 
    end 
end

控制器微柱

def like 
    @micropost = Micropost.find(params[:id]) 
    if @micropost.user_id != @current_user 
    if @current_user.voted_for?(@micropost) 
     @current_user.unvote_for(@micropost) 
     respond_to do |format| 
     format.html { redirect_to :back } 
     format.js 
     end 
    else 
     @current_user.vote_for(@micropost) 
     respond_to do |format| 
     format.html { redirect_to :back } 
     format.js 
     end 
    end 
    end 
end

VIEW /微柱/ like.js.erb < - 有了這個，我只能按一下按鈕的一次，需要幫助這裏以及

$("#vote_form").html("undo") 
$("#unvote_form").html("Into it!")

來源

2013-01-04 Jaqx

所以你使用無效的HTML – apneadiving

不確定你的意思，有沒有簡單的方法來解決這個問題？ – Jaqx

一個ID在一個頁面中應該是唯一的。你的主要問題是，你使用無法比擬的js，每次都擊中了整個dom。 – apneadiving

你應該uniq的ID附加到每個按鈕像這樣：

def toggle_like_button(micropost, user) 
    if user.voted_for?(micropost) 
    link_to "undo", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"unvote_form_#{micropost.id}", :remote => true 
    else 
    link_to "Into it!", like_micropost_path(micropost), :class => "btn btn-mini btn-primary", :id =>"vote_form_#{micropost.id}", :remote => true 
    end 
end

然後你就可以在你的like.js.erb引用一個按鈕：

$("#vote_form_<%[email protected]%>").html("undo") 
$("#unvote_form_<%= @micropost.id%>").html("Into it!")

這樣，你將擁有有效的HTML和你的問題應該解決。

來源

2013-01-04 09:29:30

我不認爲它可以找到這些#vote_form_#{@micropost.id}。該按鈕確實得到一個唯一的id現在我檢查了html - > id =「unvote_form_361」一個按鈕的例子 – Jaqx

已確認#{@micropost.id}無法返回like.js.erb文件中的數字 – Jaqx

適當語法是必須嵌入ruby：$（「＃vote_form _ <％= @ micropost.id％>」）。html（「undo」） $（「＃unvote_form _ <％= @ micropost.id％>」）。 HTML（「進入它！」） – Jaqx

使用Ajax切換按鈕而不刷新

回答

相關問題