使用jQuery和Ajax提交Rails表单

Question

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

，这里是我的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; 
}) 

的阿贾克斯代码触发包含

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

这里的形式下表我create.js.erb文件。

<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')) %>"); 

但这只是打破它。

Answer 1

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

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

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

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

游戏结束。 GG！

Answer 2

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

此代码：

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

没有告诉表单提交，它说，当“提交”时，去做点事。

从jQuery documentation， 提交（FN）用于“绑定功能 到每个匹配的 元素的提交事件。当 提交表单提交事件触发。”

你从来没有真正提交表单。我敢打赌（不能肯定，因为我不知道所有的代码）是你改变了submitWithAjax方法是：

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

它应该工作它至少更接近你想要做什么

Answer 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; 
});