【问题标题】:How to get rails to update the page with js after a jquery $.get call?jquery $.get 调用后如何让rails用js更新页面?
【发布时间】:2014-09-26 07:08:25
【问题描述】:

总结:js调用时如何更新原页面?

此原始 erb 链接有效:

链接视图

# app/views/links/index.html.haml
= link_to 'verify', verify_link_path(id: link.id, table_row: index),
  class: 'verify',  title: 'Verify this link', remote: true

链接控制器

  def verify_link
    @link = Link.find(params[:id])
    if @link.valid_get?
      @link.update_attribute(:verified_date, Time.now)
    end 
    respond_to do |format|
      format.js
    end 
  end 

链接验证 js erb

# app/views/links/verify_link.js.erb 
<%- if @link.verified_date %>
  $("span#verify_link_<%=params['table_row']%>").html('<span class="done">Verified</span>');
<%- else %>
  $("span#verify_link_<%=params['table_row']%>").html('<span class="undone">Unverified</span>');
<%- end %>

效果很好,因为它显示已验证或未验证

我已经改用js了:

链接视图:

%a{href: "#", :data => {verifying_link: 'yes', id: link.id, table_row: index}}
  verify_via_js

链接验证链接js:

# app/assets/javascripts/verifying_link.js.erb

$(function(){
  $("a[data-verifying-link]='yes'").click(function(){
    // spinner here
    a=$(this).parent()
    a.html('-spinner-')
    var id= $(this).data("id");
    var row = $(this).data("tableRow");
    $.get("/verify_link/"+id+"&table_row="+row);
    a.html('DONE') // temp hack
  }); 
});

记录在数据库中得到更新,我在 ui 中完成(临时黑客),但我实际上想要像在 verify_link.js.erb 中所做的那样进行原始验证/未经验证的工作

但是感觉好像在 jquery $.get 调用 verify_link 之后控制器没有调用 app/views/links/verify_link.js.erb(因此显示“DONE”)。

如果我刷新浏览器页面,我会看到日期已更新。

服务器日志显示

Started GET "/verify_link/386&table_row=2" for 127.0.0.1 at 2014-08-03 15:14:50 -0400
Processing by LinksController#verify_link as */*
  Parameters: {"id"=>"386&table_row=2"}
  User Load (0.2ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 2 LIMIT 1
  Link Load (0.4ms)  SELECT `links`.* FROM `links` WHERE `links`.`id` = 386 LIMIT 1
   (0.3ms)  BEGIN
   (0.6ms)  UPDATE `links` SET `verified_date` = '2014-08-03 19:14:51', `updated_at` = '2014-08-03 19:14:51' WHERE `links`.`id` = 386
   (0.7ms)  SELECT COUNT(*) FROM `links` WHERE (1 = 1 AND position = 354)
   (61.5ms)  COMMIT
  Rendered links/verify_link.js.erb (0.1ms)
Completed 200 OK in 868.2ms (Views: 2.4ms | ActiveRecord: 63.7ms)

【问题讨论】:

  • 谢谢,我在问题底部添加了最新的输出。
  • 您的 id 被发送到服务器的两件事是 {"id"=&gt;"386&amp;table_row=2"} 并且在您的控制器中您有 Link.find(params[:id]) 这样可能会导致问题,但在您的日志中您的用户和链接已正确加载。您能否使用调试器验证正在加载正确的链接。此外,您的 js.erb 模板也已渲染,因此您的 js 应该可以工作

标签: jquery ruby-on-rails ruby rspec unobtrusive-javascript


【解决方案1】:

一种做你想做的事情的方法是在控制器中以json格式返回@link,并且在你的verifying_link.js.erb文件中你必须修改ajax函数:

$.get("/verify_link/"+id+"&table_row="+row, function(data) {
  if (data.link.verified_date !== undefined) {
   $("span#verify_link_"+row).html('<span class="done">Verified</span>');
  } else {
   $("span#verify_link_"+row).html('<span class="undone">Unverified</span>');
  }
});

控制器中的响应可以是这样的: respond_to do |format| format.json { render json: @link.to_json } end

在此解决方案中,您不需要文件 verify_link.js.erb

【讨论】:

  • 部分工作(更新数据库)但总是使用“未验证”更新 ui,除非我实际重新加载页面,在这种情况下我会看到实际日期(因为数据库更新确实有效)。
  • 请更具体地了解控制器。我尝试添加 format.json 但只是得到错误 - 它导致 500 Internal Server Error&lt;h1&gt;Template is missing&lt;/h1&gt; &lt;p&gt;Missing template links/verify_link, application/verify_link with {:locale=&amp;gt;[:en], :formats=&amp;gt;[:json], :handlers=&amp;gt;[:erb, :builder, :coffee, :haml]}. Searched in: * &amp;quot;/home/durrantm/Dropnot/webs/rails_apps/linker/app/views&amp;quot; &lt;/p&gt;
  • 我尝试在控制器中切换到它,但它从未更新过“-spinner-”链接文本的页面。切换回 format.js 至少会更新页面(尽管始终使用 Unverified 即使不是这种情况)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-01-18
  • 1970-01-01
  • 2019-08-31
  • 2014-03-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多