在rails中，使用Jquery/Ajax更新div

Question

我需要一些關於如何在沒有實際加載頁面的情況下使用Jquery/Ajax更新頁面上的div的指導。在我提出這個問題之前，我會提供一些必要的信息。

我有兩個型號：

• Scoreboard型號（has_many :teams）
• Team型號（belongs_to的scoreboard）

在scoreboard#show頁，我已經使部分顯示全部@scoreboard.teams。

的部分顯示了所有在如下面的代碼的詳細單獨的div團隊：

<div class ="team-list" id="team_<%=team.id%>"> 
<div class= "boxin1"><%= team.name %></div> 
<div class= "boxin2"><%= team.win %></div> 
<div class= "boxin2"><%= team.loss %></div> 
<div class= "boxin2"><%= team.tie %></div> 
<span class= "boxin3 btn btn-primary"><%= link_to "Edit", edit_scoreboard_team_path(@scoreboard, team), remote: true %> </span> 
<span class= "boxin3 btn btn-primary"><%= link_to "Del", [@scoreboard, team], remote: true, method: :delete, data: { confirm: "Are you sure you want to delete the team?" } %> 
</div> 

現在我的問題涉及編輯按鈕，在點擊，一個Ajax請求，其要求，帶來了一個表格編輯一個團隊，然後表格在提交時調用團隊控制器中的更新方法。爲了進一步澄清，這裏是有關的代碼：

團隊控制器方法編輯和更新：

def edit 
    @scoreboard = Scoreboard.find(params[:scoreboard_id]) 
    @team = @scoreboard.teams.find(params[:id]) 
    respond_to do |format| 
     format.html {redirect_to scoreboard_url(@team.scoreboard_id)} 
     format.js 
    end 
    end 

    def update 
    @scoreboard = Scoreboard.find(params[:scoreboard_id]) 
    @team = @scoreboard.teams.find(params[:id]) 
    if @team.update_attributes(team_params) 
    respond_to do |format| 
     format.html {redirect_to scoreboard_url(@team.scoreboard_id)} 
     format.js 
    end 
    else 
    render 'edit' 
    end 
    end 

下面是edit.js.erb和update.js.erb文件和代碼說明澄清什麼是他們發生的事情：

edit.js.erb

$("#team_<%=@team.id%>").hide(); 
$("#team_<%=@team.id%>").after("<%= j render 'teamedit'%>"); 

因此，點擊edit_path鏈接按鈕後，編輯團隊的div將被隱藏，並在其後立即生成一個表格。

update.js.erb

$("#edit_team_<%=@team.id%>").hide(); 
$("#team_<%=@team.id%>").load("scoreboards/show.html.erb"); #help needed here 
$("#team_<%=@team.id%>").show(); 

現在，當更新控制方法表單提交後調用，形式是隱藏與jQuery，我想重新加載組的div我躲到之前，然後用它的更新值顯示它。

我覺得像.load（）jquery方法將與新編輯的值刷新div相關，但它不起作用。總之，edit.js.erb工作正常，但update.js.erb由於代碼中的第二行不起作用。 div沒有被更新的值刷新。任何人都可以提供一些不同方法的指導，或讓我知道我在做什麼錯了？

編輯：

另一個相關項目。Team_Params方法在團隊控制器中：

private 

    def team_params 
    params.require(:team).permit(:name, :win, :loss, :tie) 
    end 

Answer 1

您幾乎完成了所有任務。

剩餘的部分是將團隊信息放入部分名爲例如_team.html.erb：

<div class ="team-list" id="team_<%=team.id%>"> 
    <div class= "boxin1"><%= team.name %></div> 
    <div class= "boxin2"><%= team.win %></div> 
    <div class= "boxin2"><%= team.loss %></div> 
    <div class= "boxin2"><%= team.tie %></div> 
    <span class= "boxin3 btn btn-primary"><%= link_to "Edit", edit_scoreboard_team_path(@scoreboard, team), remote: true %> </span> 
    <span class= "boxin3 btn btn-primary"><%= link_to "Del", [@scoreboard, team], remote: true, method: :delete, data: { confirm: "Are you sure you want to delete the team?" } %> 
</div> 

然後update.js.erb：

$("#edit_team_<%=@team.id%>").hide(); 
$("#team_<%=@team.id%>").load("<%= j render partial: 'team', locals: {team: @team} %>"); 
$("#team_<%=@team.id%>").show(); 

Answer 2

ERB

深化dimakura的回答，看來你需要一些幫助js erb infrastructure的理解：

注意respond_to塊中的format.js;允許 控制器響應您的Ajax請求。然後您將擁有一個對應的app/views/users/create.js.erb視圖文件，該視圖文件將生成 實際的JavaScript代碼，該代碼將在客戶端的 上發送和執行。

與標準資產管道相反，控制器生成的JS.erb允許您使用控制器中設置的任何實例變量調用ERB功能。

因此，您如何「裝入」另一個ERB查看到您的JS可以使用呈現方法ERB處理的問題：

#app/views/teams/update.js.erv 
$("#team_<%=j @team.id %>").replacewith('<%=j render("scoreboards/show") %>'); 

目標視圖是由你。似乎dimakura使用了一個部分，這取決於你與哪一個去。

-

過程

問候有關處理新的數據你的意見，你要明白，在js.erb，你將有權訪問你必須在同一個數據任何其他控制器操作。

這意味着如果您沒有收到最新的數據，這是一個系統性問題。

我會做到以下幾點：

#app/controllers/teams_controller.rb 
class Teamscontroller < ApplicationController 
    before_action :set_vars 

    def edit 
    respond_to do |format| 
     format.html {redirect_to @scoreboard } 
     format.js 
    end 
    end 

    def update 
    respond_to do |format| 
     if @team.update team_params 
     format.html { redirect_to @scoreboard } 
     format.js 
     else 
     format.html { render :edit } 
    end 
    end 

    private 

    def set_vars 
     @scoreboard = Scoreboard.find params[:scoreboard_id] 
     @team = @scoreboard.teams.find params[:id] 
    end 

    def team_params 
    params.require(:team).permit(:name, :win, :loss, :tie) 
    end 
end 

如果這不起作用，它通常意味着你已經得到了你的更新過程中的問題（IE update將無法​​正常工作）。

Answer 3

你確定你的更新方法正常嗎？我會先檢查一下。您需要在team_params方法中包含scoreboard_id。