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

Posted 2023-05-09

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

【英文标题】：how to ajax call in simple rails application updating view page contents

【发布时间】：2013-06-23 14:16:24

【问题描述】：

我正在使用 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' 方法

【参考方案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作为断点。

【讨论】：

实际上我错过的是，在我的 prevew 操作中，我正在使用传递参数 id 的对象，但在预览链接的情况下，没有传递 id

【参考方案2】：

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

【讨论】：

@AbibullahRahamathulah：我的问题是，新的 js 文件，“preview.js.erb”在点击链接后从未被调用，我在第一行给出了警告

嗯。如果你在 Rails 控制台上没有看到任何错误，你能检查浏览器控制台是否有任何 javascript 错误。