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

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 ment0r
      Boa tarde a todos.

      Estou iniciando um estudo com o banco MySQL (trabalho co PostgreSQL e Firebird) para futuros trabalhos. Bom, me deparei com um problema chato: caracteres especiais.
      Um exemplo: T�tulo.
      Não consigo exibir no meu site tais caracteres. O banco tem Charset/Collation: utf8/utf8_bin como configuração.
      Já usei o utf_encode e utf_decode - não resolveu.

      Alguém sabe o que mais posso fazer?
      Desde já, muito obrigado.
    • By Giovanird
      Ola!
      Tenho uma lista de usuários e um link que abre uma div que mostra os detalhes deste usuario, este link usa o evento onClick do javascript.
      O problema é que quando clicado para abrir a div, a tela sobe para o inicio do topo.
      Preciso que a tela nao faça a rolagem para o topo e sim que fique na posição da lista.
      Segue meu codigo abaixo.
      Obrigado por momento
       
      <div class="container"> <div class="row"> <?php foreach para listar os usuários.... ?> <div class="col-10"> Nome do usuário </div> <div class="col-2"> <a href="#" onClick="Mudarestado('minhaDiv<?=$cod?>')"><img src="icons/chevron-right.svg"></a> </div> *** Parte ficará visivel ao clicar no link OnClick *** <div class="divacoes" id="minhaDiv<?=$cod?>" style="display:none"> <div class="row"> <div class="col"> ... dados dos usuarios... </div> </div> </div> *** **** <?php fim foreach que gera a lista de usuários... ?> </div> </div> <style> .divacoes { background-color: #64A338; border: none; padding: 20px; width: 97%; height: 80px; } </style> <script> function Mudarestado(el) { var display = document.getElementById(el).style.display; if (display == "none") document.getElementById(el).style.display = 'block'; else document.getElementById(el).style.display = 'none'; } </script>  
    • By asacap1000
      Galera salve salve!!
      Estou com um projeto em que são armazenados vídeos, porém seguindo os requisitos exigidos, para visualizar e baixar esses vídeos eles tem que aparecer com numero de cadastro do usuário que está acessando no centro do video como uma marca d'agua.
       
      Para simplesmente aparecer na tela eu consigo fazer uma camada superior com css e apresentar os dados do usuário mas para baixar o vídeo ele já faz sem a marca.
       
      Vocês conhecem algum recurso pra adicionar essa marca? ela não pode ficar no arquivo original pois outros usuário poderão baixar com sua identificação na tela.
       
      Se alguem puder me dar um norte ajudaria muito
    • By marcelo.ourico
      Estou precisando fazer o envio de um XML via webservice. Estou utilizando PHP 7.4 e nuSoap.

      Porém esse XML de envio possui várias tags com hífen. Por exemplo <tag-name></tag-name>.
       
      Esse hífen tem sido um problema, principalmente por que eu não posso enviar o XML como string. Apenas como objeto. Então imaginem isso:
       
      $objeto = simplexml_load_string($string_xml);  
      Se simplesmente eu tentar resgatar o valor da TAG já dá erro...
       
      $campo1= $objeto->tag-name;
      O erro ocorre em função de que o hífen é um caractere reservado do PHP... Então como resolver?

      Independente disso, quando eu tento fazer o envio via nuSoap, também recebo erro abaixo:
      wsdl->getTypeDef('tag-name', 'http://xyz.abr...')
      wsdl->serializeType('tag-name', 'tag-name', Object(SimpleXMLElement), '

      Alguém já passou por isso? Sabe como resolver? Pode dar uma dica?
    • By Caio Vargas
      fala pessoal eu aqui de novo kkk
       
      consegui achar um tutorial de como criar o calendario fiz algumas modificaçoes 
       
      porem agora eu quero fazer o seguinte quero definir os dias que os serviços seram apresentados nos dias
       
      tipo tenho segunda terça quarta quinta sexta sabado e domingo ai esses dias seram inseridos no banco 
       
      como posso fazer uma verificação no codigo
       
      <?php // What is the first day of the month in question? function build_calendar($month, $year) { $Read = new Read; $Read->FullRead("SELECT * FROM " . DB_AGENDAMENTO . " WHERE MONTH(date) =:month AND YEAR(date)=:year","month={$month}&year={$year}"); $bookings = array(); if($Read->getResult()): if($Read->getRowCount() > 0): while($row = $Read->getResult()): $bookings[] = $row['date']; endwhile; endif; endif; // Create array containing abbreviations of days of week. // $daysOfWeek = array('Sunday', 'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Qual é o primeiro dia do mês em questão? $firstDayOfMonth = mktime(0,0,0,$month,1,$year); // Quantos dias este mês contém? $numberDays = date('t',$firstDayOfMonth); // Recuperar algumas informações sobre o primeiro dia do // mês em questão. $dateComponents = getdate($firstDayOfMonth); // What is the name of the month in question? $monthName = $dateComponents['month']; // What is the index value (0-6) of the first day of the // month in question. $dayOfWeek = $dateComponents['wday']; // Create the table tag opener and day headers $datetoday = date('Y-m-d'); $calendar = "<table class='table table-bordered'>"; $calendar .= "<center><h2>$monthName $year</h2>"; // se a data month < que a data atual então o botão sera desativado if($month <=> date('m')): $calendar.= "<a class='btn btn-xs btn-primary' href=". BASE ."/index/month/".date('m', mktime(0, 0, 0, $month-1, 1, $year))."/year/".date('Y', mktime(0, 0, 0, $month-1, 1, $year)).">Previous Month</a> "; else: $calendar.= "<a class='btn btn-xs btn-primary'>Previous Month</a>"; endif; $calendar.= " <a href=". BASE ." class='btn btn-xs btn-primary' data-month='".date('m')."' data-year='".date('Y')."'>Current Month</a> "; $calendar.= "<a href='". BASE ."/index/month/".date('m', mktime(0, 0, 0, $month+1, 1, $year))."/year/".date('Y', mktime(0, 0, 0, $month + 1, 1, $year))."' class='btn btn-xs btn-primary'>Next Month</a></center><br>"; $calendar .= "<tr>"; // Create the calendar headers foreach(getSemana() as $day): $calendar .= "<th class='header'>$day</th>"; endforeach; // Cria o resto do calendário // Inicia o contador de dias, começando com o 1º. $currentDay = 1; $calendar .= "</tr><tr>"; // A variável $dayOfWeek é usada para // assegura que o calendário // display consiste em exatamente 7 colunas. if($dayOfWeek > 0): for($k = 0; $k < $dayOfWeek; $k++): $calendar .= "<td class='empty'></td>"; endfor; endif; $month = str_pad($month, 2, "0", STR_PAD_LEFT); while ($currentDay <= $numberDays): //Sétima coluna (sábado) atingida. Inicie uma nova linha. if ($dayOfWeek == 7): $dayOfWeek = 0; $calendar .= "</tr><tr>"; endif; $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT); $date = "$year-$month-$currentDayRel"; //volta para a data atual $dayname = strtolower(date('l', strtotime($date))); $eventNum = 0; $appointment_date = date('Y-m-d', strtotime($appointment_date . ' +1 day')); $day_id = date('w',strtotime($appointment_date)); // var_dump($day_id); $today = $date == date('Y-m-d') ? "today" : ""; if($date < date('Y-m-d')): $calendar.="<td><h4>$currentDay</h4> <button class='btn-danger-no '></button>"; else: $calendar.="<td class='$today'><h4>$currentDay</h4> <a href=".BASE."/book/date/".$date." class='btn btn-success btn-xs'>Book</a>"; endif; $calendar .="</td>"; //Increment counters $currentDay++; $dayOfWeek++; endwhile; //Complete the row of the last week in month, if necessary if ($dayOfWeek != 7): $remainingDays = 7 - $dayOfWeek; for($l=0; $l < $remainingDays; $l++): $calendar .= "<td class='empty'></td>"; endfor; endif; $calendar .= "</tr>"; $calendar .= "</table>"; return $calendar; }  
×

Important Information

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