title: In rails, updating a div with Jquery/Ajax
body: <p>I need some guidance on how to update a div on a page with Jquery/Ajax without actually loading the page. Before I ask the question, I will provide some necessary information. </p>
  
  <p>I have two models:</p>
  
  <ul>
  <li><strong><code>Scoreboard</code> Model</strong> (<code>has_many :teams</code>)</li>
  <li><strong><code>Team</code> Model</strong> (belongs_to <code>scoreboard</code>)</li>
  </ul>
  
  <p>On <strong><code>scoreboard#show</code></strong> page, I have rendered a partial to display all <strong><code>@scoreboard.teams</code></strong>.</p>
  
  <p>The partial displays all the teams in seperate divs as detailed in the following code:</p>
  
  <pre><code>&lt;div class ="team-list" id="team_&lt;%=team.id%&gt;"&gt;
   &lt;div class= "boxin1"&gt;&lt;%= team.name %&gt;&lt;/div&gt;
   &lt;div class= "boxin2"&gt;&lt;%= team.win %&gt;&lt;/div&gt;
   &lt;div class= "boxin2"&gt;&lt;%= team.loss %&gt;&lt;/div&gt;
   &lt;div class= "boxin2"&gt;&lt;%= team.tie %&gt;&lt;/div&gt;
   &lt;span class= "boxin3 btn btn-primary"&gt;&lt;%= link_to "Edit", edit_scoreboard_team_path(@scoreboard, team), remote: true %&gt; &lt;/span&gt;
   &lt;span class= "boxin3 btn btn-primary"&gt;&lt;%= link_to "Del", [@scoreboard, team], remote: true, method: :delete, data: { confirm: "Are you sure you want to delete the team?" } %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now my questions concerns the <strong>Edit</strong> button which on click, calls for an ajax request which, brings up a <strong>form</strong> to edit a team, and then the form, on submission, calls for the update method in the Teams Controller. For further clarification, here is the relevant code:</p>
  
  <p><strong>Team Controller methods for edit and update:</strong></p>
  
  <pre><code>  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
  </code></pre>
  
  <p>Here is the code for the edit.js.erb and update.js.erb files and description to clarify what is happening in them: </p>
  
  <p><strong>edit.js.erb</strong></p>
  
  <pre><code>$("#team_&lt;%=@team.id%&gt;").hide();
  $("#team_&lt;%=@team.id%&gt;").after("&lt;%= j render 'teamedit'%&gt;");
  </code></pre>
  
  <p>So upon clicking the edit_path link button, the div for team being edited is hidden, and a <strong>teamedit</strong> form is rendered right after it. </p>
  
  <p><strong>update.js.erb</strong></p>
  
  <pre><code>$("#edit_team_&lt;%=@team.id%&gt;").hide();
  $("#team_&lt;%=@team.id%&gt;").load("scoreboards/show.html.erb"); #help needed here
  $("#team_&lt;%=@team.id%&gt;").show();
  </code></pre>
  
  <p>Now when the update controller method is called after form submission, the form is hidden with jquery, and I want to <strong>reload the team div</strong> that I hid earlier, and then show it with its updated values. </p>
  
  <p>I felt like the .load() jquery method would be relevant in refreshing that div with the new edited values however it is not working. In conclusion, <strong>edit.js.erb</strong> works fine but <strong>update.js.erb</strong> does not work due to the 2nd line in the code. The div is not being refreshed with updated values. Could anyone offer some guidance on a different method or let me know what I'm doing wrong? </p>
  
  <p>Edit: </p>
  
  <p>Another item of relevance. Team_Params method In Teams controllers:</p>
  
  <pre><code> private
  
     def team_params
       params.require(:team).permit(:name, :win, :loss, :tie)
     end
  </code></pre>