[javascript] 부트 스트랩 모델 텍스트 상자에 Java 스크립트 변수를 값으로로드하는 방법

부트 스트랩 모델 입력 상자에 자바 스크립트 변수로드에 문제가 있습니다.

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는 여기에 올바른 값을 경고합니다. 그러나이 값은 부트 스트랩 모델 텍스트 상자에로드되지 않습니다. 내 실수는 무엇입니까? 어떻게 고치나요? (문제는 텍스트 필드에 JavaScript 값을로드하지 않는 것입니다. div 태그에 HTML로 인쇄 할 수 있습니다)

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

답변

귀하의 게시 된 코드에 약간의 결함이 있으며 약간의 오류가 있습니다. jsfiddle 스 니펫 아래를 살펴보고 코드로 구현하여 작동하는지 확인하십시오.

이 링크를 먼저 확인 하십시오 : 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 );

답변

이 시도. function(isConfirm)문제 라고 생각 합니다.

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

답변

양식 입력 필드의 경우 val()대신 대신 사용해야 합니다text() .

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

답변

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

답변

단순히 대리인을 사용하면 문제를 해결할 수 있습니다. 직접 사용하는 대신 $('#hours_work').val(data.value);부모의 굴절을 시도하십시오. 본문과 같은 문서의 그래서 $('#hours_work',$('body')).val(data.value);

모달 div의 부모 참조를 사용할 수 있습니다. 본문 대신 모달 코드가 배치됩니다. 이 div의 부모 div

모델 요소가 동적으로로드되면 모델 요소를 인식하지 못하기 때문입니다.

작동하는지 알려주세요

답변

값을 할당 한 후 렌더링 하고 입력 필드가 모델의 일부이므로 #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);

답변

귀하의 요구 사항에 대해 작업했으며 나를 위해 노력하고 있습니다. 아래 코드를 로컬로 실행하십시오.

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