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


13

J'ai un problème de chargement de variable javascript dans la zone de saisie du modèle de 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 alerte la valeur correcte ici. Mais cette valeur ne se charge pas dans la zone de texte du modèle d'amorçage. Quelle est mon erreur? Comment je le répare? (le seul problème est que la valeur JavaScript ne se charge pas dans le champ de texte. Elle peut être imprimée au format HTML dans la balise div)

Mise à jour que j'ai utilisée suite au 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" />

Essayez la fonction setText ()
Ahamed Safnaj

ne fonctionne pas mon frère. Je pense que le problème est autre chose
Code Kris

je pense que vous n'avez pas lié le fichier JS. écrivez une fonction d'alerte et assurez-vous que vous l'avez liée ..
Ahamed Safnaj

alerte (data.value); afficher la valeur correcte
Code Kris

1
j'utilise le dernier cdn 'sweetalert'
Code Kris

Réponses:


5

votre code affiché manque un peu et comporte des erreurs, de toute façon j'ai essayé de reproduire votre problème et je pense que je l'ai peut-être fait fonctionner. Jetez un œil à l'extrait de code jsfiddle ci-dessous et voyez si vous pouvez l'implémenter dans votre code pour le faire fonctionner.

CONSULTEZ CE LIEN D'ABORD: https://jsfiddle.net/b1nary/je60gxv8/2/

MIS À JOUR AVEC VOTRE 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 );

j'ai utilisé sweet alert pour bootstrap.not sweetalert
Code Kris



au-dessus de deux cdn pour être alerté
Code Kris

si vous pouvez charger de la valeur dans la zone de texte, j'accepterai votre réponse comme étant correcte. de toute façon merci beaucoup pour votre précieuse contribution
Code Kris

3

Essaye ça. Je pense que function(isConfirm)c'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'); 
    });

modèle ne fonctionne pas non plus dans ce cas
Code Kris

1

Pour les champs de saisie de formulaire, vous devez utiliser à la val()place de text().

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


Btw. avez-vous vérifié votre code? Dans le code que vous avez affiché ci-dessus, il manque une double citation (fin de la citation pour la classe), cela peut peut-être être la raison de votre problème. <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL

1

Veuillez vérifier votre syntaxe html

vieux

<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érifiez avec un par un

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

tous essaient bro .it ne fonctionne pas. je pense que le problème est autre chose
Code Kris

il suffit d'écrire $ ('# heures_travail'). val ('xyz'); dans la console et vérifiez qu'il fonctionne ou donne une erreur.
Arshad Shaikh

essayez avec var textbox = document.getElementById ('hours_work'); textbox.value = 'xyz';
Arshad Shaikh

votre 1 option n'imprime pas non plus la valeur
Code Kris

hé, veuillez écrire ce javascript sous bootstrap modal
Arshad Shaikh

1

Votre problème peut être résolu si vous utilisez simplement des délégués. Comme au lieu d'une utilisation directe, $('#hours_work').val(data.value);essayez avec n'importe quelle réfraction parentale. 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 division modale. dans lequel votre code modal est placé à la place du corps. parent div de cette div.

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

Faites-moi savoir si cela a fonctionné


1

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, tout comme le $('#overtime_requset').modal('show');rendu après l'attribution de la valeur $('#hours_work').val(data.value);et le champ de saisie fait partie du modèle, il vous suffit donc d'ajouter d'abord le modèle, puis attribuer une valeur au champ de saisie:

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

ce n'est pas le cas, je l'essaye. ça ne fonctionne pas
Code Kris

Assurez-vous simplement que la fonction 'clear_field ()' n'efface pas la valeur d'entrée que vous avez affectée.
Sarvesh Mahajan

@ nipun258, si cela résout votre problème, appréciez si vous pouvez voter et marquer la réponse, merci
Sarvesh Mahajan

aucun problème ne se produit encore. Je dis que la fonction de champ clair fonctionne
Code Kris

1

J'ai travaillé sur vos besoins et travaille pour moi, veuillez exécuter le code ci-dessous comme localement:

  <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
merci soeur .mais j'ai déjà résolu mon problème
Code Kris

@CodeKris Oh c'est bien! :)
Krishna Savani

0

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>

0

Si vous avez défini l' dataobjet JavaScript et la clear_fieldfonction 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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.