AJAX 函数运行后表格消失

Question

由于某种原因，单击从控制器请求数据的按钮后，我的表格消失了。这是我的桌子：

    <div id="SelectedTm" style= float:right>
    <table id = "PlyrsTm2" style = float:right>
        <tr><th id="PTTitle" colspan=2>List of players on selected team</th></tr>
        <tr><th id="PTHRows">Player</th><th id="PTHRows">Team</th></tr>
        <% @pl.each do |f| %>
            <tr><td class="player"><%= f.Plyr %></td><td class="team"><%= f.Team%></td></tr>
        <% end %>
    </table>
</div>

这是使用 ajax 触发我的 jquery 的按钮

<button id="showbtn">Select Team</button>

这里是 jquery 和 ajax：

$(document).ready(function(){
    $('#showbtn').on('click', function() {
        ids = $('#teams').val()
        IM = false
    $.ajax({
        url: "http://localhost:3000/teamplayers.json?resolution="+ids+"&import="+IM,
        type:"get",
        dataType: "json",
        cache: true,
        success:function(data){
        $('#PlyrsTm2').html(data);
            alert("Loading Players...."); 
            },
        error: function(error) {
                   alert("Failed " + console.log(error) + " " + error)
                   }           
                   });
    $('#PlyrsTm2').trigger('create');
    return false;
            });

});

现在如您所见，我的表格由导轨填充。每次我选择一个新团队时，表格都会消失。并且只有在我重新加载页面时才会重新出现，但那是最初选择的团队，默认情况下是第一个。

更新 这是我的控制器：

class TeamplayersController < ApplicationController
    before_filter :set_id
    before_action :set_id, :set_teamplayer, only: [:show, :edit, :update, :destroy]

# GET /teamplayers
# GET /teamplayers.json
def index
  @teamplayers = Teamplayer.all
  @fteams = Fteam.all
  tid = params[:resolution]
  toimport = params[:import]

puts tid
  if tid.nil? == true
    tid = 1
        @ids = tid
        @pl =  Teamplayer.joins(:live_player).where(:teamid => @ids).all
  else
    tid = tid.to_i;
        @ids = tid
        @pl =  Teamplayer.joins(:live_player).where(:teamid => @ids).pluck(:Plyr, :Team)
  end
  if toimport == "true"
    @turl = Fteam.where(:id => @ids).pluck(:TeamUrl)

    @turl = @turl[0]  

    system "rake updateTm:updateA[#{@turl},#{@ids}]"
  end


end


# GET /teamplayers/1
# GET /teamplayers/1.json
def show
end

# GET /teamplayers/new
def new
  @teamplayer = Teamplayer.new
end

# GET /teamplayers/1/edit
def edit
end

# POST /teamplayers
# POST /teamplayers.json
def create
  @teamplayer = Teamplayer.new(teamplayer_params)

  respond_to do |format|
    if @teamplayer.save
      format.html { redirect_to @teamplayer, notice: 'Teamplayer was successfully created.' }
      format.json { render action: 'show', status: :created, location: @teamplayer }
    else
      format.html { render action: 'new' }
      format.json { render json: @teamplayer.errors, status: :unprocessable_entity }
    end
  end
end

# PATCH/PUT /teamplayers/1
# PATCH/PUT /teamplayers/1.json
def update
  respond_to do |format|
    if @teamplayer.update(teamplayer_params)
      format.html { redirect_to @teamplayer, notice: 'Teamplayer was successfully updated.' }
      format.json { head :no_content }
    else
      format.html { render action: 'edit' }
      format.json { render json: @teamplayer.errors, status: :unprocessable_entity }
    end
  end
end

# DELETE /teamplayers/1
# DELETE /teamplayers/1.json
def destroy
  @teamplayer.destroy
  respond_to do |format|
    format.html { redirect_to teamplayers_url }
    format.json { head :no_content }
  end
end

private
  # Use callbacks to share common setup or constraints between actions.
  def set_teamplayer
    @teamplayer = Teamplayer.find(params[:id])
  end

# Never trust parameters from the scary internet, only allow the white list through.
def teamplayer_params
  params.require(:teamplayer).permit(:playerid, :teamid)
end
end

那么这里出了什么问题，因为我注意到它正在调用每个记录单独的页面，但是为什么它现在将我查询中的信息作为数据返回给我呢？

Answer 1

看起来ids = $("#teams").val(); 语句将返回 undefined，因为没有 id="teams" 的元素。

如果 ids 未定义，则该函数调用中的数据可能为 null 或未定义：

function(data){
    $('#PlyrsTm2').html(data);
    alert("Loading Players...."); 
}

如果 data 为 null，调用 html(null) 会导致你所有的表数据消失。

因此，解决方案是正确填充ids。我不确定ids 应该做什么，但这很可能是解决方案。

Answer 2

$('#PlyrsTm2').html(data);

这就是你的桌子消失的原因

问题是您要替换此元素的 content（而不是元素本身）。为了解决这个问题，我会这样做：

$('#SelectedTm').html(data);