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

});

现在你可以看到，我的表是由rails填充的。每当我选择一个新团队时，表格就会消失。并且只有在重新加载页面时才会重新出现，但这是最初选择的团队，默认情况下是第一个团队。

更新这是我的控制器：

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”的元素。

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

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

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

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

Answer 2

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

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

问题是你要替换这个元素的内容（而不是元素本身）。要解决这个问题，我会这样做：

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

AJAX函数运行后表消失

2 个答案: