Jump to content
henriquers

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

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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%"
  });

});

 

 

Share this post


Link to post
Share on other sites

Faz o seguinte da um console.log(response), pra saber como o dado está vindo do script php! ai você coloca um exemplo do objeto retornado! Ai fica mais fácil analisar!

Share this post


Link to post
Share on other sites

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);
?>

 

 

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 Adriano Costa
      Fala galera!!!
      Eu sou novo na programação e estou precisando de uma ajuda, estou tentando fazer um for dentro dos scriplets mas esta dando erro. É a parte do read do meu crud. Quando eu aço o for através da camada controller ele funciona, mas na pagina jsp ele da um erro.
       
      <%@ page language="java" contentType="text/html; charset=utf-8"
          pageEncoding="utf-8"%>
      <%@page import="model.JavaBeans"%>
      <%@page import="java.util.ArrayList"%>  
      <%
          ArrayList<JavaBeans> lista = (ArrayList<JavaBeans>)request.getAttribute("contatos");
          for (int i = 0; i < lista.size(); i++){
              out.print(lista.get(i).getIdlista());
          }
      %>
       
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Lista de Tarefas</title>
      <link rel="stylesheet" href="css/styles.css">
      </head>
      <body>
          <div id= "login-container">
              <h1>Lista de Tarefas</h1>
              <table>
                  <thead>
                      <tr>
                          <th>Código</th>
                          <th>Titulo</th>
                          <th>Descrição</th>
                          <th>Data</th>
                          <th>Status</th>
                          <th>Prioridade</th>
                      </tr>
                  </thead>
                  <tbody>
                      
                  </tbody>
              </table>
              <form name="frmContato" action="listarTarefa">
                  
                  <input type="submit" value="Cadastrar" onclick="validar()">
              </form>
              
          </div>
          <script src="scripts/validador.js"></script>    
      </body>
      </html>
       
      E esse é o erro
       
      HTTP Status 500 – Internal Server Error
      Type Exception Report
      Message An exception occurred processing [/listaTarefas.jsp] at line [8]
      Description The server encountered an unexpected condition that prevented it from fulfilling the request.
      Exception
      org.apache.jasper.JasperException: An exception occurred processing [/listaTarefas.jsp] at line [8] 5: 6: <% 7: ArrayList<JavaBeans> lista = (ArrayList<JavaBeans>)request.getAttribute("contatos"); 8: for (int i = 0; i < lista.size(); i++){ 9: out.print(lista.get(i).getIdlista()); 10: } 11: %> Stacktrace: org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:611) org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:500) org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:378) org.apache.jasper.servlet.JspServlet.service(JspServlet.java:326) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) Root Cause
      java.lang.NullPointerException org.apache.jsp.listaTarefas_jsp._jspService(listaTarefas_jsp.java:126) org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:71) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:467) org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:378) org.apache.jasper.servlet.JspServlet.service(JspServlet.java:326) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) Note A pilha de erros completa da causa principal está disponível nos logs do servidor.
       
       
      esse é o Medoto
       
      // Listar tarefa
              protected void tarefas(HttpServletRequest request, HttpServletResponse response)
                      throws ServletException, IOException {
                  //Criando um objeto que irá receber os dados do JavaBeans
                  ArrayList<JavaBeans> lista = dao.listarTarefa();
                  
                  request.setAttribute("tarefas", lista);
                  RequestDispatcher rd = request.getRequestDispatcher("listaTarefas.jsp");
                  rd.forward(request, response);
                  
                  //Teste de recebimento da lista
                  for(int i = 0; i<lista.size(); i++) {
                      System.out.println(lista.get(i).getIdcon());
                      System.out.println(lista.get(i).getTitulo());
                      System.out.println(lista.get(i).getDescricao());
                      System.out.println(lista.get(i).getData());
                      System.out.println(lista.get(i).getStatus());
                      System.out.println(lista.get(i).getPrioridade());
                  }
              }
          
    • By Leandro T.
      $.ajax({
             
           url: 'ajaxfile2.php?xis=<?php echo $PerguntasRow["pergunta_id"];?>&resx=<?php echo $_SESSION["respon"]; ?>', 
           type: 'POST',
           data: form_data2<?php echo $PerguntasRow["pergunta_id"];?>, 
           dataType: 'json',
           contentType: false,
           processData: false,
             
           success: function (data)  {  }
            }); 
               
              
      }
                       Pessoal, boa tarde! não estou conseguindo fazer o ajaxfile2.php receber os parâmetros deste ajax
       
       
    • By k9studio
      Olá Amigos,
      se alguem puder dar um help fico muito grato
      seguinte:
      estou criando um sistema de login com cookie
      todas as paginas fica no patch
      www/htdocs/script/
      quando logar no dominio.com.br liberar o acesso no  cliente.dominio.com.br tambem
      acesso:dominio.com.br
      ou
      quando logar no cliente.dominio.com.br liberar o acesso no dominio.com.br tambem
      acesso:cliente.dominio.com.br
      e guando deslogar quebrar conxao com os dois
      existe uma maneira de fazer isso?
       
    • By ferreiradealmeida
      Prezados(as), boa tarde.
       
      Já trabalhei com webdesign e desenvolvimento frontend, mas faziam anos que não mexia com isso. Hoje sou advogado.
       
      Elaborei uma assinatura para e-mail em HTML, que quando aberta no navegador é exibida corretamente:
       

       
      Ocorre que quando a assinatura é inserida na mensagem (Microsoft Outlook 2016) a disposição dos elementos se mostra desconfigurada, assim permanecendo se a mensagem for enviada:
       

       
      Devem ter notado que a imagem que fica acima das informações é uma imagem de fundo. Já tentei também "background" na <table>, mas neste caso, apesar de aparecer no navegador a imagem sequer aparece na assinatura:
       
      <div style="max-width:716px; max-height:200px; position:relative;"> <img src="http://www.fafadv.com.br/images/assinatura.jpg" alt="imagem-assinatura" /> <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px;"> <table border="0" cellpadding="0" cellspacing="0" width="716" height="200" style="max-width:716px; max-height:200px;"> <tr> <td rowspan="3" style="width:242px;"></td> <td rowspan="3" style="width:340px; font-family:Gadugi; font-size:14px; padding:5px;"> <p><strong><span style="font-size:18px;">Daniel A. Ferreira de Almeida</span></strong><br> <span style="font-size:16px;">Advogado - OAB/SP 424.237</span></p> <p style="margin-top:-7px;">(16) 9 9373-2552<br> (16) 3421-7783</p> <p style="margin-top:-7px;"><a href="mailto:ferreiradealmeida@fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;"> ferreiradealmeida@fafadv.com.br</a><br> <a href="http://www.fafadv.com.br" style="font-family:Gadugi; font-size:14px; color:#000;">www.fafadv.com.br</a></p> <p style="margin-top:-7px;">Rua Marino Bruno Regini, nº 270, Sala 02<br> Nova Ribeirânia - Ribeirão Preto/SP, CEP 14096-710</p> </td> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.facebook.com/adv.faf/"> <img src="http://www.fafadv.com.br/images/logo-facebook.png" alt="logo-facebook" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:66px; text-align:center;"> <a href="https://www.instagram.com/faf.adv/"> <img src="http://www.fafadv.com.br/images/logo-instagram.png" alt="logo-instagram" style="margin-top:10px;"> </a> </td> </tr> <tr> <td style="width:125px; height:67px; text-align:center;"> <a href="https://www.linkedin.com/company/faf-adv"> <img src="http://www.fafadv.com.br/images/logo-linkedin.png" alt="logo-linkedin" style="margin-bottom:5px;"> </a> </td> </tr> </table> </div> </div> Serei grato se alguém souber o que ocorre e puder colaborar.
       
      Obrigado.
×

Important Information

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