जावास्क्रिप्ट जोड़ा गया है जब डेटपिकर का चयन किया गया है तो HTML मान हटा दिया गया है

Question

मेरे पास बूटस्ट्रैप मोडल है जहां आप एक दिनांक चुन सकते हैं। पृष्ठभूमि में, छिपे हुए फ़ील्ड आबादी वाले होते हैं जिन्हें फ़ॉर्म के साथ भी सबमिट किया जाता है।

समस्या यह है कि जब आप datepicker तत्व का चयन करते हैं, तो यह कुछ अजीब कारणों के लिए छिपे हुए मूल्य को हटा देता है (लेकिन केवल जावास्क्रिप्ट द्वारा छिपे हुए छिपे हुए मान)।

Datepicker जे एस:

var date = new Date(); 
date.setDate(date.getDate()); 

$('#datepicker').datepicker({ 
    format: "dd/mm/yyyy", 
    startDate: date, 
    autoclose: true, 
}); 

छिपे हुए क्षेत्र को आबाद करने जेएस:

$(function() { 
    $('#appointment').on("show.bs.modal", function (e) { 
     $("#request_id").val($(e.relatedTarget).data('request-id')); 
    }); 
}); 

हिडन HTML तत्व:

<input type="hidden" name="request_id" id="request_id" value=""> 

जब मॉडल बॉक्स प्रारंभ में पॉप अप करता है, तो मैं देख सकता हूं कि छुपा मूल्य फ़ील्ड पॉप्युलेट किया गया है, लेकिन जब मैं datepicker पर क्लिक करता हूं, तो इसे हटा दिया जाता है। ऐसा क्यों है?

Answer 1

समस्या यह है कि show.bs.modal बूटस्ट्रैप डेटपिकर खोले जाने पर निकाल दिया जाता है। इसलिए आपको #request_id मान केवल सेट करना होगा जब show.bs.modal मोडल खोलने से संबंधित है। ईवेंट को निकालने वाले तत्व को प्राप्त करने के लिए आप जिस तरह से उपयोग कर सकते हैं, वह आपके हैंडलर के अंदर e.target.id मूल्य की जांच कर रहा है।

यहाँ एक काम कर नमूना: .val साथ

$('#datepicker').datepicker({ 
 
    format: "dd/mm/yyyy", 
 
    startDate: new Date(), 
 
    autoclose: true, 
 
}); 
 

 
$(function() { 
 
    $('#appointment').on("show.bs.modal", function (e) { 
 
    if(e.target.id == 'appointment'){ 
 
     $("#request_id").val($(e.relatedTarget).data('request-id')); 
 
    } 
 
    }); 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 

 

 
<input type="hidden" name="request_id" id="request_id" value=""> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#appointment" data-request-id="myExampleId"> 
 
    Open appointment modal 
 
</button> 
 

 
<div id="appointment" class='modal fade'> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
 
     <h4 class="modal-title">Title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
      <label for="datepicker">Date bootstrap</label> 
 
      <input type="text" id="datepicker"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

विश्वसनीय Bootstrap-datepicker का उपयोग करें। यदि आप इसका उपयोग करते हैं और $ AJAX कॉल करते हैं, तो अपने फॉर्म मानों को सूचीबद्ध करते समय $ AJAX() बनाते समय अतिरिक्त मानों को रोकें।