Ir para conteúdo

POWERED BY:

henriquers

Inserindo <option></option> através do Ajax

Por , em Javascript

Recommended Posts

henriquers    0

henriquers
Postado

Bom Dia, 

 

Estou com uma dificuldade para conseguir colocar os options de um select dentro do mesmo utilizando Ajax, as informações estão vindo corretas mas na hora de enviar para o HTML que eu acho que estou fazendo alguma coisa errada, estou utilizando o select2 pois tenho necessidade de colocar imagens dentro dos <option> para cada item que trouxer, segue o código utilizado a baixo:

index.php

<html>
<head>
    <title>TESTE</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
    <script language="JavaScript" src="javascript.js"></script> <!-- Arquivo JavaScript --> 
    
    <link rel="stylesheet" href="estilo.css"/> <!-- Arquivo de Estilo CSS -->
</head>
<body>
 
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/>
 
  <select id="testeSelect">
    <span id="respSelect"></span>
  </select>
 
</body>
 
<script>
  carrega_produtos(); 
</script>
 
</html>

javascript.js

function carrega_produtos(){
  var verifica = 'get_produto';
  $('.load').show();
   jQuery.ajax({
       type: 'POST', 
      url: './get_dados.php', 
      data: 'verifica='+ verifica, 
      cache: false, 
      success: function(response){               
          $("#respSelect").html(response);
          $('.load').hide();
      }
   });
}
 
$( document ).ready(function() {
  
  function formatProduto (option) {
    if (!option.id) { 
      return option.text; 
    }
    var ob = '<img src="../../img/oculos_teste.jpg" />' + option.text;
    return ob;
  };
 
  $("#testeSelect").select2({
    placeholder: "Selecione o Produto !",
    width: "20%",
    templateResult: formatProduto
  });
 
});


 

get_dados.php

<?php
    include './conn_orcl.php';
 
    $verifica = $_POST['verifica'];
 
    if($verifica == 'get_produto' ) {
 
        $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO
        FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT'
        ORDER BY DESCRICAO";
 
        $parse=oci_parse($conn,$select);
        oci_execute($parse);
 
        while ($fetch=oci_fetch_array($parse)){
            $cod = $fetch['PRODUTO'];
            $desc = $fetch['DESCRICAO'];
            $option = $option."<option>$cod - $desc</option>";
        }
        echo $option;
    }
    ob_end_flush();
    oci_free_statement($parse);
    oci_close($conn);
?>

 

As informações estão vindo corretas, mas não consigo aparecer no select

 

image.png.c123e5378edfdd27689d58599706822a.png

 

Agradeço quem poder me dar uma luz,

Obrigado.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

o seu problema e que você está querendo colocar options dentro de um "span", 

 

dentro de um select não tem span tem options 

// errado
<select id="testeSelect">
  <span id="respSelect"></span>
</select>

test: 

// não funciona
$('#respSelect').html('<option>1111</option>');

// funciona
$('#testeSelect').html('<option>2222</option>');

JsBin: https://jsbin.com/jozidinime/edit?html,js,console,output

Compartilhar este post

Link para o post
Compartilhar em outros sites

henriquers    0

henriquers
Postado

Bom Dia, 

 

Entendi muito Obrigado, pela ajuda.

 

Consegui fazer com que o option aparecesse dentro do select, mas esta aparecendo apenas o primeiro dado do Select e o restante não, saberia me informar o porque ? 

 

image.png.4770a8ccfff077590b6061441522b124.png

  

$( document ).ready(function() {
  
  $("#testeSelect").select2({
    placeholder: "Selecione o Produto !",
    ajax: {
      type: 'POST', 
      url: './get_dados.php',  
      cache: false, 
      success: function(response){               
          $("#testeSelect").html(response);
      }
    },
    width: "50%"
  });

});

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

henriquers    0

henriquers
Postado

image.png.1059592fc86dc16568253e03d7787d86.png

 

Esses são os dados que estão vindo através do get_dados.php 

<?php
    include './conn_orcl.php';

    $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO
    FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT'
    ORDER BY DESCRICAO";

    $parse=oci_parse($conn,$select);
    oci_execute($parse);

    while ($fetch=oci_fetch_array($parse)){
        $cod = $fetch['PRODUTO'];
        $desc = $fetch['DESCRICAO'];
        $option = $option."<option>$cod - $desc</option>";
    }
    echo $option;

    
    
    
    ob_end_flush();
    oci_free_statement($parse);
    oci_close($conn);
?>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • violin101
      PHP+Codeigniter - Dúvida em Relação a Teclas
      Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      [Resolvido] JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • violin101
      PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto
      Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • violin101
      PHP+Codeigniter - Adicionar Registro Plano de Contas
      Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito