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

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功能。

因此，你的问题是如何加载＆＃34;可以使用ERB中的 render 方法处理JS中的另一个ERB视图：

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

目标视图取决于您。似乎dimakura使用了部分内容，它取决于您使用哪一个。

-

<强>过程

关于处理新数据的评论，您必须了解在js.erb中，您可以访问您在任何其他控制器操作中拥有的相同数据。< / p>

这意味着，如果您没有收到最新的数据，那就是系统性问题。

我会做以下事情：

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

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

3 个答案: