Jump to content
  • ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By michelmir
      Olá!
       
      Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste  meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery.
       
      Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box  "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo:
       
       
       
      Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão.
       
      Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados:
       

       
      Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto:
       
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery UI library --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head> <body> <div class="container"> <br> <h1>DYNAMIC TWITTER TYPEAHEAD</h1> <br> <div class="row"> <?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the country data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- categoria dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">seleciona categoria</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; } }else{ echo '<option value="">Categoria não encontrada</option>'; } ?> </select> </div> <div class="col-md-4" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div> </div> </body> </html>  
      No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" :
       
      $(document).ready(function(){ var produtos; var nomes = []; // array var lista = {}; // objeto $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); $.ajax({ url:"fetch.php", method:"POST", data:{categoria:queryID}, dataType:"json", success:function(data){ console.log(data); $.each(data, function(i, optionHtml){ $('#produtos').append(optionHtml); }); $("#imagem").empty(''); $(".typeahead").val(''); produtos = data; } }); $('.typeahead').typeahead({ source: function(query, result) { $.each(produtos, function(idx, item){ if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto); lista[item.nomeProduto] = item.imagem; }); return result(nomes); }, afterSelect: function (data) { var img = lista[data]; $('#imagem').html(img); }, }); }); });  
      Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax:
       
      <?php require_once 'dbConfig.php'; if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." "; $result = $db->query($query); $data = array (); if ( $result->num_rows > 0 ) { while($row = $result->fetch_assoc ()) { $data[] = $row; } header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate"); echo json_encode($data); exit(); } } ?> No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. 
       
      Como posso proceder? Desde já agradeço a atenção de todos.
    • By juliosertori
      Olá boa noite, tudo bem galera?
       
      Tenho um input:
      <input type="text" value="0" name="qtdProds" id="qtdProds" class="form-control" onkeyup="atualizaTotalPrecos(this);" required /> E quando ele está ONBLUR, funciona o seguinte script:
      function atualizaTotalPrecos(sel){ var nameInput = sel.name; var IdNameProds = parseInt(nameInput.match(/\d/g).join('')); var valor = $('input[name="produtos_pdv['+IdNameProds+'][qtdProds]"]').val(); var custo = $('input[name="produtos_pdv['+IdNameProds+'][custoProds]"]').val(); var totalCusto = valor*custo; $("[name='produtos_pdv["+IdNameProds+"][custoTotalProds]']").val(totalCusto); //$("[name='totalPedidoDesconto']").val(totalCusto); var descontoPedido = $("#descontoPedido").maskMoney('unmasked')[0]; var total = 0; $('.somaTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) total += valor; }); var totalDescontado = total - descontoPedido; //alert(totalDescontado); $(".SomaTotalPrecos").maskMoney('mask', total); $(".totalpedidos").maskMoney('mask', totalDescontado); //////////////// var totalCusto = 0; $('.somaCustoTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) totalCusto += valor; }); $(".SomaTotalCustos").maskMoney('mask', totalCusto); };  
      Onde atualizo o campo .SomaTotalPrecos, funciona perfeitamente.
       
      Mas quando troco para Onkeyup, e inserir 1 por exemplo, primeiro ele preenche o campo com 0, e da segunda vez, ele atualiza para a primeira vez, ou seja, 1.
       
      Ex: coloco o valor de R$ 10,00 e na quantidade coloco 1, ele preenche o campo com 0, depois se insiro 2, ai ele preenche o campo com a quantidade anterior, ou seja 1xR$ 10,00
       
    • By Jefferson andre
      Ola,
      Alguem tem um exemplo do uso da mascara do jquery no camp telefone utilizando bootstrap 4 para em enviar por favor
       
      Estou usando os tutoriais mas nao funciona
       
      Grato
       
    • By alysson122010
      Gostaria de saber como fazer um botão de status. Tipo ta la ativo ai quando eu clicar nesse botão ele mude e fique desativado e se eu clicar novamente fique ativado.
      Sem da refresh na pagina e esse botao envie para meu banco de dados e altere o status na tabela com o id do post.
      Como eu faço isso nao tenho ideia.
    • By henriquers
      Bom Dia,
       
      Estou fazendo um sistema para armazenar documento e tenho algumas tabelas de consulta onde a mesma aparece algumas informações necessarias como ID , Nome etc
      e estou tentando Ocultar a coluna que esta o ID para que o usuario não consiga ver,estou utilizando o seguinte codigo para ocultar a coluna.
      <script> $("#tabela_cons").ready(function () { $('td:nth-child(1),th:nth-child(1)').hide(); }); </script>  
      A coluna fica oculta certinho do modo que eu quero, mas esse código esta afetando as outras tabelas que eu tenho na pagina também, e não sei como ocultar apenas na tabela que eu desejo que seja oculta no caso a tabela com ID = tabela_cons;
×

Important Information

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