jak załadować zmienną skryptową Java do pola tekstowego modelu bootstrap jako wartość

13

Mam problem z ładowaniem zmiennych javascript do pola wprowadzania modelu 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 informuje tutaj o poprawnej wartości. Ale ta wartość nie ładuje się do pola tekstowego modelu bootstrap. Jaki jest mój błąd? Jak to naprawić? (jedynym problemem jest przekazanie wartości JavaScript, która nie ładuje się do pola tekstowego po stronie. Można go wydrukować jako HTML do znacznika div)

Aktualizacja, której użyłem, po aktualizacji CD-ROM SweetAlert

<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" />
Code Kris
źródło
Wypróbuj funkcję
setText
nie działa, stary. Myślę, że problem jest czymś innym
Code Kris
myślę, że nie powiązałeś pliku JS. napisz funkcję alertu i upewnij się, że ją połączyłeś.
Ahamed Safnaj
alert (data.value); pokaż poprawną wartość
Code Kris
1
używam najnowszego cdn 'sweetalert'
Code Kris

Odpowiedzi:

5

twój opublikowany kod jest trochę brakuje i ma pewne błędy, w każdym razie próbowałem odtworzyć problem i myślę, że mogłem go uruchomić. Spójrz na poniższy fragment kodu jsfiddle i sprawdź, czy możesz go zaimplementować w kodzie, aby działał.

SPRAWDŹ PIERWSZE LINK: https://jsfiddle.net/b1nary/je60gxv8/2/

AKTUALIZACJA Z TWOIM 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 );
Galzor
źródło
użyłem słodkiego alertu dla bootstrap.not sweetalert
Code Kris
1
<link rel = "stylesheet" href = " cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1 /..." />
Code Kris
powyżej dwóch cdn za ostrzeżenie
Code Kris
jeśli możesz załadować wartość do pola tekstowego, zaakceptuję twoją odpowiedź jako poprawną. w jakikolwiek sposób bardzo dziękuję za twój cenny wkład
Code Kris
3

Spróbuj tego. Myślę, że function(isConfirm)to problem.

Potrzebujesz funkcji 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'); 
    });
BCM
źródło
model również nie działa w tym przypadku
Code Kris
1

W przypadku pól wprowadzania formularza należy użyć val()zamiast text().

Przykład: $('#hours_work').val(data.value);

CodyKL
źródło
Btw. sprawdziłeś swój kod? W powyższym kodzie brakuje jednego podwójnego cytatu (kończącego cytat dla klasy), może to być przyczyną twojego problemu. <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL,
1

Sprawdź składnię HTML

stary

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

Nowy

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

i sprawdzaj jeden po drugim

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);
Arshad Shaikh
źródło
wszyscy próbują, stary. nie działa. myślę, że problem jest czymś innym
Code Kris,
po prostu napisz $ ('# hours_work'). val ('xyz'); w konsoli i sprawdź, czy działa lub podaj błąd.
Arshad Shaikh
spróbuj z var textbox = document.getElementById ('hours_work'); textbox.value = 'xyz';
Arshad Shaikh
twoja 1 opcja również nie drukuje wartości
Code Kris
hej, proszę napisać ten skrypt javascript pod modalem bootstrap
Arshad Shaikh
1

Twój problem można rozwiązać, jeśli po prostu używasz delegatów. Jak zamiast bezpośredniego użycia, $('#hours_work').val(data.value);wypróbuj dowolne referencje rodziców. Twojego dokumentu, takiego jak treść. więc $('#hours_work',$('body')).val(data.value);

Możesz użyć dowolnego odniesienia nadrzędnego twojego div modalnego. w którym zamiast ciała umieszczany jest kod modalny. div div tego div.

To dlatego, że dom nie jest świadomy elementów modelu, jeśli jest dynamicznie ładowany.

Daj mi znać, jeśli zadziałało

Sunny Danu
źródło
1

Napotykasz ten problem, ponieważ próbujesz dodać wartość do pola #hours_work, które nie zostało jeszcze wyrenderowane w DOM, podobnie jak $('#overtime_requset').modal('show');renderowanie po przypisaniu wartości $('#hours_work').val(data.value);i pole wejściowe jest częścią Modelu, więc po prostu musisz najpierw dodać model, a następnie przypisz wartość do pola wejściowego:

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
źródło
tak nie jest, próbuję. nie działa
Code Kris
Upewnij się tylko, że funkcja „clear_field ()” nie usuwa wartości wejściowej, którą przypisałeś.
Sarvesh Mahajan
@ nipun258, jeśli to rozwiąże twój problem, doceń, czy możesz głosować i zaznaczyć odpowiedź, dziękuję
Sarvesh Mahajan
nadal nie występuje problem. mówię, że funkcja wyczyszczenia pola działa
Code Kris
1

Pracowałem nad Twoimi wymaganiami i pracuję dla mnie, uruchom poniżej kodu jako lokalnie:

  <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
źródło
1
dziękuję siostro. ale już rozwiązałem mój problem
Code Kris,
@CodeKris Oh to miłe! :)
Krishna Savani,
0

Napisz ten skrypt javascript w części modalnej 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
źródło
0

Jeśli zdefiniowałeś dataobiekt JavaScript i clear_fieldfunkcję oraz nazwałeś biblioteki JQuery i Bootstrap. Twój kod nie będzie problemów.

Sprawdź tę stronę JSFiddle: https://jsfiddle.net/1x6t3ajp

yedort
źródło