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
Post a Comment