Ruby On Rails 3,form_tag 远程响应 Ajax 请求

2023-12-21

感谢您阅读这篇文章。过去几天我一直被 RoR 的问题困扰。我在index.html.erb下有一个表格:

<head>
    <title>Ajax List Demo</title>
    <%= javascript_include_tag :defaults %>  
    <%= csrf_meta_tag %>  
</head>
<body>
  <h3>Add to list using Ajax</h3>

  <% form_tag :action => :list , :method=>:get, :remote=>true  do %>
    Enter the public url:<%= text_field_tag 'url' ,'', :size => 80 %>
    <%= submit_tag "Find" %>
  <% end %>

  <div id="my_list">
  </div>
</body>

在控制器中我有:

 def list
    puts "here!!!!"
    reader = Reader.new
    @profiles =  reader.processURL(params[:url]) #profileList = 
    respond_to do |format|
      #format.html { render :partial=>true, :locals => { :profiles => @profiles}}#{          render :partial=>'profiles/list',:layout => false, :locals => { :profiles => @profiles}} 

format.js {render :content_type => 'text/javascript', :locals => { :profiles => @profiles}}

# index.html.erb
      #   format.rss     render :partial=>'profiles/list',:layout => false, :locals => { :profiles => @profiles}
    end

远程 UJS 的 js 文件为 list.js.erb

$("#my_list").html("<%= escape_javascript(render(:partial => "list"))%>");

问题是我无法获得在 div 标签 my_list 中渲染部分 _list.html.erb 的结果。我收到一个空白页,406 错误。如果我取消注释控制器中的渲染 html 代码,我会在浏览器中得到渲染的部分内容。我有点卡住了,我想提交表单并将结果弹出到 my_list div 中。我是 Rails 新手,所以如果我遗漏了一些明显的东西,请毫不犹豫地向我指出......我绝对愿意尝试。


改成这样:

<html>
    <head>
        <title>Ajax List Demo</title>
        <h1>Listing posts</h1>
           <%= javascript_include_tag 'jquery.js' %>  
    <%= csrf_meta_tag %>  
    </head>
    <body>
        <h3>Add to list using Ajax</h3>

        <% form_tag :action => :doit , :method=>:get, :remote=>true  do %>
        Enter the public url:<%= text_field_tag 'url' ,'', :size => 80 %>
        <%= submit_tag "Find" %>
        <% end %>

        <div id="my_list">
                   </div>

控制器:

def doit
    puts "here!!!!"
    reader = Reader.new
    @profiles =  reader.processURL(params[:url])
    respond_to do |format|
 #     format.html {render :partial=>true, :locals => { :profiles => @profiles}}#{    render :partial=>'profiles/list',:layout => false, :locals => { :profiles => @profiles}} 
      format.js #{render :content_type => 'text/javascript', :locals => { :profiles => @profiles}}
      # index.html.erb
      #   format.rss     render :partial=>'profiles/list',:layout => false, :locals => { :profiles => @profiles}
    end

JS _doit.js.erb $("#my_list").html(" "doit"))%>");

最后是部分:

_doit.html.erb。

但是我仍然收到 406 错误,我没有重复的 _doit js 或 erb。有什么明显不正确的地方吗?再次感谢!


另一个更新:

我认为表单渲染不正确:

这呈现:

<% form_tag :action => :doit , :remote=>true, :id => 'myform' do %>
        Enter the public url:<%= text_field_tag 'url' ,'', :size => 80 %>
        <%= submit_tag "Find" %>
        <% end %>

This:

<form accept-charset="UTF-8" action="/home/doit?id=myform&amp;remote=true" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="&#x2713;" />
<input name="authenticity_token" type="hidden" value="MLuau4hvfdGO6FrYCzE0c0JzwHhHKZqjmV49U673sK8=" />
</div>        Enter the public url:
<input id="url" name="url" size="80" type="text" value="" />

    <input name="commit" type="submit" value="Find" />



        <input name="commit" type="submit" value="Find" />

它将我的远程标记和 id 添加到查询字符串中,这不是错误的吗?

好吧,终于得到了线索,表格需要用括号括起来:

 <%= form_tag( { :action => 'doit' }, :multipart => true, :remote=>true, :id => 'myform' ) do %>

好的,今晚最后更新: 现在我进入日志:

于 2010 年 10 月 27 日星期三 22:40:55 -0400 开始对 127.0.0.1 发布“/home/doit” 这里!!!! 由 HomeController#doit 作为 JS 处理 参数:{“commit”=>“查找”,“url”=>“http://www.facebook.com/people/James-Stewart/653161299”,“authenticity_token”=>“MLuau4hvf dGO6FrYCzE0c0JzwHhHKZqjmV49U673sK8=", "utf8"=>"Г°"} 渲染 home/_doit.html.erb (4.0ms) 渲染 home/doit.js.erb (9.0ms) 在 807 毫秒内完成 200 OK(查看次数:40.0 毫秒 | ActiveRecord:0.0 毫秒)

我看到 as JS,它说它渲染了我的 js/partial。但是我在 my_list div 上什么也没有得到。我的JS文件:

$("#my_list").html("<%= escape_javascript(render(:partial => "doit"))%>");

我的 html.erb 表单文件现在有:

<script$('#myform').bind('ajax:success', function(evt, data, status, xhr){
    xhr.responseText;
  });></script>

就像表单什么也没做一样,这是一个好兆头,不再有 406 错误。我知道这已经很接近了,如果有人能指出我需要在 js 中做什么,那就太好了,否则我会休息一下并尝试 tmrw。


好吧,我认为它得到了回应,只是没有像你指出的那样渲染,这是昨天史蒂夫的问题。

在 Firebug 上调试 JS 我看到了我想要在 div 中呈现的 html,为此:

http://localhost:3000/javascripts/prototype.js?1285674435/event/seq/1

这意味着我想我现在收到了 JS 响应。

我在表单页面上有这个:

<script>$('#myform').bind('ajax:success', function(evt, data, status, xhr){
    $('#my_list').html(eval(xhr.responseText));
  });</script>

检查表明它不知道 myform 是什么,但我在 Rails 代码中放入了 :id => 'myform' 。


再次感谢,我在这里得到了很多帮助,我想分享我如何最终让它回到社区。

doit 方法的 js 文件(默认需要一个更好的控制器操作名称)是 doit.js

代码最终是:

$("my_list").update("<%= escape_javascript(render(:partial => "doit"))%>");

由于某种原因,在 Firefox 中找不到#my_list,我不得不使用 Firebug 来最终解决这个问题。

显然这与下面建议的方式不同,我将把 js 脚本放回表单中并删除 .js.erb 文件,看看它是如何工作的。我想我只是在 format.js 响应中渲染部分内容?另外大家在哪里可以找到有关编写 UJS 文件的信息?我对以 $ 开头的任何内容的语法一无所知。

再次感谢您的帮助,终于感觉我在学习 Rails 方面取得了进展。


我在 Hacker News 上发布了这个答案,但我认为 Stack Overflow 社区也可能会受益:-)

在 Rails 3 中,JavaScript 驱动程序非常不干涉(即不引人注目)。您遇到的问题是您的应用程序向浏览器返回一串 javascript,但页面中没有任何内容可以在页面上下文中执行该 javascript。

Rails.js ujs 驱动程序绑定到表单并链接data-remote=true,这就是:remote => true正在做的,让他们远程提交请求,但这就是 Rails 魔法的止点。

好消息是,远程请求会触发一些您可以绑定的事件,这些事件使您可以访问服务器返回的数据(按以下顺序触发):

  ajax:before
  ajax:loading
  ajax:success
  ajax:complete
  ajax:failure
  ajax:after

您需要将事件绑定到ajax:success您的表单的事件。因此,如果您的表单的 id 为“myform”,那么您希望页面上有类似以下内容:

  $('#myform').bind('ajax:success', function(evt, data, status, xhr){
    eval(xhr.responseText);
  });

xhr.responseText是你的服务器返回的内容,所以这只是将其作为 JavaScript 执行。

当然,也可以通过一些错误处理来绑定到失败事件。

我通常甚至不使用返回 javascript 的 action.js.erb 方法,我只是让我的控制器渲染 HTML 部分,然后我在页面中有一个像这样的绑定:

  $('#myform').bind('ajax:success', function(evt, data, status, xhr){
    $('#target-div').html(xhr.responseText);
  });

实际上我正在写一篇关于此的完整文章,但希望这足以让您继续前进。

编辑:我完成了那篇文章,充分解释了 Rails 3 中的远程链接和表单。也许它会有所帮助:

Rails 3 远程链接和表格: 权威指南 http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ruby On Rails 3,form_tag 远程响应 Ajax 请求 的相关文章

  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML
  • 使用 Rails 4(和 Hstore)在 PostgreSQL 中存储嵌套哈希

    我有一个 Rails 应用程序 它聚合了来自 Google API 的大量数据 我当前将 JSON 响应存储在 MongoDB 中 因此我的 Rails 应用程序同时具有 pg 和 mongo 然而 今天 我遇到了 PostgreSQL H
  • 从 S3 下载 Carrierwave 上传内容

    我想下载使用 Carrierwave 上传到 S3 的图像 该图像位于卡片模型上 作为上传器安装 我看见这个答案 https stackoverflow com questions 7193516 how to send file to u
  • 将结果从 pdo 发送到 ajax 时遇到问题

    我想做的是 如果用户成功注册 pdo 将提供信息并将其发送到 ajax 如果用户注册与否 ajax 将发送消息 在我将这个条件放入我的 pdo 中后 它工作正常 现在它不会再插入 并且 ajax 告诉 注册用户时出错 每时每刻 script
  • 您在哪里存储 Rails 应用程序的版本号?

    我们用精彩的语义版本控制 http semver org 版本化 Rails 应用程序时的范例 我的一个问题是最好将这个号码存储在哪里 我见过它存储在 lib environment rb etc 只是想知道人们对最佳实践的看法是什么 我的
  • 延迟的作业更新查询正在无限运行

    我在 Rails 应用程序中使用delayed job 和delayed job active record 来执行后台作业 我们正在使用基于队列的delayed job 为了启动延迟 我使用以下命令 RAILS ENV staging s
  • Rails3,从 cron 运行 rake 任务

    我从 cron 运行 rake 任务时遇到问题 我将其包装在 shell 文件中 当我从控制台执行此 shell 文件时 它工作正常 bin sh if ps ef grep v grep grep create all accounts
  • 在 Heroku 上的生产模式下使用 Rails 同步 gem 与 Faye 和 Thin

    我正在尝试设置 同步 gem 以在我的 Rails 应用程序中启用实时更新 它使用 Faye 作为实时推送服务 并使用 Thin 作为网络服务器 我对此非常陌生 所以任何建议都会受到赞赏 我的本地服务器上有这个工作 但不知道如何让它在 He
  • Ajax 刷新后的事件监听器

    我的网站上有一个结帐部分 我在数量部分运行此事件侦听器 以便每次根据单击的产品更新数量时 整个 div 都会使用 AJAX 重新加载 因此所有价格 总金额也会刷新 该代码可以工作一次 但之后该功能就不再工作了 cart product qu
  • Rails:ENV.fetch() 和 ENV[] 之间的区别

    这两种语法有什么区别 ENV fetch MY VAR ENV MY VAR 我见过 Rails 5 在不同的地方使用了这两个版本 但无法弄清楚其中的区别 除了第一个需要输入更多字符之外 The ENVhash like 对象是普通的 Ru
  • 需要帮助设置 ruby​​ on Rails javascript 运行时环境

    我在我的机器上设置 ruby on Rails 时遇到问题 我一直在关注 Agile Web Development with Rails 这本书 到目前为止一切都进展顺利 我遇到的问题是当我输入时 rails server 我收到以下错误
  • JQuery AJAX 使用 SOAP Web 服务 [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我一直在尝试学习 JQuery 使用 AJAX 来使用我不久前编写的 SOAP Web 服务 下面是我正在使用的代码
  • Rails:RSpec - nil:NilClass 的未定义方法“cookie_jar”

    铁轨新手 尝试遵循迈克尔 哈特尔的教程 尝试添加辅助方法来模拟 RSpec 测试中的日志时陷入困境 describe when the a user has logged in and attempts to visit the page
  • Rails3 中带有块的 link_to 的语法,其中 :remote=>true 并包括 :class 和 :id

    看在上帝的份上 我已经为此绞尽脑汁好几个小时了 使用rails3 rc 1 9 2 我正在尝试创建一个 link to 来提交一个ajax请求 其中包含参数 类和id 并且需要一个块 以便我可以在名称周围插入一个span标签 文档的帮助绝对
  • 从请求响应创建 PDF 不适用于 axios,但适用于本机 xhr

    为了强制从服务器下载 PDF 我尝试使用 axios 和本机 xhr 对象 原因是我必须发送post请求 因为我向服务器传递了太多数据 所以带有简单链接的选项 例如site ru download pdf对我不起作用 尽管我最终设法用 Xh
  • 如何在 Ruby 中访问私有类方法?

    给定一个 Ruby 类 class MyClass def self my class method puts class method end private def my method puts regular method end p
  • 一旦元素存在就触发事件的脚本?

    我正在尝试编写一个小 Greasemonkey 脚本来实现 Facebook 中的一些任务 例如隐藏新闻等 问题是 我有一个 DOM 中尚不存在的元素的 ID 这是点击帖子的箭头图标时出现的小框 如何通过 jQuery 创建一个事件处理程序
  • 为 has_many 或 habtm 动态创建 after_add 和 after_remove 回调?

    有没有办法动态添加after add and after remove回调现有的has many or has and belongs to many关系 例如 假设我有模型User Thing 和一个连接模型UserThingRelati
  • 基于 ajax 的弹出窗口中的 Mathjax + CKEditor 4 + CKEditor

    我已经配置了 CKEditor 4 并且我的页面上有以下内容 我的页面中有一个 CKEditor 设置值的两个选项 这两个选项本身分别选项两个基于 ajax 的弹出窗口 这些基于 ajax 的弹出窗口包含 CKEditor 现在我有以下问题
  • 设计对多个并发会话的支持

    我使用 Rails 3 2 11 和 Devise 2 2 3 作为订阅服务应用程序 我从另一位不再可用的开发人员那里继承了该应用程序 我是 Rails 和 Devise 的新手 我想要允许单个用户 电子邮件 拥有多个会话到同一个应用程序

随机推荐

  • 如何在 Seaborn distplot 中绘制 Pandas 日期时间系列?

    我有一个带有日期时间列的熊猫数据框 我想根据该日期列绘制行的分布 但我目前收到一个无用的错误 我有 df Date pd to datetime df Date errors raise s sns distplot df Date 这会引
  • 模板引用变量中的 ref- 前缀和 # 有什么区别(Angular 2)

    我想了解输入文本框中下面提到的模板引用变量符 号之间的区别
  • 如何将手势从 UITextView 传递到 UICollectionViewCell

    我有一个水平滚动的 UICollectionView 和包含 UITextView 的 UICollectionViewCells 有什么方法可以将 textview 上的手势传递给单元格 以便调用 didSelectItemAtIndex
  • 来自 GitHub 的 Grails 插件

    如果我想使用来自 Git Hub 的 Grails 插件 我是否只需下载 zip 文件并使其在本地 Maven 存储库中可用 我位于防火墙后面 这不允许我解决依赖关系 您可以获取源并运行maven install要使其在本地 Maven 存
  • scikit-learn 的 KNN 如何计算概率估计?

    scikit learn中KNN算法的实现是如何计算概率估计的predict proba X method 以下示例摘自 sklearn 文档 但进行了一些修改 以便您可以理解我们在这种情况下做什么 有关更多详细信息 请参见 https s
  • 自定义颤振小部件形状

    我正在尝试在 Flutter 中构建以下布局 我希望实现两件事 渲染绘制对角线的背景 我猜是通过 BoxDecoration 让粉色容器沿着对角线夹住子项 即 如果文本对于一行来说太大 则应换行到新行 有任何想法吗 这是我的代码 Stack
  • 如何部署我的 Windows Phone 8.1 应用程序?

    我刚刚使用 update 2 RC 更新了我的 Visual Studio Professional 2013 我做了一个简单的应用程序来尝试 我选择发布并单击项目中的构建按钮 但它不适用于创建 xxxx appx 文件 它正在创建 xxx
  • python - 将列表a中的每个元素与列表b相乘并相加

    功能 def unique common a b 我有两个清单 可以说 a 2 3 5 7 9 和另一个清单 b 5 8 4 1 11 此列表 b 为您提供与第一个列表 a 对应的每件商品的单件价格 例如 如果您要购买 2 单位的第一项商品
  • Flash 内容的 IE7 z-index 问题

    我遇到了 IE7 中的 Flash 内容始终位于菜单项上方的问题 我有如下结构 div div div ul li foo li li bar li ul div 现在 菜单的最后一项打开 它显示在 Flash 内容后面 摩天大楼位于页面内
  • Jquery阅读文章内容之间的位置进度

    在这个例子中http jsfiddle net SnJXQ 61 http jsfiddle net SnJXQ 61 阅读进度指示器 但它的宽度从网站顶部开始增加 但我们需要进度条宽度开始增加 当文章内容 div 到达文章内容末尾时 这是
  • Google Cloud Datastore 与 Google App Engine

    我正在查看新的 Google Cloud Datastore 看起来很棒 但有一些我无法理解的事情 它应该取代 Google App Engine 数据存储吗 如何在 GAE 中使用它 他们两者有什么区别呢 我有一个 Java 中的 GAE
  • 更新 Google App Engine 上数据存储区中的大量实体

    我想对特定类型的所有实体执行一个小操作并将它们重写到数据存储中 我目前有 20 000 个此类实体 但想要一个可以扩展到任意数量的解决方案 我有什么选择 Use a mapper http code google com p appengi
  • 如何在Chrome开发工具中返回当前调试位置?

    我不断发现代码在 Chrome 调试器中的断点处停止的情况 然后当我使用 控制台 等另一个选项卡并返回 源 时 我丢失了代码停止的位置 我必须单击单步 回到正轨 但这会跳过所寻求的断点 有没有办法到达调试器停止的地方 您可以通过单击调用堆栈
  • 如何添加/设计回调函数

    如何在 C 中设置 注册回调函数 以便在从队列中读取数据时调用函数 Edit 1 使用尼尔的答案作为完整的答案 在头文件中 include
  • 如何在 Android 中读取文本文件? [复制]

    这个问题在这里已经有答案了 我想从文本文件中读取文本 在下面的代码中 发生了异常 这意味着它转到catch堵塞 我将文本文件放在应用程序文件夹中 我应该把这个文本文件 mani txt 放在哪里才能正确读取 try InputStream
  • 必须为此操作提供 PartitionKey 值

    我正在尝试从 Azure Cosmos Db 集合中检索文档 我遇到了错误 Servlet service for servlet dispatcherServlet in context with path threw exception
  • Gson Long 从 String 解析时丢失数据

    我有一些对象的 json 字符串表示 类对象是 public class SMPBBaseObjectsList public ArrayList data new ArrayList lt gt public Integer count
  • 带资源字典的wpf类库

    WPF 类库程序集 dll 中是否可以有资源字典 我问这个问题是因为我有一个 应用程序 WPF 程序集 exe 如果我尝试将程序集的类型转换为 WPF 类库 我会收到错误 无法在库的项目文件中指定元素ApplicationDefinitio
  • 在 Laravel 5.4 中执行批量删除语句时,如何根据 Eloquent 的“删除”事件执行操作?

    我的项目中有 2 个 Eloquent 模型 App StoredFile and App StoredImageSize The StoredFile模型负责保存上传的文件信息 如果上传的文件是图像 则 2 个缩略图将存储在存储中 它们的
  • Ruby On Rails 3,form_tag 远程响应 Ajax 请求

    感谢您阅读这篇文章 过去几天我一直被 RoR 的问题困扰 我在index html erb下有一个表格 h3 Add to list using Ajax h3 Enter the public url