Rails JQuery Validate within Modal not Firing -


i have been successful in getting jquery form validation work fine within regular body of page, however, when try validation working within modal box, jquery doesn't fire.

modal partial:

<div class="modal" id="mymodal">     <div class="modal-dialog">       <div class="modal-content">         <div class="modal-header">           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>           <h4 class="modal-title">new account</h4>         </div>         <div class="modal-body" id = "addclientform">           <%= simple_form_for @client, :remote => true, :html => { :id => "addclientform"} |f| %>             <div>                   <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">                 <%= f.input :company_name %>               </div>                  <%= f.button :submit %>             </div>             <div class="clearfix">             </div>           <% end %>         </div>       </div>     </div>                         </div> 

script: when place form outside of modal, use $(document).ready( function () { instead of $("#mymodal").on("shown.bs.modal", function () {. however, document. ready doesnt work form when within modal.

 <script>       $("#mymodal").on("shown.bs.modal", function () {         $("#addclientform").validate({           rules: {             "client[company_name]": {               required: true             }           },           messages: {             "client[company_name]": {               required: "company name required field."             }           }       });     } ); </script> 

model:

class client < activerecord::base   validates :company_name, presence: true    has_many :quotes   has_many :current_plans  end 

terminal output: when jquery fires properly, no feedback in terminal , validation shows. when jquery doesn't fire get: started post "/clients" 66.186.164.130 @ 2015-08-19 18:16:54 +0000 processing clientscontroller#create js

  parameters: {"utf8"=>"✓", "client"=>{"company_name"=>""}, "commit"=>"create client"}    (30.5ms)  begin    (30.5ms)  rollback    (30.8ms)  select count(*) "clients"    (30.6ms)  select count(*) "quotes"   rendered clients/_client_table.html.erb (0.1ms)   rendered clients/_newclientmodal.html.erb (15.3ms)   rendered clients/home.html.erb (82.0ms) completed 200 ok in 152ms (views: 25.2ms | activerecord: 122.4ms) 

application.js:

//= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require jquery-ui/datepicker //= require best_in_place //= require best_in_place.jquery-ui //= require moment //= require bootstrap-datetimepicker //= require pickers //= require jquery.validate //= require jquery.validate.additional-methods //= require datatables/jquery.datatables //= require datatables/bootstrap/3/jquery.datatables.bootstrap //= require datatables/jquery.datatables //= require datatables/extras/datatables.tabletools //= require twitter/bootstrap //= require turbolinks //= require bootstrap3-editable/bootstrap-editable //= require_tree . 

please let me know if need further information. thanks!

try changing order of assets turbolinks last item in file:

//= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require jquery-ui/datepicker //= require best_in_place //= require best_in_place.jquery-ui //= require moment //= require bootstrap-datetimepicker //= require pickers //= require jquery.validate //= require jquery.validate.additional-methods //= require datatables/jquery.datatables //= require datatables/bootstrap/3/jquery.datatables.bootstrap //= require datatables/jquery.datatables //= require datatables/extras/datatables.tabletools //= require twitter/bootstrap //= require bootstrap3-editable/bootstrap-editable //= require_tree . //= require turbolinks 

i know said you're not using torbolinks, had problem js code select2 , fuelux wizard (apparently not related turbolinks) , making changes solved it.


Comments

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

html - Missing border-right in select on Firefox -

python - build a suggestions list using fuzzywuzzy -