cara memuat variabel skrip java ke dalam kotak teks model bootstrap sebagai nilai

13

Saya memiliki beberapa masalah dalam pemuatan variabel javascript ke kotak input model bootstrap:

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 memberitahukan nilai yang benar di sini. Tetapi nilai ini tidak dimuat ke kotak teks model bootstrap. Apa kesalahan saya? Bagaimana saya memperbaikinya? (satu-satunya masalah adalah lulus nilai JavaScript tidak dimuat ke dalam bidang teks sisi. Ini dapat mencetak sebagai HTML ke tag div)

Pembaruan yang saya gunakan berikut cdrap sweetAlert boostrap

<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" />
Kode Kris
sumber
Coba fungsi setText ()
Ahamed Safnaj
tidak bekerja. Saya pikir masalah adalah sesuatu yang lain
Kode Kris
saya pikir Anda belum menautkan file JS. tulis fungsi peringatan dan pastikan Anda telah menautkannya ..
Ahamed Safnaj
alert (data.value); menunjukkan nilai yang benar
Kode Kris
1
saya menggunakan cdn 'sweetalert' terbaru
Code Kris

Jawaban:

5

kode yang Anda posting agak kurang dan memiliki beberapa kesalahan, lagipula saya mencoba mereplikasi masalah Anda dan saya pikir saya mungkin membuatnya berfungsi. Lihatlah potongan jsfiddle di bawah ini dan lihat apakah Anda dapat mengimplementasikan kode Anda untuk membuatnya bekerja.

PERIKSA LINK INI: PERTAMA: https://jsfiddle.net/b1nary/je60gxv8/2/

DIPERBARUI DENGAN SWEETALERT ANDA: 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 );
Galzor
sumber
saya menggunakan peringatan manis untuk bootstrap.not sweetalert
Code Kris
1
<link rel = "stylesheet" href = " cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/… " />
Code Kris
di atas dua cdn untuk mendapat peringatan
Kode Kris
jika Anda dapat memuat nilai ke dalam kotak teks saya akan menerima jawaban Anda sebagai benar. cara terima kasih banyak kontribusi berharga Anda
Kode Kris
3

Coba ini. Saya pikir function(isConfirm)itu masalah.

Anda perlu menggunakan fungsi ()

    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'); 
    });
BCM
sumber
Model juga tidak berfungsi dalam hal ini
Kode Kris
1

Untuk kolom input formulir, Anda harus menggunakan val()sebagai ganti text().

Contoh: $('#hours_work').val(data.value);

CodyKL
sumber
Btw. apakah Anda memeriksa kode Anda? Dalam kode yang Anda posting di atas adalah salah satu kutipan ganda hilang (mengakhiri kutipan untuk kelas), ini mungkin bisa menjadi alasan untuk masalah Anda. <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL
1

Silakan periksa sintaks html Anda

tua

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

baru

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

dan periksa satu per satu

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);
Arshad Shaikh
sumber
semua mencoba bro. itu tidak berfungsi. saya pikir masalahnya adalah sesuatu yang lain
Kode Kris
cukup tulis $ ('# hours_work'). val ('xyz'); di konsol dan periksa apakah berfungsi atau ada kesalahan.
Arshad Shaikh
coba dengan var textbox = document.getElementById ('hours_work'); textbox.value = 'xyz';
Arshad Shaikh
1 pilihan Anda juga tidak mencetak nilai
Kode Kris
hei, tolong tulis javascript ini di bawah modal bootstrap
Arshad Shaikh
1

Masalah Anda dapat diatasi jika Anda hanya menggunakan delegasi. Seperti alih-alih penggunaan langsung $('#hours_work').val(data.value);coba dengan referensi orangtua. dokumen Anda seperti badan. begitu $('#hours_work',$('body')).val(data.value);

Anda dapat menggunakan referensi orang tua dari modal div Anda. di mana kode modal Anda ditempatkan alih-alih badan. div induk dari div ini.

Itu karena dom Anda tidak mengetahui elemen model Anda jika itu dimuat secara dinamis.

Beritahu saya jika berhasil

Sunny Danu
sumber
1

Anda menghadapi masalah ini karena Anda mencoba untuk menambahkan nilai ke bidang #hours_work, yang belum dirender dalam DOM, seperti $('#overtime_requset').modal('show');rendering setelah menetapkan nilai $('#hours_work').val(data.value);dan bidang input adalah bagian dari Model, jadi Anda hanya perlu menambahkan model terlebih dahulu lalu menetapkan nilai ke bidang input:

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);
Sarvesh Mahajan
sumber
bukan itu masalahnya, saya coba. tidak berfungsi
Code Kris
Pastikan funtion 'clear_field ()' tidak menghapus nilai input, yang telah Anda tetapkan.
Sarvesh Mahajan
@ nipun258, jika itu menyelesaikan masalah Anda, hargai jika Anda dapat memilih dan menandai jawabannya, terima kasih
Sarvesh Mahajan
tidak ada masalah yang masih terjadi. Saya katakan fungsi bidang yang jelas itu berfungsi
Kode Kris
1

Saya telah mengerjakan Persyaratan Anda dan bekerja untuk saya, silakan jalankan kode di bawah ini secara lokal:

  <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>
Krishna Savani
sumber
1
terima kasih saudari .tapi saya sudah menyelesaikan masalah saya
Code Kris
@ CodeKris Oh itu bagus! :)
Krishna Savani
0

Silakan tulis javascript ini di bawah modal bootstrap

<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>
Arshad Shaikh
sumber
0

Jika Anda mendefinisikan data objek JavaScript dan clear_fieldfungsinya, disebut pustaka JQuery dan Bootstrap. Tidak akan ada masalah dengan kode Anda.

Periksa halaman JSFiddle ini: https://jsfiddle.net/1x6t3ajp

Yedort
sumber