Rails - 表单的 jQuery UI 对话框？答案

【问题标题】：Rails - jQuery UI Dialog for a Form?Rails - 表单的 jQuery UI 对话框？
【发布时间】：2011-02-28 06:05:37
【问题描述】：

我有一个“项目”控制器和一个“新”方法来创建不同类型的项目。我想在 jQuery UI 对话框窗口中拥有该表单。我今晚开始玩，并且能够使用表单显示一个对话框：

$("#load_form")
  .load('/items/new', {item_type: '#item_type_select'})
  .dialog({modal:true, width:'auto', height:'auto'});

现在表单是严格的 HTTP (form_for)。当 UI Dialog 窗口中的表单被提交时（或者实际上如果任何链接被点击或任何页面请求），UI Dialog 窗口关闭并且新页面被加载到浏览器中。

如果 jQuery UI 对话框窗口可以“更改页面”并显示显示页面（表单提交成功）或再次显示带有 fieldErrors 的“新”页面（保存失败），我应该怎么做？我没有任何运气找到任何关于如何设置 Rails 表单的教程以及 jQuery UI 对话框的响应（保存失败/成功）。

谢谢！

【问题讨论】：

标签： jquery ruby-on-rails forms modal-dialog

【解决方案1】：

您必须使用 jQuery 提交表单并使用 jQuery 处理成功的结果。

要使用 jQuery 提交表单，您可以执行以下操作：

$('form').submit(function(){
  $.ajax({
    type: this.method,
    url: this.action,
    data: $(this).serialize(),
    dataType: "html",
    success: successHandler,
    error: errorHandler
  });
  return false;
});

successHandler 和 errorHandler 是在 AJAX 请求完成后将调用的函数，具体取决于服务器返回的状态码。

jQuery 将传递三个参数——data, textStatus, jqXHR 用于success 和jqXHR, textStatus, errorThrown 用于error。从 jQuery 1.5.1 开始，您还可以链接回调，或者您可以将 AJAX 事件绑定到您的容器 — 有关所有选项和更多详细信息，请查看 docs。

在任何情况下，根据您在服务器上处理错误的方式，回调会将结果插入到您的 DOM、显示/重新填充模式等。

你可以例如只需用服务器使用.html(data) 发回的结果替换您的模态内容或包含的表单，解析错误等。或者您关闭当前模态并打开一个包含返回数据的新模态。

【讨论】：