Question

大家好我正在尝试使用AJAX和JQuery在表格中显示数据，正如您在我的代码中看到的，我使用了部分表单来检索数据（这项工作很棒）然后单击保存按钮时，数据显示没有刷新整个页面，但我不知道如何在一个表内显示它，还有一个jquery UI幻灯片效果，抱歉我是铁杆的新手，更糟糕的是网页开发：D

让我告诉你我的代码。

create.js.erb

$('#new_location').remove();
$('#new_link').show();
$('#allsites').prepend('<%= escape_javascript(render(@location)).html_safe %>');

_location.html.erb部分文件

  <tr>
    <td><%= location.name %></td>
    <td><%= location.address%></td>
    <td><%= link_to 'Show', location %></td>
    <td><%= link_to 'Edit', edit_location_path(location) %></td>
    <td><%= link_to 'Destroy', location, method: :delete, data: { confirm: 'Are you sure?' } %></td>   
  </tr>

Index.html.erb

<div class="hero-unit">
  <%= gmaps4rails(@json) %>
</div>


<%= link_to 'New Location', new_location_path, id:"new_link", remote: true%>
<table class="table table-hover">  
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
   <div id="allsites"><%= render @locations%></div>   
</table>

new.js.erb

$('#new_link').hide().after('<%= j render("form") %>');

location_controller.rb

class LocationsController < ApplicationController

  def index
    @locations = Location.all
    @json = Location.all.to_gmaps4rails 
  end 

  def new
    @location = Location.new
  end

  def edit
    @location = Location.find(params[:id])
  end

  def create
    #@location = Location.new(params[:location])
    @location = Location.create(params[:location])
     respond_to do |format|
        format.html { redirect_to @location, notice: 'Location was successfully created.' }
        format.js   
    end
  end

def show
    @location = Location.find(params[:id])
    respond_to do |format|
      format.html # show.html.erb
      format.json { render json: @location }
    end
  end
  def update
    @location = Location.find(params[:id])

    respond_to do |format|
      if @location.update_attributes(params[:location])
        format.html { redirect_to @location, notice: 'Location was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render action: "edit" }
        format.json { render json: @location.errors, status: :unprocessable_entity }
      end
    end
  end

  def destroy
    @location = Location.find(params[:id])
    @location.destroy

    respond_to do |format|
      format.html { redirect_to locations_url }
      format.json { head :no_content }
    end
  end
end

正如你在secreenshots ajax上看到的那样，它正在获取数据并替换它但仍然不知道如何显示它。

Adding a new record New record saved and displayed immediately Chrome's debugging tool

Answer 1

我建议您删除表格中的额外div并添加tbody和thead以用于样式目的，例如：

Index.html.erb

<%= link_to 'New Location', new_location_path, id:"new_link", remote: true%>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
      <%= render @locations%>
  </tbody>
</table>

我可能会移除 prepend 并将其替换为 replaceWith

create.js.erb

$('#new_location').remove();
$('#new_link').show();
$('#table.table tbody').replaceWith('<%= escape_javascript(render(@location)).html_safe %>');

Answer 2

replaceWith选择器中有一个id“＃”。删除“＃”并再次尝试$（'table.table tbody'）或将id =“allsites”指定给你的tbody并保持你的jquery选择器与你的第一篇文章相同。

Answer 3

感谢所有人，我想通了，前几天看到了一个在rails上使用集合的例子，所以，我在create_js.erb文件$('table.table tbody').prepend('<%= escape_javascript(render(:partial => "location", :locals => { :location => @location } )) %>');中使用了这一行，然后渲染了部分添加这一行在index.html.erb文件中<%= render :partial => 'locations/location', :collection => @locations %>我想如果有可能有人向我解释这个，是的，它解决了我的问题，但是会更好地学习更多。复制和粘贴而不知道正在复制的内容不是一个好习惯

哪个是使用Ajax和JQuery在桌面上显示数据的最佳方式？

3 个答案: