在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。