javascript - AJAX函数运行后表格消失

Question

出于某种原因，在单击从 Controller 请求数据的按钮后，我的表消失了。这是我的表格:

    <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;
            });

});

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

更新 这是我的 Controller :

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(); 将返回未定义，因为没有 id="teams"的元素。

如果 ids 未定义，则此函数调用中的 data 可能为 null 或未定义:

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

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

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