in attempt make rails html more readable extracted several parts of partials. use jquery render partials. issue form has come "unhooked" speak, meaning when attempt submit form acts though partials don't exist. suspect not understanding quite how forms work, because seems in other answers related form builder isn't addressed.
this question seems related want think i'm inexperienced grasp properly
the code have far goes follows:
/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'); } } }); }); and then
/views/work_orders/_form.html.erb <%= form_for(@workorder) |f| %> <% if @workorder.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@workorder.errors.count, "error") %> prohibited workorder being saved:</h2> <ul> <% @workorder.errors.full_messages.each |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 |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 %> and example of 1 of partials:
/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 |ff| %> . . . <% end %> i'm not sure how tie can load partials based on select box, submit them 1 form.
edit: found this question deals same issue, suspect because rendering partial after page has been loaded no longer have access form builder variable.
$('.presort-information').append( '<%= j render("presort_informations/form", f: f) %>' ); gives undefined variable error when it's called. i'm still not sure how bridge gap between jquery , rails.
turns out relatively (if new conceptually me) easy fix first, load each dom partial in along hidden sections.
<%= form_for(@workorder) |f| %> <% if @workorder.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@workorder.errors.count, "error") %> prohibited workorder being saved:</h2> <ul> <% @workorder.errors.full_messages.each |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> then javascript move things in , out of form:
$(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(''); } }); basically, idea load in if going use all, , move partials hidden section of dom, , use js put them in when user makes selection
Comments
Post a Comment