【问题标题】:How to load rails form partials with jquery and submit as one form如何使用jquery加载rails表单部分并作为一个表单提交
【发布时间】:2015-09-28 10:39:34
【问题描述】:

为了使我的 rails html 更具可读性,我将它的几个部分提取为部分。然后我使用 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 之间的差距。

【问题讨论】:

    标签: javascript jquery ruby-on-rails


    【解决方案1】:

    事实证明这是一个相对(如果在概念上对我来说是新的)简单的修复 首先,加载每个 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 将它们放回原处选择

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多