So laden Sie eine Java-Skriptvariable als Wert in das Textfeld des Bootstrap-Modells

13

Ich habe ein Problem beim Laden der Javascript-Variablen in das Eingabefeld des Bootstrap-Modells:

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 alarmiert hier den korrekten Wert. Dieser Wert wird jedoch nicht in das Textfeld des Bootstrap-Modells geladen. Was ist mein Fehler? Wie behebe ich das? (Das einzige Problem ist, dass der JavaScript-Wert nicht in das Textfeld in der Innenseite geladen wird. Er kann als HTML-Code in das div-Tag gedruckt werden.)

Update habe ich nach cdn sweetAlert Boostrap verwendet

<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
quelle
Versuchen Sie setText () Funktion
Ahamed Safnaj
Ich denke, das Problem ist etwas anderes
Code Kris
Ich denke, Sie haben die JS-Datei nicht verlinkt. Schreiben Sie eine
Warnfunktion
alert (data.value);
Code Kris
1
Ich benutze die neueste CD 'Sweetalert'
Code Kris

Antworten:

5

Ihr geposteter Code fehlt etwas und weist einige Fehler auf. Trotzdem habe ich versucht, Ihr Problem zu replizieren, und ich glaube, ich habe ihn möglicherweise zum Laufen gebracht. Schauen Sie sich das folgende jsfiddle-Snippet an und sehen Sie, ob Sie es in Ihren Code implementieren können, damit es funktioniert.

Überprüfen Sie diesen Link zuerst: https://jsfiddle.net/b1nary/je60gxv8/2/

AKTUALISIERT MIT IHREM 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
quelle
Ich habe Sweet Alert für Bootstrap.not Sweetalert verwendet
Code Kris
über zwei CDN für Alarm
Code Kris
Wenn Sie Wert in Textfeld laden können, werde ich Ihre Antwort als richtig akzeptieren. Auf jeden Fall vielen Dank für Ihren wertvollen Beitrag
Code Kris
3

Versuche dies. Ich denke function(isConfirm)ist das Problem.

Sie müssen dann die Funktion () verwenden

    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
quelle
Modell funktioniert auch in diesem Fall nicht
Code Kris
1

Für Formulareingabefelder müssen Sie val()anstelle von verwenden text().

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

CodyKL
quelle
Übrigens. Hast du deinen Code überprüft? In dem Code, den Sie oben gepostet haben, fehlt ein doppeltes Anführungszeichen (Endzitat für die Klasse). Dies kann möglicherweise der Grund für Ihr Problem sein. <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL
1

Bitte überprüfen Sie Ihre HTML-Syntax

alt

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

Neu

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

und überprüfen Sie mit einem nach dem anderen

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);
Arshad Shaikh
quelle
Alle versuchen es, Bruder. Es funktioniert nicht. Ich denke, das Problem ist etwas anderes
Code Kris
schreibe einfach $ ('# Stunden_arbeit'). val ('xyz'); in der Konsole und überprüfen Sie, ob es funktioniert oder geben Sie einen Fehler.
Arshad Shaikh
versuchen Sie es mit var textbox = document.getElementById ('Stunden_arbeit'); textbox.value = 'xyz';
Arshad Shaikh
Ihre 1 Option drucken auch nicht den Wert
Code Kris
Hey, bitte schreiben Sie dieses Javascript unter Bootstrap Modal
Arshad Shaikh
1

Ihr Problem kann gelöst werden, wenn Sie einfach Delegaten verwenden. $('#hours_work').val(data.value);Versuchen Sie es lieber, anstatt es direkt zu verwenden . Ihres Dokuments wie Körper. damit $('#hours_work',$('body')).val(data.value);

Sie können eine beliebige übergeordnete Referenz Ihres Modal Div verwenden. in dem Ihr Modalcode anstelle des Körpers platziert ist. Eltern Div dieses Div.

Dies liegt daran, dass Ihr Dom Ihre Modellelemente nicht kennt, wenn sie dynamisch geladen werden.

Lassen Sie mich wissen, ob es funktioniert hat

Sunny Danu
quelle
1

Sie sind mit diesem Problem konfrontiert, weil Sie versuchen, einem Feld #hours_work, das noch nicht in DOM gerendert wurde , einen Wert hinzuzufügen , da $('#overtime_requset').modal('show');das Rendern nach dem Zuweisen von Wert zu einem $('#hours_work').val(data.value);Eingabefeld Teil von Model ist. Sie müssen also erst das Modell hinzufügen und dann Geben Sie dem Eingabefeld einen Wert ein:

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
quelle
es ist nicht der Fall, ich versuche es. es funktioniert nicht
Code Kris
Stellen Sie einfach sicher, dass die Funktion 'clear_field ()' den von Ihnen zugewiesenen Eingabewert nicht löscht.
Sarvesh Mahajan
@ nipun258, wenn es Ihr Problem löst, schätzen Sie, ob Sie abstimmen und die Antwort markieren können, danke
Sarvesh Mahajan
Es tritt immer noch kein Problem auf. Ich sage, die Funktion für klare Felder funktioniert
Code Kris
1

Ich habe an Ihren Anforderungen gearbeitet und arbeite für mich. Bitte führen Sie den folgenden Code wie lokal aus:

  <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
quelle
1
Danke Schwester. Aber ich habe mein Problem bereits gelöst
Code Kris
@ CodeKris Oh das ist schön! :) :)
Krishna Savani
0

Bitte schreiben Sie dieses Javascript unter 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>
Arshad Shaikh
quelle
0

Wenn Sie das dataJavaScript-Objekt und die clear_fieldFunktion definiert haben und die JQuery- und Bootstrap-Bibliotheken aufgerufen haben. Es würde keine Probleme mit Ihrem Code geben.

Überprüfen Sie diese JSFiddle-Seite: https://jsfiddle.net/1x6t3ajp

yedort
quelle