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

Question

我需要一些有关如何在不实际加载页面的情况下使用Jquery / Ajax更新div的指导。在提出问题之前，我将提供一些必要的信息。

我有两个模型：

• Scoreboard型号（has_many :teams）
• Team型号（belongs_to scoreboard）

在scoreboard#show页面上，我渲染了一部分以显示all @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请求，该请求会提出一个表单以编辑团队，然后表单提交后就需要在Teams Controller中使用update方法。为了进一步说明，以下是相关代码：

Team Controller的编辑和更新方法：

  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，并在其后呈现一个teamedit表单。

update.js.erb

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

现在，在提交表单后调用update controller方法时，该表单将被jquery隐藏，并且我想重新加载之前隐藏的team div，然后使用更新后的值对其进行显示。

我觉得.load（）jQuery方法与用新的编辑值刷新该div有关，但是它不起作用。总之，edit.js.erb可以正常工作，但是由于代码中的第二行，update.js.erb不能正常工作。div不会使用更新的值刷新。谁能提供有关其他方法的一些指导，或者让我知道我做错了什么？

编辑：

另一个相关的项目。Team_Params方法在Teams控制器中：

 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();