jquery - Rails - 表单的 jQuery UI 对话框？

Question

我有一个“项目” Controller 和一个用于创建不同类型项目的"new"方法。我希望在 jQuery UI 对话框窗口中拥有该表单。我今晚开始玩，并能够获得一个带有表单的对话框:

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

现在表单是严格的 HTTP (form_for)。当提交 UI 对话框窗口中的表单时(或者实际上单击任何链接或任何页面请求)，UI 对话框窗口将关闭并在浏览器中加载新页面。

如果 jQuery UI 对话框窗口可以“更改页面”并显示显示页面(表单提交成功)或再次显示"new"页面并出现 fieldErrors(保存失败)，我应该考虑做什么？我没有找到像关于如何设置 Rails 表单和 jQuery UI 对话框的响应(保存失败/成功)的教程之类的内容。

谢谢!

Answer 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(表示成功)和 jqXHR、textStatus、errorThrown(表示错误。从 jQuery 1.5.1 开始，您还可以链接回调，或者将 AJAX 事件绑定(bind)到您的容器 - 有关所有选项和更多详细信息，请检查 docs 。

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

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