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(); 

を含むフォーム下表のMy 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')) %>"); 

のようなものを追加しようとしましたが、ただ破損してしまいました。あなたのボタンがHTMLにない「送信」ので

Answer 1

作業中！私はレールキャスト136を模倣しようとしました。テーブルを_unapproved.html.erbというファイルに投げました。私のインデックスでは、テーブルを次のように置き換えました。

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

そして次に私のcreate.jsで。私は持っていた：

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

ゲームオーバー。 GG！

Answer 2

私の推測では、（上記のあなたの「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は、使用しようとしているERBコードではなくレンダリングされたhtmlを追加します。私がこのようなことをするのは、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; 
});