使用 jQuery 和 Ajax 提交 Rails 表单答案

【问题标题】：Submitting a Rails form with jQuery and Ajax使用 jQuery 和 Ajax 提交 Rails 表单
【发布时间】：2009-07-15 18:57:56
【问题描述】：

编辑：想通了，所以问了一个相关的问题。

这是我的 Javascript

jQuery.ajaxSetup({
    'beforeSend': function(xhr) {
        xhr.setRequestHeader("Accept", "text/javascript")
    }
})

jQuery.fn.submitWithAjax = function() {
    this.submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    })
    return this;
};

    $('.error').hide();
$("#business_submit").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#business_name").val();
    if (name == ""  || name == "Required Field") {
        $('#namelabel').show()
        $("#business_name").focus();
        return false;
    }
    var address = $("#business_address").val();
    if (address == ""  || address == "Required Field") {
        $('#addresslabel').show();
        $("#business_address").focus();
        return false;
    }
    var city = $("#business_city").val();
    if (city == "" || city == "Required Field") {
        $('#citylabel').show();
        $('#business_city').focus();
        return false;
    }
    var state = $("#business_state").val();
    if (state == ""  || state == "Required Field") {
        $('#statelabel').show();
        $("#business_state").focus();
        return false;
    }
    var zip = $("#business_zip").val();
    if (zip == ""  || zip == "Required Field") {
        $('#ziplabel').show();
        $("#business_zip").focus();
        return false;
    }
    var phone = $("#business_phone").val();
    if (phone == ""  || phone == "Required Field") {
        $('#phonelabel').show();
        $("#business_phone").focus();
        return false;
    }

    var category = $("#business_business_category_id").val();
    if (category == " - Choose one - ") {
        $('#categorylabel').show();
        $("#business_business_category_id").focus();
        return false;
    }


   $.ajax ({
        type: "POST",
        data: form.serialize()
    });
    return false;
})

.ajax 代码触发我的 create.js.erb 文件，其中包含

$("#new_business").submitWithAjax();
$("#new_business")[0].reset();
$("#new_business").hide();

这是表格下方的表格。

<div id="unapproved">
  <table width="650" align="center" cellpadding="6" cellspacing="0">

    <tr>
      <td width="150"><a class="Contact<%=h @business.id %>" href="#"><%=h @business.name %></a></td>
      <td width="150"><%=h @business.address %></td>
      <td width="100"><%=h @business.business_category.name %></td>
      <td width="200"><%=h @business.description %></td>
      <td width="50"><%= link_to(image_tag('/images/accept.png', :alt => 'Approve'), :id =>@business.id, :action => 'approve') %>
        <a class="Edit<%=h @business.id %>" href="#"><img src="/images/pencil.png" alt="Edit" /></a>
      <%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :confirm => 'Are you sure?', :method => :delete) %></td>
    </tr>
  </table>
</div>

现在我唯一的问题是我的表单下方的表格没有动态刷新。它将数据添加到数据库中，并且所有验证都很好。但我必须刷新页面。我尝试添加类似

$("#unapproved").append("<%= escape_javascript(render(:file => 'business')) %>");

但这只会破坏它。

【问题讨论】：

标签： jquery ruby-on-rails ajax forms

【解决方案1】：

我的猜测（因为您的“提交”按钮不在上面的 HTML 中，所以您的“business_submit”按钮只是一个输入而不是提交按钮。

这段代码：

jQuery.fn.submitWithAjax = function() {
    this.submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    })
    return this; };

不告诉表单提交。它说当“提交”发生时，去做点什么。

来自jQuery documentation， submit(fn) 用于“绑定一个函数到每个匹配的提交事件元素。提交事件在什么时候触发提交了一个表单。”

您从未真正提交过表单。我愿意打赌（不能确定，因为我没有所有的代码）你把 submitWithAjax 方法改成这样：

jQuery.fn.submitWithAjax = function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false; };

它应该工作。它至少更接近你想要做的事情。

【讨论】：

【解决方案2】：

工作！我只是试图模仿 railscast 136。我把我的表扔到一个名为 _unapproved.html.erb 的文件中。在我的索引中，我将表格替换为：

<div id="unapproved">
  <%= render :partial => "unapproved" %>
</div>

然后在我的 create.js.erb 中，我有：

$("#unapproved").append("<%= escape_javascript(render(:partial => "unapproved")) %>");

游戏结束。 GG！

【讨论】：

- 游戏结束。 GG。喜欢刺激！

【解决方案3】：

.append 是否只是将该文字字符串添加到您的#unapproved div 中？

.append 想要附加呈现的 html 而不是您尝试使用的 ERB 代码。我为这类事情做的是在我的控制器中使用渲染函数，以便 AJAX 调用获取渲染的 HTML。

例如在控制器中；

respond_to do |format|
  format.js { 
    render :partial => "menu", :layout => false and return
  }
end

在视图中；

$("a.show_menu").click(function() {
  var url = $(this).attr('href');
  $.ajax({
      beforeSend      : function(request) { request.setRequestHeader("Accept", "text/javascript"); },
                      /* Included so Rails responds via "format.js" */
      success         : function(response) { $("#menu").empty().append(response); },
      type            : 'GET',
      url                 : url
  });
  return false;
});

【讨论】：