2015-07-09 29 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将它们放回到用户进行选择时