Làm thế nào để tải biến java script vào hộp văn bản mô hình bootstrap làm giá trị

Tôi có một số vấn đề trong việc tải biến javascript vào hộp nhập mô hình 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 cảnh báo giá trị chính xác ở đây. Nhưng giá trị này không tải vào hộp văn bản mô hình bootstrap. Lỗi của tôi là gì? Làm thế nào để tôi sửa nó? (chỉ có vấn đề là vượt qua giá trị JavaScript không tải vào bên trong trường văn bản. Nó có thể in dưới dạng HTML ra thẻ div)

Cập nhật tôi đã sử dụng sau cdn 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" />

mã được đăng của bạn hơi thiếu và có một số lỗi, dù sao tôi đã cố gắng sao chép vấn đề của bạn và tôi nghĩ rằng tôi có thể đã làm cho nó hoạt động. Hãy xem đoạn trích jsfiddle dưới đây và xem liệu bạn có thể thực hiện trong mã của mình để làm cho nó hoạt động không.

KIỂM TRA LIÊN KẾT NÀY ĐẦU TIÊN: https://jsfiddle.net/b1nary/je60gxv8/2/

CẬP NHẬT VỚI SWEETALERT CỦA BẠN: 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 );

Thử cái này. Tôi nghĩ function(isConfirm)là có vấn đề.

Bạn cần sử dụng hàm then ()

    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'); 
    });

Đối với các trường nhập mẫu, bạn cần sử dụng val()thay vì text().

Thí dụ: $('#hours_work').val(data.value);

Vui lòng kiểm tra cú pháp html của bạn

cũ

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

Mới

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

và kiểm tra từng cái một

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

Vấn đề của bạn có thể được giải quyết nếu bạn chỉ cần sử dụng các đại biểu. Thích thay vì sử dụng trực tiếp $('#hours_work').val(data.value); hãy thử với bất kỳ sự điều chỉnh của cha mẹ. tài liệu của bạn như cơ thể. vì thế $('#hours_work',$('body')).val(data.value);

Bạn có thể sử dụng bất kỳ tài liệu tham khảo chính của div phương thức của bạn. trong đó mã phương thức của bạn được đặt thay vì cơ thể. cha mẹ của div này.

Đó là vì dom của bạn không nhận thức được các yếu tố mô hình của bạn nếu nó được tải động.

Hãy cho tôi biết nếu nó hoạt động

Bạn đang phải đối mặt với vấn đề này bởi vì bạn đang cố gắng thêm giá trị vào một trường #hours_workchưa được kết xuất trong DOM, như $('#overtime_requset').modal('show');hiển thị sau khi gán giá trị cho $('#hours_work').val(data.value);và trường nhập là một phần của Mô hình, vì vậy bạn chỉ cần thêm mô hình trước rồi mới thêm gán giá trị cho trường đầu vào:

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);

Tôi đã làm việc theo Yêu cầu của bạn và đang làm việc cho tôi, vui lòng chạy bên dưới mã dưới dạng cục bộ:

  <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>

Vui lòng viết javascript này theo phương thức 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>

Nếu bạn đã xác định datađối tượng JavaScript và clear_fieldhàm và, được gọi là thư viện JQuery và Bootstrap. Sẽ không có vấn đề với mã của bạn.

Kiểm tra trang JSFiddle này: https://jsfiddle.net/1x6t3ajp