comment charger une variable de script java dans la zone de texte du modèle bootstrap en tant que valeur

Essayez ceci. Je pense que function(isConfirm) est un problème.

Vous devez utiliser la fonction 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'); 
    });

Pour les champs de saisie de formulaire, vous devez utiliser val() au lieu de text().

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

Veuillez vérifier votre syntaxe html

Ancien

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

Nouveau

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

Et vérifier un par un

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

Votre problème peut être résolu si vous utilisez simplement des délégués. Comme au lieu d'utiliser directement $('#hours_work').val(data.value); essayez avec n'importe quelle refrence parent . de votre document tel que le corps. donc $('#hours_work',$('body')).val(data.value);

Vous pouvez utiliser n'importe quelle référence parent de votre div modal. dans lequel votre code modal est placé à la place du corps. div parent de cette div .

C'est parce que votre dom n'est pas conscient des éléments de votre modèle s'il est chargé dynamiquement.

Faites-moi savoir si cela a fonctionné

Vous êtes confronté à ce problème car vous essayez d'ajouter de la valeur à un champ #hours_work, qui n'a pas encore été rendu dans DOM, car {[2] } est rendu après avoir affecté la valeur à {[3] } et le champ de saisie fait partie du modèle, il vous suffit donc d'ajouter le modèle d'abord, puis d'affecter]}

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

J'ai travaillé sur Vos besoins et travaille pour moi, veuillez exécuter le code ci-dessous en local:

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

Veuillez écrire ce javascript sous bootstrap modal

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

Si vous avez défini l'objet JavaScript data et la fonction clear_field et, appelé les bibliothèques jQuery et Bootstrap. Il n'y aurait aucun problème avec votre code.

Consultez cette page JSFiddle: https://jsfiddle.net/1x6t3ajp