標記或訣竅？嵌套表格

Question

有一個有趣的任務：我的活動記錄'事件'實體可以包含一個'附件'PDF文件。在創建活動頁面上，用戶可以上傳這個附件之前提交該事件。附件通過Ajax上傳到亞馬遜，進度條顯示etc blablabla。 應該顯示in_a_way：

= form_for @event do |e| 
    = e.text_field :name 

    = form_for @attach, :remote=>true, html=>{:multipart=>true} do |at| 
    = at.file_field :pdf, :accept=>"pdf", :size=>"1" 
    = at.submit 

    = e.submit 

是，這僅僅是僞代碼，我不介意它怎麼能工作，但其主要思想是禮物：[提交附件]按鈕應將置於的Event窗體中。 我如何實現它？也許，只需對嵌套的附件表單進行一些偏移，以便它將顯示在事件表單中，或者有其他解決方案？

.............................................. ........ ......................................... ...........

Answer 1

解決方案：覆蓋形式頭 這是創建新的活動形式。 在這個表單中，我們需要ajax文件上傳。 有一個解決方案：混合兩種不同類型的提交之間的單一形式：阿賈克斯（JS）和HTML：

= form_for @event, html=>{:multipart=>true} do |e| 
    = e.text_field :name 

    = file_field_tag "attach[pdf]", :id=>"attach_pdf", :accept => "pdf", :maxlength => "200" 
    = submit_tag "", :id => "ajax_submit", :style=>"display:none" 

    = e.submit <!-- id = "new_event_submit" --> 

//////////////////////////// 
// before 'submits' call override functions: 

$("#ajax_submit").click(function(){ 
    prepeareFormForAjax(); 
    return true; 
}); 

$("#new_event_submit").click(function(){ 
    prepeareFormForHtml(); 
    return true; 
}); 

////////////////////////////// 
// to store original (previous, html) form data 
var html_form_action = ""; 
var html_form_method = ""; 
/////////////////////////////// 

/* 
* To ajax file upload: 
**/ 
function prepeareFormForAjax() { 
    $("form").attr("data-remote", "true"); 
    $("form").attr("enctype", "multipart/form-data"); 

    html_form_action = $("form").attr("action"); // save old action 
    $("form").attr("action", "/attach");   // I need /nors action 

    //_method field is a hidden form field, maybe you have it too on the page: 
    if ($('input[name="_method"]').length != 0) { 
    html_form_method = $('input[name="_method"]').val(); 
    $('input[name="_method"]').val("post"); 
    } 

} 

function prepeareFormForHtml() { 
    $("form").removeAttr("data-remote"); 
    $("form").removeAttr("enctype"); 
    if (html_form_action != "") { 
    $("form").attr("action", html_form_action); 
    html_form_action = ""; 
    } 
    if (html_form_method != "") { 
    $('input[name="_method"]').val(html_form_method); 
    html_form_method = ""; 
    } 
} 

/////////////////////// 

現在，通過使用AJAX上傳文件：

$("#ajax_submit").click(); 

什麼問題嗎？