cómo cargar la variable de script java en el cuadro de texto del modelo bootstrap como valor

13

Tengo algún problema en la carga variable de JavaScript en el cuadro de entrada del modelo 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 alerta el valor correcto aquí. Pero este valor no se carga en el cuadro de texto del modelo de rutina de carga. Cual es mi error? ¿Cómo lo soluciono? (El único problema es pasar el valor de JavaScript que no se carga en el campo de texto. Se puede imprimir como HTML en la etiqueta div)

Actualización que utilicé después de 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" />
Code Kris
fuente
Prueba la función setText ()
Ahamed Safnaj
no funciona hermano. Creo que el problema es otra cosa
Código Kris
Creo que no has vinculado el archivo JS. escriba una función de alerta y asegúrese de haberla vinculado ..
Ahamed Safnaj
alerta (valor de datos); mostrar el valor correcto
Código Kris
1
Yo uso el último CDN 'sweetalert'
Código Kris

Respuestas:

5

su código publicado es un poco escaso y tiene algunos errores, de todos modos intenté replicar su problema y creo que es posible que lo haya hecho funcionar. Eche un vistazo al siguiente fragmento de jsfiddle y vea si puede implementarlo en su código para que funcione.

COMPRUEBE ESTE ENLACE PRIMERO: https://jsfiddle.net/b1nary/je60gxv8/2/

ACTUALIZADO CON SU 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
fuente
utilicé la alerta dulce para bootstrap.not sweetalert
Código Kris
1
<link rel = "stylesheet" href = " cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/… " />
Código Kris
por encima de dos cdn para estar alerta
Code Kris
si se puede cargar valor en la caja de texto que voy a aceptar su respuesta como forma correct.any muchas gracias a su valiosa contribución
Código Kris
3

Prueba esto. Creo que function(isConfirm)es un problema.

Necesita usar la función 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
fuente
modelo tampoco funciona en este caso
Código Kris
1

Para los campos de entrada de formulario, debe usar en val()lugar de text().

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

CodyKL
fuente
Por cierto. ¿comprobaste tu código? En el código que publicó anteriormente falta una cita doble (cita final para la clase), esta puede ser la razón de su problema. <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL
1

Por favor revisa tu sintaxis html

antiguo

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

nuevo

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

y consultar con uno por uno

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);
Arshad Shaikh
fuente
todos intentan hermano. no funciona. Creo que el problema es otra cosa
Código Kris
simplemente escriba $ ('# horas_trabajo'). val ('xyz'); en la consola y compruebe que funciona o den error.
Arshad Shaikh
intente con var textbox = document.getElementById ('hours_work'); textbox.value = 'xyz';
Arshad Shaikh
su opción 1 tampoco imprime el valor
Código Kris
oye, por favor escribe este javascript bajo modal de arranque
Arshad Shaikh
1

Su problema puede resolverse si simplemente usa delegados. Como en lugar de uso directo, $('#hours_work').val(data.value);intente con cualquier referencia de los padres. de su documento, como el cuerpo. entonces $('#hours_work',$('body')).val(data.value);

Puede usar cualquier referencia principal de su div modal. en el que se coloca su código modal en lugar del cuerpo. padre div de este div.

Es porque su dom no es consciente de los elementos de su modelo si se carga dinámicamente.

Avísame si ha funcionado

Sunny Danu
fuente
1

Se enfrenta a este problema porque está tratando de agregar valor a un campo #hours_work, que aún no se ha procesado en DOM, como lo $('#overtime_requset').modal('show');es después de asignar el valor $('#hours_work').val(data.value);y el campo de entrada es parte del Modelo, por lo que solo necesita agregar el modelo primero y luego asignar valor al campo de entrada:

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
fuente
no es el caso, lo intento. no funciona
Código Kris
Solo asegúrese de que la función 'clear_field ()' no esté borrando el valor de entrada que ha asignado.
Sarvesh Mahajan
@ nipun258, si resuelve su problema, agradecería que pueda votar y marque la respuesta, gracias
Sarvesh Mahajan
Todavía no se produce ningún problema. Digo que la función de campo claro funciona
Code Kris
1

He trabajado en Tus requisitos y estoy trabajando para mí, ejecuta el siguiente código como localmente:

  <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
fuente
1
gracias hermana. pero ya resolví mi problema
Code Kris
@CodeKris ¡Oh, qué bien! :)
Krishna Savani
0

Por favor, escriba este javascript bajo modal de arranque

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

Si definió el dataobjeto JavaScript y la clear_fieldfunción y, llamó a las bibliotecas JQuery y Bootstrap. No habría problemas con su código.

Consulte esta página de JSFiddle: https://jsfiddle.net/1x6t3ajp

yedort
fuente