0

大家好，我正在尝试使用 AJAX 和 JQuery 在表中显示数据，正如您在我的代码中看到的那样，我使用部分表单来检索数据（这很好用），然后当单击保存按钮时，数据在不刷新整个页面的情况下显示，但我不知道如何在表格内显示它以及 jquery UI 幻灯片效果，对不起，我是 Rails 新手，对 Web 开发来说更糟：D

让我告诉你我的代码。

创建.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>

索引.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>

新的.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 中看到的那样，它正在获取数据并替换它，但仍然不知道如何显示它。

添加新记录 新记录保存并立即显示 Chrome的调试工具

4

3 回答 3

1

replaceWith 选择器中有一个 id “#”。删除“#”并重试 $('table.table tbody') 或将 id="allsites" 分配给您的 tbody 并保持您的 jquery 选择器与您的第一篇文章相同。

于 2013-07-13T09:56:23.713 回答
1
  • 我建议div您在表格中删除一个额外的内容并添加tbody和thead用于样式目的，如下所示：

索引.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替换它

创建.js.erb

$('#new_location').remove();
$('#new_link').show();
$('#table.table tbody').replaceWith('<%= escape_javascript(render(@location)).html_safe %>');
于 2013-07-11T20:38:47.670 回答
0

感谢大家，我想通了，几天前看到了一个在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 %> 我希望有人可以向我解释这一点，是的，它解决了我的问题，但最好多学一点。在不知道正在复制什么的情况下复制和粘贴不是一个好习惯

于 2013-07-15T13:21:20.887 回答