कैसे मान के रूप में बूटस्ट्रैप मॉडल टेक्स्ट बॉक्स में जावा स्क्रिप्ट चर लोड करने के लिए


13

मैं जावास्क्रिप्ट मॉडल लोड बॉक्स के लिए जावास्क्रिप्ट चर लोड में कुछ समस्या है:

setTimeout(function() {
  swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"
    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(data.value); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');
        clear_field();
      }
    });
}, 1);
<div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Sub OT Request</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="form-group">
            <div class="input-daterange">
              <input type="text" name="from_date" id="from_date" class="form-control" value="<?php echo $_GET[" month "]; ?>" readonly />
              <span id="error_from_date" class="text-danger"></span>
              <span id="error_future_from_date" class="text-danger text-center"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="text-info">Tolal Number Of Employee <?php echo get_total_employee_count($connect,$_SESSION["dept_Id"])?></br>
            <label>Add the addition number of OT hours requried</lable>
            <input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>
            <label class="text-secondary">Approved OT hours :   <?php echo GetApprovedOt($connect,$_SESSION["dept_Id"],$currentMonth)?></br></label><br>
            <label class="text-secondary">Pendding OT hours :  <?php echo GetPendingOt($connect,$_SESSION["dept_Id"],$currentMonth)?></label>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" name="get_approval" id="get_approval" class="btn btn-info btn-sm">Get Approval</button>
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
        </div>

      </div>
    </form>
  </div>
</div>

data.value यहाँ सही मूल्य के लिए सचेत करता है। लेकिन यह मान बूटस्ट्रैप मॉडल टेक्स्ट बॉक्स पर लोड नहीं होता है। मेरी क्या गलती है? मैं इसे कैसे ठीक करूं? (केवल समस्या पाठ क्षेत्र के पक्ष में लोड नहीं जावास्क्रिप्ट मूल्य है। यह div टैग के लिए HTML के रूप में प्रिंट कर सकते हैं)

अद्यतन मैं cdn SweetAlert बूस्टर निम्नलिखित का उपयोग किया

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css" />


नहीं काम भाई। मुझे लगता है कि समस्या कुछ और है
कोड क्रिस

मुझे लगता है कि आपने JS फाइल को लिंक नहीं किया है। एक अलर्ट फ़ंक्शन लिखें और सुनिश्चित करें कि आपने इसे लिंक किया है ..
अहमद सफनाज

चेतावनी (data.value); सही मान दिखाएं
कोड क्रिस

1
मैं नवीनतम सीडीएन 'स्वीटलर्ट' का उपयोग करता हूं
कोड

जवाबों:


5

आपके पोस्ट किए गए कोड में थोड़ी कमी है और इसमें कुछ त्रुटियां हैं, वैसे भी मैंने आपकी समस्या को दोहराने की कोशिश की है और मुझे लगता है कि मुझे यह काम करना पड़ सकता है। Jsfiddle स्निपेट के नीचे एक नज़र डालें और देखें कि क्या आप इसे काम करने के लिए अपने कोड में लागू कर सकते हैं।

CHECK OUT THIS LINK FIRST: https://jsfiddle.net/b1nary/je60gxv8/2/

अपने SWEETALERT के साथ अद्यतन: https://jsfiddle.net/b1nary/je60gxv8/11/

setTimeout(function() {
    swal({
    title: "OverTime Status!",
    text: "You Need to get Sub OT Approval " + data_val + " Hours to Time allocate",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, do it",
    closeOnConfirm: false,
    html: false
  }, function(){
    swal("Deleted!",
    "Poof! Your number has been added to input box!",
    "success");
    $('#hours_work').val(data_val); 
    $('#overtime_requset').modal('show');
    //clear fields    
  });

}, 1000 );

मैंने बूटस्ट्रैप के लिए मीठे अलर्ट का इस्तेमाल किया था। स्वीटलर्ट
कोड

1
<लिंक rel = "स्टाइलशीट" href = " cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1// " "/>
कोड क्रिस


सतर्कता प्राप्त करने के लिए दो सीडीएन से ऊपर
कोड क्रिस

यदि आप पाठ बॉक्स में मूल्य लोड कर सकते हैं तो मैं आपके उत्तर को सही मानूंगा। किसी भी तरह से आपके बहुमूल्य योगदान के लिए धन्यवाद
कोड

3

इसे इस्तेमाल करे। मुझे लगता function(isConfirm)है कि समस्या है।

आपको तब () फ़ंक्शन का उपयोग करने की आवश्यकता है

    swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      showCancelButton: false
    }).then(function (result) {
        $('#hours_work').val(data.value);
        $('#overtime_requset').modal('show'); 
    });

मॉडल भी इस मामले में काम नहीं कर रहा है
कोड

1

प्रपत्र इनपुट फ़ील्ड के लिए आपको val()इसके बजाय उपयोग करने की आवश्यकता है text()

उदाहरण: $('#hours_work').val(data.value);


Btw। क्या आपने अपना कोड चेक किया? आपके द्वारा ऊपर पोस्ट किए गए कोड में एक डबल उद्धरण गायब है (वर्ग के लिए उद्धरण समाप्त), यह आपकी समस्या का कारण हो सकता है। <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
कोडिएक

1

कृपया आप HTML सिंटैक्स की जाँच करें

पुराना

<input type="text" name="hours_work" id="hours_work"  class="form-control value=""/>

नया

<input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>

और एक-एक करके जांच करें

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);

सभी ब्रो की कोशिश कर रहे हैं। यह काम नहीं कर रहा है। मुझे लगता है कि समस्या कुछ और है
कोड क्रिश

सिर्फ $ ('# घंटे_वर्क') लिखें। वैल ('xyz'); कंसोल में और जांचें कि यह काम कर रहा है या त्रुटि देगा।
अरशद शेख

var textbox = document.getElementById ('hours_work') के साथ प्रयास करें; textbox.value = 'xyz';
अरशद शेख

आपका 1 विकल्प भी मूल्य नहीं प्रिंट करता है
कोड क्राइस

हे, कृपया इस जावास्क्रिप्ट को बूटस्ट्रैप मोडल के तहत लिखिए
अरशद शेख

1

यदि आप केवल प्रतिनिधियों का उपयोग करते हैं तो आपकी समस्या का समाधान किया जा सकता है। जैसे कि प्रत्यक्ष उपयोग के बजाय $('#hours_work').val(data.value);किसी भी माता-पिता के प्रतिशोध के साथ प्रयास करें । आपके दस्तावेज़ जैसे शरीर। इसलिए $('#hours_work',$('body')).val(data.value);

आप अपने मॉडल div के किसी भी मूल संदर्भ का उपयोग कर सकते हैं। जिसमें आपका मोडल कोड शरीर के बजाय रखा गया है। इस div के माता पिता।

यह इसलिए है क्योंकि अगर आपके डॉम को आपके मॉडल तत्वों की जानकारी नहीं है, अगर यह गतिशील रूप से भरी हुई है।

मुझे पता है अगर यह काम किया है


1

आप इस समस्या का सामना कर रहे हैं क्योंकि आप किसी फ़ील्ड में मान जोड़ने का प्रयास कर रहे हैं #hours_work, जो अभी तक DOM में प्रदान नहीं किया गया है, जैसा $('#overtime_requset').modal('show');कि मान असाइन करने के बाद प्रदान कर रहा है $('#hours_work').val(data.value);और इनपुट फ़ील्ड मॉडल का एक हिस्सा है, इसलिए आपको बस पहले मॉडल जोड़ने की आवश्यकता है और फिर इनपुट फ़ील्ड पर मान असाइन करें:

setTimeout(function() {
swal({
   title: "OverTime Status!",
   text: "You Need to get Sub OT Approval " + data.value + " Hours to Time 
  allocate in the department",
   type: "warning",
   confirmButtonText: "OK"
 },
 function(isConfirm) {
   if (isConfirm) {

    $('#overtime_requset').modal('show');
    $('#hours_work').val(data.value);
   }
 });
 }, 1);

यह मामला नहीं है, मैं इसे आज़माता हूँ। यह काम नहीं कर रहा है
कोड

बस सुनिश्चित करें कि 'clear_field ()' फ़ंक्शंस इनपुट का क्लियरिंग मान नहीं है, जिसे आपने असाइन किया है।
सर्वेश महाजन

@ nipun258, अगर यह आपकी समस्या को हल करता है, तो सराहना करें कि क्या आप वोट कर सकते हैं और उत्तर को चिह्नित कर सकते हैं, धन्यवाद
सर्वेश महाजन

कोई समस्या अभी भी नहीं है। मैं कहता हूं कि यह स्पष्ट क्षेत्र कार्य करता है
कोड क्रिश

1

मैंने आपकी आवश्यकताओं पर काम किया है और मेरे लिए काम कर रहा है कृपया स्थानीय रूप से कोड से नीचे चलाएं:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
setTimeout(function() {
    var myArray = {id1: 100, id2: 200};

     swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval "+ myArray.id1+ "  Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"

    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(myArray.id1); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');

      }
      else{
          console.log("test");
      }
    });
}, 1);
 </script>


    <div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">


        <div class="modal-header">
          <h4 class="modal-title">Sub OT Request</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>


        <div class="modal-body">
          <div class="form-group">
            <div class="input-daterange">
              <input type="text" name="from_date" id="from_date" class="form-control" value="" readonly />
              <span id="error_from_date" class="text-danger"></span>
              <span id="error_future_from_date" class="text-danger text-center"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="text-info">Tolal Number Of Employee </br>
            <label>Add the addition number of OT hours requried</lable>
            <input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>
            <label class="text-secondary">Approved OT hours :   </br></label><br>
            <label class="text-secondary">Pendding OT hours :</label>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" name="get_approval" id="get_approval" class="btn btn-info btn-sm">Get Approval</button>
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
        </div>

      </div>
    </form>
  </div>
</div>

1
धन्यवाद दीदी। लेकिन मैं पहले से ही मेरी समस्या हल कर चुका हूं
कोड

@CodeKris ओह यह अच्छा है! :)
कृष्णा सवाणी

0

कृपया इस जावास्क्रिप्ट को बूटस्ट्रैप मोडल के नीचे लिखें

<div class="modal" id="overtime_requset">
....
<script>
setTimeout(function () { 
           swal({
             title: "OverTime Status!",
             text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
             type: "warning",
             confirmButtonText: "OK"
            },
         function(isConfirm){
            if (isConfirm) {

               $('#hours_work').text(data.value);//data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
               $('#overtime_requset').modal('show');
               clear_field();
              }
           }); }, 1);
</script>
</div>

0

यदि आपने dataजावास्क्रिप्ट ऑब्जेक्ट और clear_fieldफ़ंक्शन को परिभाषित किया है और, जिसे JQuery और बूटस्ट्रैप लाइब्रेरी कहा जाता है। आपके कोड के साथ कोई समस्या नहीं होगी।

इस JSFiddle पेज की जाँच करें: https://jsfiddle.net/1x6t3ajp

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.