como carregar a variável de script java na caixa de texto do modelo de auto-inicialização como valor


13

Eu tenho algum problema no carregamento variável de javascript na caixa de entrada do modelo de auto-inicialização:

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 o valor correto aqui. Mas esse valor não é carregado na caixa de texto do modelo de auto-inicialização. Qual é o meu erro? Como faço para corrigir isso? (o único problema é passar o valor do JavaScript não carregar no lado de dentro do campo de texto. Ele pode imprimir como HTML na tag div)

Atualização que usei após o 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" />

Tente função
setText

Não bro trabalho .penso problema é outra coisa
Código Kris

Eu acho que você não vinculou o arquivo JS. escrever uma função de alerta e certifique-se ligaram-lo ..
Ahamed Safnaj

alerta (data.value); mostre o valor correto
Código Kris

11
Eu uso o CDN mais recente 'sweetalert'
Código Kris

Respostas:


5

seu código postado está faltando um pouco e tem alguns erros. Enfim, tentei replicar seu problema e acho que posso ter conseguido fazê-lo funcionar. Dê uma olhada no snippet jsfiddle abaixo e veja se você pode implementar em seu código para fazê-lo funcionar.

Confira este link primeiro: https://jsfiddle.net/b1nary/je60gxv8/2/

ATUALIZADO COM O SEU 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 );

i usado alerta doce para sweetalert bootstrap.not
Código Kris



acima de dois CDN para obter alerta
Código Kris

Se você pode carregar valor na caixa de texto, aceitarei sua resposta como correta. de qualquer maneira, muito obrigado por sua valiosa contribuição
Código Kris

3

Tente isso. Eu acho que function(isConfirm)é problema.

Você precisa usar a função 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'); 
    });

modelo também não está funcionando neste caso
Código Kris

1

Para campos de entrada de formulário, você precisa usar em val()vez de text().

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


Btw. você checou seu código? No código que você postou acima, falta uma citação dupla (citação final para a classe), talvez esse seja o motivo do seu problema. <input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
CodyKL

1

Verifique sua sintaxe html

velho

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

Novo

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

e verifique com um por um

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

todos são tentativa bro não .it trabalha .i pensar problema é outra coisa
Código Kris

basta escrever $ ('# hours_work'). val ('xyz'); no console e verifique se está funcionando ou dê erro.
Arshad Shaikh

tente com var textbox = document.getElementById ('hours_work'); textbox.value = 'xyz';
Arshad Shaikh

sua opção 1 também não imprimir o valor
Código Kris

ei, por favor escreva este javascript no modal de bootstrap
Arshad Shaikh

1

Seu problema pode ser resolvido se você simplesmente usar delegados. Como em vez de uso direto, $('#hours_work').val(data.value);tente com qualquer referência pai. do seu documento como corpo. tão $('#hours_work',$('body')).val(data.value);

Você pode usar qualquer referência pai de sua div modal. em que seu código modal é colocado em vez do corpo. div principal desta div.

É porque seu dom não está ciente dos elementos do seu modelo se estiver carregado dinamicamente.

Deixe-me saber se funcionou


1

Você está enfrentando esse problema porque está tentando agregar valor a um campo #hours_workque ainda não foi renderizado no DOM, como $('#overtime_requset').modal('show');é renderizado após a atribuição de valor $('#hours_work').val(data.value);e o campo de entrada fazer parte do Model, portanto, basta adicionar o modelo primeiro e depois atribua valor ao 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);

que não é o caso, eu tento não .it trabalha
Código Kris

Apenas certifique-se de que a função 'clear_field ()' não esteja limpando o valor da entrada que você atribuiu.
Sarvesh Mahajan 4/12/19

@ nipun258, se ele resolve o seu problema, apreciar se você pode votar e marcar a resposta, graças
Sarvesh Mahajan

nenhum problema ainda está ocorrem .i dizem função de campo claro que trabalhar
Código Kris

1

Eu trabalhei nos Seus Requisitos e está trabalhando para mim, execute o código abaixo 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>

11
obrigado irmã .mas eu já resolveu o meu problema
Código Kris

@CodeKris Oh, isso é legal! :)
Krishna Savani

0

Por favor, escreva este javascript em modal de inicialização

<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

Se você definiu o dataobjeto JavaScript e a clear_fieldfunção e chamou as bibliotecas JQuery e Bootstrap. Não haveria problemas com seu código.

Verifique esta página do JSFiddle: https://jsfiddle.net/1x6t3ajp

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.