如何在简单的 Rails 应用程序中调用 ajax 来更新视图页面内容

Question

我正在使用 this 教程，并开发了一个名为 ponies 的简单应用程序

这是我在查看页面中看到的，

<% @ponies.each do |pony| %>
  <tr>
    <td><%= link_to 'Destroy', pony, method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_pony' %> </td>
  </tr>
<% end %>

在控制器中：

def destroy
    @pony = Pony.find(params[:id])
    @pony.destroy

    respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
    end
  end

很明显，当我单击链接 Destroy 时，会执行脚本“destroy.js.erb”文件

alert("in destroy.js.erb");

$('.delete_pony').bind('ajax:success', function() {  
    alert("in destroy.js.erb inside ajax success");
        $(this).closest('tr').fadeOut();
})

并成功删除小马对象

但我创建了一个额外的链接

<td><%= link_to 'hussi', pony , method: :post, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'preview_pony' %></td>

在控制器中创建预览方法

def preview
    @pony = Pony.find(params[:id])
    @hussi = @pony.name
    puts @hussi

    respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
    end
  end

还创建了文件“preview.js.erb”

alert("in preview.js.erb");

$('.preview_pony').bind('ajax:success', function()
{
alert("you did it , hussain");
})

但是在点击链接预览时，写在'preview.js.erb'中的脚本永远不会被调用，任何解释为什么？？

在第一个链接中 我们使用 HTTP 方法 :delete

现在如果我只想显示一些简单的方法或淡入/淡出一些 html 元素，我应该使用什么 http 方法

在行中：

<%= link_to 'hussi', pony , method: :post, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'preview_pony' %>

我应该通过什么对象来代替“小马” 我应该用什么方法代替 ':delete' 方法

Answer 1

我认为您必须定义女巫动作才能在控制器中调用：

<%= link_to 'hussi', {:action => "preview"}, method: :post, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'preview_pony' %>

记得在routes.rb文件中添加action的路由，比如

post 'ponies/preview'

另外，作为旁注，我建议您查看pry gem。你基本上加了

group :development do
  gem 'pry'
  gem 'pry-rails'
  gem 'pry-debugger'
  gem 'pry-stack_explorer'
end

到你的Gemfile，运行bundle install，（可能重启你的服务器），你可以在你的代码中调用binding.pry作为断点。

Answer 2

如果你通过 ajax 创建预览链接。那么这可能会破裂。尝试使用on('ajax:success',...