jquery - 从对话框窗口成功提交表单后，如何更新前端内容？

Question

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

我想实现我的 View ，以便成功提交表单后前端内容改变为:触发链接文本从“新评论”更改为“编辑评论”。

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

---

注意:表单是通过执行 AJAX HTTP 请求依次提交的。

Answer 1

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

如果您提交的表单设置了 :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你可以简单地挂接到success jQuery 提供的回调，但我想这很明显。

更新:

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

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

然后你可以这样做:

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

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

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

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

因为 window.trigger_link 指的是正确的链接。