2015-07-09 54 views
0

在試圖讓我的軌道HTML更具可讀性我提取它的幾個部分爲諧音。然後我使用jQuery來渲染部分。問題是,現在形式已經全部「脫鉤」了,也就是說,當我嘗試提交表單時,它的行爲好像不存在分支。我懷疑我不是很瞭解表單如何工作,因爲在其他與此相關的答案中,表單構建器甚至沒有提到。如何加載軌形成與jQuery泛音,並提交作爲一種形式

This SO question似乎都跟我想做的事情,但我覺得我太缺乏經驗,正確把握其

我迄今去的代碼如下:

/assets/javascripts/work_order.js 
$(document).ready(function(){ 
$('.best_in_place').best_in_place(); 
$('#work_order_dueDate').datepicker(); 
$.datepicker.setDefaults({ dateFormat: 'dd-mm-yy'}); 
var selection_made = false 
$('#work_order_project_type_id').change(function(){ 
    if (!selection_made){ 
     selection_made = true 
     var selection = $(this).find('option:selected').text(); 
     if (selection == "Variable Data Mailing"){ 
      $.get('/presort_informations/new'); 
      $.get('/printing_instructions/new'); 
     } 
     else if (selection == "Mailing"){ 
      $.get('/presort_informations/new');    
     } 
     else if (selection == "Print Job"){ 
      $.get('/printing_instructions/new');    
     } 
    } 
    }); 
}); 

然後

/views/work_orders/_form.html.erb 

<%= form_for(@workorder) do |f| %> 

    <% if @workorder.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@workorder.errors.count, "error") %> prohibited this workorder from being saved:</h2> 

     <ul> 
     <% @workorder.errors.full_messages.each do |message| %> 
     <li><%= message %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 
    <fieldset class="general-info"> 
    <legend>General</legend> 
    <div class="col-md-12"> 
     <div class="col-md-3"> 
     <div class="form-group"> 
      <%= f.label :Job_Title, class: "control-label" %> 
      <%= f.text_field :title, class:"form-control" %> 
     </div> 

     <div class="form-group"> 
      <%= f.label :Project_Type, class: "control-label" %> 
      <%= f.collection_select(:project_type_id, ProjectType.all, :id, :name, {:prompt => true}, {:class => "form-control"}) %> 
     </div> 
     </div> 
    <div class="col-md-3"> 
     <div class="form-group"> 
     <%= f.label :Rep, class: "control-label" %> 
     <%= f.text_field :rep, class:"form-control" %> 
     </div> 
     <div class="form-group"> 
     <%= f.label :Labels, class: "control-label" %> 
     <%= f.collection_select(:labels_id, Labels.all, :id, :name, {:prompt => true}, {:class => "form-control"}) %> 
     </div> 
    </div> 
    <div class="col-md-3"> 
     <div class= "form-group"> 
      <%= f.label :Due_Date, class: "control-label" %> 
      <%= f.text_field :dueDate, class: "form-control" %> 
     </div> 
     <div class="form-group"> 
     <%= f.label :Project_Description, class: "control-label" %> 
     <%= f.text_area :projectDescription, class: "form-control" %> 
     </div> 
    </div> 
    </div> 
    </fieldset> 
    <fieldset class="presort-information"> 

    </fieldset> 
    <div class="col-md-6 printing"> 

    </div> 
    <fieldset class="production-details"> 
    <legend>Production</legend> 
    <%= f.fields_for :production_details, ProductionDetails.new do |ff| %> 

    <%end%> 
    </fieldset> 
    <%= f.hidden_field(:number, :value => @workorder.number) %> 
    <%= f.hidden_field(:client_id, :value => @workorder.client_id) %> 
    <%= f.submit(class: "btn btn-default") %> 
<% end %> 

和作爲分音中的一個的示例:

/app/views/presort_informations/new.js.erb 
$('.presort-information').append('<%= j render("presort_informations/form") %>'); 

/app/views/presort_informations/_form.html.erb 
<legend>Mailing</legend> 
<%= fields_for :presort_information, PresortInformation.new do |ff| %> 
. 
. 
. 
<% end %> 

我真的不知道如何打這一切都在一起,這樣我可以加載基於該選擇框諧音,但隨後提交所有這些內容的形式。

編輯: 我發現this SO question與同一問題的交易,但我懷疑,因爲我渲染局部頁面已經被加載後,我不再有機會獲得表單生成器變量。

$('.presort-information').append('<%= j render("presort_informations/form", f: f) %>'); 

當它被調用時會給出一個未定義的變量錯誤。我仍然不確定如何彌補jquery和rails之間的差距。

回答

0

原來這是一個比較(如果有新的概念對我來說)容易解決 首先,加載每個DOM以隱藏部分沿部分。

<%= form_for(@workorder) do |f| %> 
    <% if @workorder.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@workorder.errors.count, "error") %> prohibited this workorder from being saved:</h2> 
     <ul> 
     <% @workorder.errors.full_messages.each do |message| %> 
     <li><%= message %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 

    <fieldset id="general-info-partial"> 
    <%=render("genInfo", f: f)%> 
    </fieldset> 
    <fieldset id="presort-information-partial"> 
    <%=render("presort_informations/form", f: f)%> 
    </fieldset> 
    <div class="col-md-6"> 
    <fieldset id="printing-information-partial"> 
    <%=render("printing_instructions/form", f: f)%> 
    </fieldset> 
    </div> 
    <fieldset id="production-details-partial"> 
    <%=render("production_details/form", f: f) %> 
    </fieldset> 
    <%= f.hidden_field(:number, :value => @workorder.number) %> 
    <%= f.hidden_field(:client_id, :value => @workorder.client_id) %> 
    <input type="submit" value="Submit" class="btn btn-default"> 
<% end %> 

<div id="hidden-general-info" class="hidden"></div> 

<div id="hidden-presort-information" class="hidden"></div> 

<div id="hidden-printing-information" class="hidden"></div> 

然後Javascript來搬東西進出形式:

$(document).ready(function(){ 
$('.best_in_place').best_in_place(); 
$('#work_order_dueDate').datepicker(); 
$.datepicker.setDefaults({ dateFormat: 'dd-mm-yy'}); 

var presortFields = $('#presort-information-partial'); 
var printingFields = $('#printing-information-partial'); 

var presortHidden = $('#hidden-presort-information'); 
var printingHidden = $('#hidden-printing-information'); 

presortHidden.html(presortFields.html()); 
presortFields.html(''); 

printingHidden.html(printingFields.html()); 
printingFields.html(''); 

$('#work_order_project_type_id').change(function(){ 

     var selection = $(this).find('option:selected').text(); 

     if (selection == "Variable Data Mailing"){ 
      if (printingFields.html() == '' && presortFields.html() == ''){ 
       printingFields.html(printingHidden.html()).hide().slideDown(); 
       presortFields.html(presortHidden.html()).hide().slideDown(); 
      } 
      else if(printingFields.html() == '' && !(presortFields.html() == '')){ 
       printingFields.html(printingHidden.html()).hide().slideDown(); 
      } 
      else if(!(printingFields.html() == '') && presortFields.html() == ''){ 
       presortFields.html(presortHidden.html()).hide().slideDown(); 
      } 
     } 
     else if (selection == "Mailing"){ 
      if(!(printingFields.html() == '')){ 
       printingFields.slideUp(); 
       printingFields.html(''); 
       presortFields.html(presortHidden.html()).hide().slideDown(); 

      }else{ 
       presortFields.html(presortHidden.html()).hide().slideDown(); 
      } 

     } 
     else if (selection == "Print Job"){ 
      printingFields.html(printingHidden.html()).hide().slideDown(); 
      presortFields.slideUp(); 
      presortFields.html(''); 
     } 
}); 

基本上,這個想法是,如果我打算用這一切來加載所有內容,然後只是移動部分進入DOM的隱藏部分,然後使用JS將它們放回到用戶進行選擇時