Jump to content
ment0r

Atualizar input ao escolher opção de um <select>

Recommended Posts

Olá amigos.

Mais uma problema que precisa ser resolvido... Bom, dessa vez é o seguinte: tenho um <select> que traz de uma tabela PRODUTO (id, nome, unidade, preco) o nome. Preciso que ao escolher um produto, seja preenchido automaticamente um <input> com o preço referente à esse produto.

 

Alguém pode me ajudar de uma forma mais simples possível?

 

Já adianto os agradecimento àqueles que postarem vídeo aulas sobre javascript e/ou ajax, mas como se trata de uma parte do sistema, preciso resolver com urgência pra não ficar 'empacado' na mesma, portanto um exemplo prático é o que peço no momento.

 

Muito obrigado desde já a todos. Um grade abraço.

 

 

img.png

Share this post


Link to post
Share on other sites

Utilizei a própria função Javascript que desenvolvi somente para execução de ajax.

O link para obter os arquivos estão aqui: https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest

 

Então, meu exemplo aqui vai ser genérico, mas não diferencia em nada para qualquer estrutura, pois vamos nos orientar por elementos identificadores. Que é o select e os inputs que vão receber os dados.

Primeiro o html base com os scripts:

Spoiler

<link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
<script src="AjaxRequest.js" type="text/javascript"></script>

<select id="seletor">
    <option value="consulta1">Maçã</option>
    <option value="consulta2">Laranja</option>
    <option value="consulta3">Banana</option>
</select>

<input type="text" id="informacao1"/>
<input type="text" id="informacao2"/>

<div id="local_do_ajax"></div>

<script>
    var ajax = new AjaxRequest();
    document.getElementById('seletor').addEventListener('change', executaAjax, false);

    function executaAjax(e) {
        var valor = e.target.value;
        if (valor) {
            ajax.pop('local_do_ajax', 'arquivo_php.php?parametro=' + valor, false);
        }
    }
</script>

 

 

Simples não é?

Inclusão do css e o js usado pelo ajaxrequest

Criamos o grupo seletor "select" e suas opções que são o valor que eu devo passar para o próximo arquivo.

Então os dois input's que serão preenchidos com o valor logo após o ajax.

Entra o elemento #id onde o arquivo será aberto pelo ajax (É importante que ele fique abaixo dos inputs!)

Então no script primeiramente instanciamos a classe js AjaxRequest criando seu objeto que chamei de ajax mesmo.

Pego o elemento #ID do seletor e adiciono o evento a ele que vai disparar toda vez que ele for alterado chamando uma função que é responsável por obter o valor e executar o método do ajax.

Spoiler

* A classe AjaxRequest possui alguns métodos, o método pop é um método que executa ajax via GET. Possui uma animação de progresso no canto inferior esquerdo da página, desde que você tenha incluído o arquivo css.

Caso não queira essa animação de progresso use o método open

 

No caso: "lembre-se que o objeto será o nome que você der na instância da classe"

ajax.open('DIV_ID_ONDE_CARREGAR', 'CAMINHO_OU_URL_DO_ARQUIVO');

 

Agora é só irmos ao arquivo php que recebe os dados e usar o php para filtrar o valor recebido, então usar o javascript para preencher os inputs

Spoiler

<?php
if (isset($_GET['parametro']) && !empty($_GET['parametro'])) {
    $valor = filter_input(INPUT_GET, 'parametro', FILTER_DEFAULT);
    if (preg_match('/^([a-zA-Z0-9]+)$/i', $valor)) {
        switch ($valor) {
            case 'consulta1':
                $quantidade = 10;
                $valor = 111;
                break;
            case 'consulta2':
                $quantidade = 20;
                $valor = 222;
                break;
            case 'consulta3':
                $quantidade = 30;
                $valor = 333;
                break;
        }
        ?>
        <script>
            document.getElementById('informacao1').value = '<?= $quantidade ?>';
            document.getElementById('informacao2').value = '<?= $valor ?>';
        </script>
        <?php

    }
}

 

 

Obs.: O ideal acredito para você é que os inputs sejam ocultos (type="hidden") e que você tenha um div ou span que servirá como um input fake para que algum usuário não o altere.

De qualquer forma terá que tratar os dados quando submeter um suposto form, porque mesmo oculto ou desabilitados os inputs podem ser manipulados pelo inspetor do navegador.

Share this post


Link to post
Share on other sites

Muuuito obrigado Omar pela ajuda.

 

Vou ler atentamente seu conteúdo e vou adaptar para meu sistema. Assim que eu conseguir posto aqui e se caso enroscar rsrs, peço ajuda novamente.

 

Citar

Obs.: O ideal acredito para você é que os inputs sejam ocultos (type="hidden") e que você tenha um div ou span que servirá como um input fake para que algum usuário não o altere.

Na verdade ele poderá alterar sim, pq o valor é pego do cadastro do produto, mas no momento do pedido, pode ser que ele esteja com valor diferente.

 

Mais uma vez, MUITO OBRIGADO.

Share this post


Link to post
Share on other sites

Caro Omar~

 

A parte de pedido do meu sistema será da seguinte forma:

 

2ns10mx.png

 

Cada vez que clico no + acrescenta mais um item do pedido e no - elimina esse item. Desse modo, uso um vetor, ou seja, o name="valor-unitario[]" pra poder armazenar todos os itens do pedido e no final, tratá-los. Minha pergunta é, com esse seu exemplo daria pra fazer assim?

 

Adaptei seu código, mas não estou conseguindo...

 

/*
* Teste.php
*/

<link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
<script src="AjaxRequest.js" type="text/javascript"></script>

<!-- <select id="seletor">
    <option value="consulta1">Maçã</option>
    <option value="consulta2">Laranja</option>
    <option value="consulta3">Banana</option>
</select> -->

<select id="id_produto[]" name="id_produto" class="form-control">
    <option value="" selected="selected">Escolha um produto</option>
    <?php

    require'../inc/conn.php';

    $select = "select * from PRODUTO";
    $query = ibase_query($select);

    while ($array = ibase_fetch_object($query)) {
        echo '
        <option value="'.trim($array->ID).'" >'.utf8_decode(trim($array->NOME)).'</option>
        ';
    }

    ?>
</select>

<input id="valor-unitario" name="valor-unitario[]" type="text" class="form-control" placeholder="Valor unitário">


<!-- <input type="text" id="informacao1"/>
<input type="text" id="informacao2"/> -->

<div id="local_do_ajax">1</div>

<script>
    var ajax = new AjaxRequest();
    document.getElementById('seletor').addEventListener('change', executaAjax, false);

    function executaAjax(e) {
        var valor = e.target.value;
        if (valor) {
            ajax.pop('local_do_ajax', 'arquivo_php.php?parametro=' + valor, false);
        }
    }
</script>

E

 

/*
* Arquivo_php.php - a principio não mudei os nomes
*/

<?php
require'../inc/conn.php';

        echo'
        <script language="javascript">
            alert ("Chegou aqui");
        </script>
        ';

$_GET['parametro'] = 1;

if (isset($_GET['parametro']) && !empty($_GET['parametro'])) {

    /*$valor = filter_input(INPUT_GET, 'parametro', FILTER_DEFAULT);*/

    $select = "select * from PRODUTO where id = ".$_GET['parametro'];
    $query  = ibase_query($conn, $select);
    $info = ibase_fetch_object($query);


        ?>
        <script>
            document.getElementById('valor-unitario').value = '<?= $info->PRECO ?>';
        </script>

}

Coloquei o GET recebendo 1 só pra testar, mas mesmo assim não deu. Criei uma pasta e colei todos os arquivos lá. Não consigo achar onde estou errando. Se puder abusar de sua boa vontade... eu agradeço.

 

Muito obrigado desde já.

11.png

Share this post


Link to post
Share on other sites

Sim dar para fazer, deixando de se orientar pelo elemento ID e usando a class do(s) seletor(es). Já que só podemos repetir nome de ID's em uma página (mesmo executando ajax).

 

O problema é em obter os inputs que vão ser preenchidos pós o ajax. Como informar quais são para o javascript?

Simples, usando conceito de herança Node, mas para isso eu precisaria do html completo. Como eu não tenho essa informação e mesmo com todo html, um exemplo simples fica difícil de apresentar, além do mais percebi o uso do BS coisa que eu nem meto a mão para mexer.

Optei por usar um "DATA-ATTRIBUTE" que lista qual o índice do NodeList que devemos atacar, já que vamos usar class ao invés de ID.

Bastando informar esse índice na url para o arquivo.

 

O negócio fica mais complicado pelo fato que cada seletor é criado de forma dinâmica através de um botão assim como percebi pela imagem.

Então para que isso funcione a função que cria o input terá que ser responsável por enumerar o valor para usar-mos.

(Você pode usar um variável global para isso e a cada adesão a variável se incrementa, e a cada retirada de elemento ela se decrementa. O importante que o primeiro elemento seja sempre 0 "zero")

Não sei ao exato de vai dar certo, "na teoria dar" pois como disse para ser preciso só com o html renderizado para orientar o javascript usando o "nextElementSibling" para chegar ao input sem chance de erro.

 

Também temos que modificar como a função será ativada, uma vez que não podemos buscar por um elemento e adicionar evento a ele, se depois do script carregado tem a opção de adicionar mais elementos. (A não ser que reescrevemos a variável que guarda essa informação).

Nesse caso optei por disparar a função diretamente em cada seletor através do onchange. Assim sendo quando criar o layout do input adicione os requezitos necessários.

 

Segue o código:

Spoiler

<link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
<script src="AjaxRequest.js" type="text/javascript"></script>

<form id="submit_com_ajax" onsubmit="return ajax.form(this.id, 'local_do_ajax', 'recebe_post.php');">

    <div>
        <!-- Seletor A -->
        <select name="seletor[]" data-idx="0" onchange="executaAjax(this);">
            <option value="nao_ativa_nada">Selecione uma opção</option>
            <option value="consulta1">Maçã</option>
            <option value="consulta2">Laranja</option>
            <option value="consulta3">Banana</option>
        </select>
        <input name="input_do_seletor[]" type="text" class="informacao1"/>
        <input name="input_do_seletor[]" type="text" class="informacao2"/>
    </div>

    <div>
        <!-- Seletor B -->
        <select name="seletor[]" data-idx="1" onchange="executaAjax(this);">
            <option value="nao_ativa_nada">Selecione uma opção</option>
            <option value="consulta1">Maçã</option>
            <option value="consulta2">Laranja</option>
            <option value="consulta3">Banana</option>
        </select>
        <input name="input_do_seletor[]" type="text" class="informacao1"/>
        <input name="input_do_seletor[]" type="text" class="informacao2"/>
    </div>

    <div>
        <!-- Seletor C -->
        <select name="seletor[]" data-idx="2" onchange="executaAjax(this);">
            <option value="nao_ativa_nada">Selecione uma opção</option>
            <option value="consulta1">Maçã</option>
            <option value="consulta2">Laranja</option>
            <option value="consulta3">Banana</option>
        </select>
        <input name="input_do_seletor[]" type="text" class="informacao1"/>
        <input name="input_do_seletor[]" type="text" class="informacao2"/>
    </div>


    <button>Submeter dados do formulário</button>
</form>

<div id="local_do_ajax"></div>

<script>
    var ajax = new AjaxRequest();

    function executaAjax(seletor) {
        var indexAlvo = seletor.dataset.idx;  // Armazendo o valor "data-idx" do alvo
        var valorInput = seletor.value; // Armazeno o "value" do alvo

        /*
         * Somente prossegue com a função se houver o data idx e se o value seja algum valor permitido
         */
        if (indexAlvo && valorInput !== 'nao_ativa_nada') {
            ajax.pop('local_do_ajax', 'arquivo_php.php?valor_do_input=' + valorInput + '&index_do_elemento=' + indexAlvo, false);
        }
    }
</script>

 

 

O php um pouco modificado pois agora tem uma nova informação e não usa mais um elemento ID e sim o class para achar os inputs

Spoiler

<?php
$input = filter_input(INPUT_GET, 'valor_do_input', FILTER_DEFAULT);
$index = (int) $_GET['index_do_elemento']; // Valor obtido pelo "data-idx" de cada seletor
if (preg_match('/^([a-zA-Z0-9]+)$/i', $input)) {
    switch ($input) {
        case 'consulta1':
            $quantidade = 10;
            $valor = 111;
            break;
        case 'consulta2':
            $quantidade = 20;
            $valor = 222;
            break;
        case 'consulta3':
            $quantidade = 30;
            $valor = 333;
            break;
    }
    ?>
    <script>
        /*
         * Como o conceito de arquitetura do html é o select e logo então os inputs
         * cada elemento class possui o mesmo index Node que o seletor.
         * exemplo se fosse o seletor de numero 9 o php reenderizaria assim aqui
         * 
         * getElementsByClassName('informacao1')[<?= $index ?>]
         * getElementsByClassName('informacao1')[9]
         */
        document.getElementsByClassName('informacao1')[<?= $index ?>].value = '<?= $valor ?>';
        document.getElementsByClassName('informacao2')[<?= $index ?>].value = '<?= $quantidade ?>';
    </script>
    <?php
}

 

 

No caso eu usei 3 selects que seria a simulação de novos seletores criados.

 

Tomei também a ousadia de salvar o form usando também a classe AjaxRequest, esse foi o resultado dos dados enviados:

Spoiler

O arquivo que recebeu o post


<?php
echo ("<pre>");
var_dump($_POST);
echo ("</pre>");

 

E o resultado:


array(3) {
  ["form_id"]=>
  string(15) "submit_com_ajax"
  ["seletor"]=>
  array(3) {
    [0]=>
    string(9) "consulta2"
    [1]=>
    string(9) "consulta1"
    [2]=>
    string(9) "consulta3"
  }
  ["input_do_seletor"]=>
  array(6) {
    [0]=>
    string(3) "222"
    [1]=>
    string(2) "20"
    [2]=>
    string(3) "111"
    [3]=>
    string(2) "10"
    [4]=>
    string(3) "333"
    [5]=>
    string(2) "30"
  }
}

 

 

Share this post


Link to post
Share on other sites

Omar~, te mandei uma MP, por favor, de uma olhada. Ademais, vou tentar adaptar o código ao meu sistema e posto o resultado assim que o fizer.

 

Muito obrigado.

Share this post


Link to post
Share on other sites

Boa tarde amigos.

 

Depois de muito bater cabeça, quase consegui fazer o que eu queria, exceto por uma coisa. Consigo fazer o valor aparecer num select, mas não num input.

 

Vejam os códigos (páginas de exemplo somente, dps mudo pra página definitiva)

 

Nesse página index.php eu tenho a lista de produtos, exibidos via select.

 

index.php

<label>Valor</label>
<!-- ONDE APARECE ATUALMENTE -->
  <select name="valor" id="valor">
    <option value="">Selecione</option>
    <option value="Todos">Todos</option>
  </select>

<select name="produto[]" id="produto" class="form-control">
  <option value="" selected="selected">Escolha um produto</option>
  <?php

  $select = "select * from PRODUTO";
  $query = ibase_query($select);

  while ($array = ibase_fetch_object($query)) {
    echo '
    <option value="'.trim($array->NOME).'" >'.utf8_decode(trim($array->NOME)).'</option>
    ';
  }

  ?>
</select>
<!-- ONDE EU GOSTARIA QUE APARECESSE -->
<input name="valor-unitario[]" id="valor-unitario" type="text" class="form-control" placeholder="Valor unitário">

Nesse script, a mágica é feita, ele envia os valores pra getValor.php, lá é retornado os preços e então deveria aparecer no input do código acima, mas só consigo fazer aparecer no <option>

 

$(document).ready(function(){
   $("#produto").change(function(){
      $.ajax({
         type: "POST",
         url: "getValor.php",
         data: {produto: $("#produto").val()},
         dataType: "json",
         success: function(json){
            var options = "";
            $.each(json, function(key, value){
               options += '<option value="' + key + '">' + value + '</option>';
            });
            $("#valor").html(options);
         }
      });
   });
});

Já adianto que mudei #valor pra #valor-unitario e

options += '<option value="' + key + '">' + value + '</option>';

para

options += '<input type="text" name="valor-unitario" value="' + key + '">'; tanto com key, quanto com value

 

Acredito que agora seja só um detalhe pra finalizar essa zebra.

 

Código do getValor.php, pra quem precisar

 

<?php
include"../inc/conn.php";

$retorno = array();

$selectValor = "select * from PRODUTO where nome = '".$_POST['produto']."'";
$query = ibase_query($selectValor);

while ($array = ibase_fetch_object($query)) {
   $retorno[trim($array->ID)] = trim($array->PRECO);
}

echo json_encode($retorno);
?>

Conto com vocês amigos. Desde já, muito obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.