从对话窗口成功提交表单后如何更新前端内容?

时间:2012-09-12 13:11:35

标签: jquery ruby-on-rails ruby jquery-ui modal-dialog

我正在使用Ruby on Rails 3.2.2和jQuery-Rails 2.0.2 gem(包括jQuery UI)。当我点击前端内容中的“新评论”链接时,我有一个jQuery UI Dialog窗口打开。当对话框窗口打开时,它会对我的控制器动作执行AJAX HTTP请求,使其能够使用HTML表单呈现和“填充”模态窗口正文内容。

我想实现我的视图,以便在成功提交表单后 前端内容以这种方式更改:触发链接文本将“新注释”更改为“编辑注释”。

我该怎么做?你有什么建议?


注意:通过执行AJAX HTTP请求轮流提交表单。

1 个答案:

答案 0 :(得分:0)

这完全取决于您如何将该表单提交给服务器。

如果您提交的表单设置了:remote => true属性,它将通过AJAX调用发送到服务器,服务器将能够将其与常规的非ajax表单请求区分开来:

respond_to do |format|
  format.js  #this renders the <actionname>.js.erb file and executes it on the client
end

然后jquery_ujs帮助程序将执行服务器返回给他的javascript代码。

您可以在<actionname>.js.erb文件中编写任意JavaScript代码,如下所示:

$('#trigger_link').text('edit comment');

如果你没有使用远程表单,而是进行正常的$.ajax调用,你可以简单地挂钩jQuery提供的success回调,但我想这很明显。

<强>更新

似乎问题是你不知道什么链接触发了对话框的打开。

通常在某个地方你有一个jQuery函数可以为你打开对话框。当渲染包含触发链接的初始列表时,我假设您有一些方法可以将它们与页面上的其他链接区分开来(可能通过像.trigger这样的css类。)

然后你可以这样做:

$('.trigger').click(function() {
  window.trigger_link = this;
});

请注意,上面的这个小片段不会覆盖打开弹出窗口的现有点击事件处理程序。它也会被执行。

现在我们跟踪打开窗口的链接(单击触发链接打开窗口 - 我们总是保存最后点击的触发链接)我们可以在提交表单后执行以下操作:

$(window.trigger_link).text('edit comment');

因为window.trigger_link引用了正确的链接。