使用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; 
});