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

Question

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

我有两个模型:

• 记分板模型(has_many :teams)
• 团队模型(属于记分板)

在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请求，该请求会弹出一个表单来编辑团队，然后打开该表单提交，调用 Teams Controller 中的 update 方法。为了进一步说明，以下是相关代码:

用于编辑和更新的团队 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();

现在，当表单提交后调用更新 Controller 方法时，表单会被 jquery 隐藏，我想重新加载我之前隐藏的团队 div，然后显示它的更新值。

我觉得 .load() jquery 方法与使用新编辑的值刷新该 div 相关，但它不起作用。总之，edit.js.erb 工作正常，但 update.js.erb 由于代码中的第二行而无法工作。 div 未使用更新的值进行刷新。谁能提供一些关于不同方法的指导或让我知道我做错了什么？

编辑:

另一个相关项目。 Team_Params 方法在 Teams Controller 中:

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