In rails, updating a div with Jquery/Ajax -

i need guidance on how update div on page jquery/ajax without loading page. before ask question, provide necessary information.

i have 2 models:

• scoreboard model (has_many :teams)
• team model (belongs_to scoreboard)

on scoreboard#show page, have rendered partial display @scoreboard.teams.

the partial displays teams in seperate divs detailed in following code:

<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 sure want delete team?" } %> </div> 

now questions concerns edit button on click, calls ajax request which, brings form edit team, , form, on submission, calls update method in teams controller. further clarification, here relevant code:

team controller methods edit , update:

  def edit     @scoreboard = scoreboard.find(params[:scoreboard_id])     @team = @scoreboard.teams.find(params[:id])     respond_to |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 |format|          format.html {redirect_to scoreboard_url(@team.scoreboard_id)}          format.js      end     else      render 'edit'     end    end 

here code edit.js.erb , update.js.erb files , description clarify happening in them:

edit.js.erb

$("#team_<%=@team.id%>").hide(); $("#team_<%=@team.id%>").after("<%= j render 'teamedit'%>"); 

so upon clicking edit_path link button, div team being edited hidden, , teamedit form rendered right after it.

update.js.erb

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

now when update controller method called after form submission, form hidden jquery, , want reload team div hid earlier, , show updated values.

i felt .load() jquery method relevant in refreshing div new edited values not working. in conclusion, edit.js.erb works fine update.js.erb not work due 2nd line in code. div not being refreshed updated values. offer guidance on different method or let me know i'm doing wrong?

edit:

another item of relevance. team_params method in teams controllers:

 private     def team_params      params.require(:team).permit(:name, :win, :loss, :tie)    end 

you done everything.

the remaining part put team information partial, named e.g. _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 sure want delete team?" } %> </div> 

and update.js.erb:

$("#edit_team_<%=@team.id%>").hide(); $("#team_<%=@team.id%>").load("<%= j render partial: 'team', locals: {team: @team} %>"); $("#team_<%=@team.id%>").show();