बूटस्ट्रैप में जावास्क्रिप्ट निष्पादित करने वाले रेल 4 मोडल

Question

मेरे पास एक रेल 5.1 एप्लीकेशन है जहां मैं कॉफ़ीस्क्रिप्ट/जेएस का उपयोग करके एक फॉर्म के अंदर अजाक्स का उपयोग करके एक मरीज रिकॉर्ड बना रहा हूं। यह ठीक कोई समस्या निम्नलिखित कोड का उपयोग कर काम करता है:

_form.html.erb

<div class="modal fade patient-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
    <div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="mySmallModalLabel">Add Patient</h4> 
     </div> 
     <div class="modal-body"> 
     <%= form_for Patient.new do |f| %> 
      <div class="form-group"> 
      <%= f.label :first_name %> 
      <%= f.text_field :first_name, class: "form-control" %> 
      <%= f.label :last_name %> 
      <%= f.text_field :last_name, class: "form-control" %> 
      <%= f.label :date_of_birth %> 
      <%= f.text_field :date_of_birth, class: "form-control", id: 'patient_dob_modal', placeholder: 'yyyy-mm-dd' %> 
      <%= f.label :age %> 
      <%= f.text_field :age, class: "form-control", id: 'patient_age_modal' %> 
      <%= f.label :sex %> 
      <%= f.text_field :sex %> 
      </div> 
      <div class="form-group"> 
      <%= f.submit class: "btn btn-sm btn-primary" %> 
      </div> 
     <% end %> 
     </div> 
    </div> 
    </div> 
</div> 

application.js

$(document).on('turbolinks:load', function() { 
    $('#patient_date_of_birth_modal').datepicker({ 
    format: 'yyyy-mm-dd', 
    zIndexOffset: 100000, 
    forceParse: false 
    }); 
}); 

patients.coffee

$(document).on 'turbolinks:load', -> 
    selectizeCallback = null 
    $('.patient-modal').on 'hide.bs.modal', (e) -> 
    if selectizeCallback != null 
     selectizeCallback() 
     selectizeCallback = null 
    $('#new_patient').trigger 'reset' 
    $.rails.enableFormElements $('#new_patient') 
    return 
    $('#new_patient').on 'submit', (e) -> 
    e.preventDefault() 
    $.ajax 
     method: 'POST' 
     url: $(this).attr('action') 
     data: $(this).serialize() 
     success: (response) -> 
     selectizeCallback 
      value: response.id 
      text: response.first_name 
     selectizeCallback = null 
     $('.patient-modal').modal 'toggle' 
     return 
    return 
    $('.patient').selectize create: (input, callback) -> 
    selectizeCallback = callback 
    $('.patient-modal').modal() 
    $('#patient_first_name').val input 
    return 
    return 

रोगी मोडल में मैं बूटस्ट्रैप-datepicker उपयोग कर रहा हूँ जन्म दिनांक का चयन करने के लिए, तो मैं कुछ coffeescript उम्र की गणना और यह स्वत: ही बस के रूप में patients.coffee में नीचे इस कोड में देखा लिखा

$(document).on 'turbolinks:load', -> 
    getAge = (dateString) -> 
    today = new Date 
    birthDate = new Date(dateString) 
    age = today.getFullYear() - birthDate.getFullYear() 
    m = today.getMonth() - birthDate.getMonth() 
    if m < 0 or m == 0 and today.getDate() < birthDate.getDate() 
     age-- 
    age 

    $('#patient_dob_modal').on 'change', -> 
    date = $(this).val() 
    age = getAge(date) 
    $('#patient_age_modal').val age 
    return 
    return 

जब मैं एक मरीज और मोडल आग/शो को जोड़ने के लिए जाता हूं, तो मैं नाम, इत्यादि जैसे फ़ील्ड भर सकता हूं लेकिन जब मैं डेटपिकर का उपयोग करके जन्मतिथि चुनता हूं और कॉफ़ीस्क्रिप्ट को उम्र की गणना करने देता है तो यह दिखाई देगा खेतों तक जब तक मैं बूटस्ट्रैप-डेटपिकर को खारिज नहीं करता, तब यह पहला और अंतिम नाम समेत संपूर्ण मोडल फॉर्म को साफ़ कर देगा।

जब मैं निरीक्षण करता हूं तो मुझे कंसोल में कोई त्रुटि दिखाई नहीं देती है और मुझे कॉफ़ीस्क्रिप्ट ठीक से निष्पादित करने को दिखाई देता है।

मैं ईमानदारी से यह सुनिश्चित नहीं कर रहा हूं कि समस्या क्या है क्योंकि मैं जावास्क्रिप्ट/कॉफ़ीस्क्रिप्ट में रूचि नहीं हूं क्योंकि मैं रूबी में हूं। मैं सोच रहा था कि क्या कुछ ऐसा है जो मैं गलत कर रहा हूं जिससे इनपुट क्षेत्र को मेरे कॉलबैक में या गणना में कहीं भी साफ़ किया जा रहा है।

किसी भी मदद की सराहना की जाएगी। मैंने गुमराह किया है और स्टैक की खोज की है और एक मॉडल के अंदर जेएस को निष्पादित करने के बारे में कुछ लेख पाए हैं और अभी तक कार्यक्षमता के इस छोटे टुकड़े के साथ सफलता हासिल नहीं की है।

अद्यतन मैंने बूटस्ट्रैप-डेटपिकर को अक्षम कर दिया है और केवल जन्म क्षेत्र की तारीख में मैन्युअल रूप से टाइप किया है और पूरे फॉर्म को साफ़ किए बिना कॉफ़ीस्क्रिप्ट की गणना की गई है। तो यह बूटस्ट्रैप-डेटपिकर के साथ कुछ समस्या की तरह दिखता है। लेकिन मुझे यकीन नहीं है कि समस्या कहां है।

Answer 1

, मैं https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951

की ओर इशारा किया गया था

इसलिए मैंने अपना कोड इस पर बदल दिया:

$(document).on('turbolinks:load', function() { 
    $('#patient_date_of_birth_modal').datepicker({ 
    format: 'yyyy-mm-dd' 
    }).on('hide', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    }); 
}); 

Google आंखों की अतिरिक्त जोड़ी के लिए जैकब एम के लिए धन्यवाद।

Answer 2

ऐसा इसलिए है क्योंकि डेटपिकर का मोडल 'hide.bs.modal' ईवेंट को बंद कर देता है, जो '.patient-modal' तक प्रचारित होता है। Read more

आप datepicker के मोडल घटना

या अधिक स्पष्ट रूप पर event.stopPropagation() का उपयोग कर सकते ईवेंट हैंडलर में प्रपत्र का चयन करें: ढेर के बाहर मदद के लिए बाहर तक पहुँचने के बाद

$form = $(e.target).find('#new_patient') 
$form.trigger 'reset' if $form