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 Jefferson andre
      Bom dia, alguem me ajude a fazer funcionar este pequeno script usando ajax. Preciso pegar a resposta do console e colocar na tela na id buscar2
      Resposta do console:
      {"valor_hr_viagem":"10","valor_por_km":"8","valor_apos_18":"7","valor_sabado":"6","valor_domingo":"5","id":"834"} teste_ajax.html
      <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <button class="btn btn-default" id="buscar3" type="button">Buscar2</button> <div id="dados2">Aqui será inserindo o resultado da consulta...</div> <div id="valor_fixo_cliente">teste</div> <!-- SCRIPT NECESSARIO PARA O AJAX FUNCIONAR // <script src="jquery.2.1.3.min.js"></script> !--> <script src="jquery.2.1.3.min.js"></script> <script> function buscar3($id_cliente) { //O método $.ajax(); é o responsável pela requisição $.ajax ({ //Configurações type: "POST",//Método que está sendo utilizado. dataType: "json",//É o tipo de dado que a página vai retornar. url: "busca3.php",//Indica a página que está sendo solicitada. //função que vai ser executada assim que a requisição for enviada beforeSend: function (mensagem_retorno) { $("#dados2").html("Carregando..."); $("#valor_fixo_cliente").html("Carregando..."); }, data: {id_cliente: "834"},//Dados para consulta //função que será executada quando a solicitação for finalizada. success: function (mensagem_retorno) { console.log (mensagem_retorno); $("#dados2").html(mensagem_retorno.conteudo); } }); } $('#buscar3').click(function () { buscar3($("#id_cliente").val()) }); </script> </body> </html>
      buscar3.php
      <?php require('conexao_dbo.php'); include('error_report.php'); $id_procurar = $_POST['id_cliente']; $sql = "SELECT * FROM clientes WHERE id='$id_procurar'"; $sql = $arquivo->query($sql); if($sql->rowCount()>0) { $linha = $sql->fetch(); $conteudo = json_encode( array ("valor_hr_viagem" => $linha['valor_hr_viagem'], "valor_por_km" => $linha['valor_por_km'], "valor_apos_18" => $linha['valor_apos_18'], "valor_sabado" => $linha['valor_sabado'], "valor_domingo" => $linha['valor_domingo'], "id" =>$linha['id'] ) ); echo $conteudo; } ?> estrutura da tabela clientes em anexo
       

    • By michelmir
      Olá!
       
      Eu tenho um campo input text que carrega corretamente dados utilizando o Twitter-Typeahead. No caso, também possuo uma caixa de seleção e eu gostaria que quando selecionar um valor nesta caixa, o campo input text fosse preenchido com dados relacionados com o número ID da opção selecionada em questão. 
       
      Por exemplo, se dentro da minha caixa de seleção (categorias) conter a opção "Calçados" e a mesma for selecionada, o campo input text com twitter-typeahead fosse preenchido automaticamente com as opções relacionadas a opção selecionada "calçados" onde essas opções (ex.: "Nike", "Adidas", "Puma") fossem aparecendo a medida que fosse digitando na caixa input text com twitter-typeahead.
       
      Abaixo, segue o código que estou utilizando para tentar montar essa solução. No código abaixo contém 2 campos um select box com as categorias e carregado com php e um campo input text que carrega dados utilizando o Twitter-TypeAhead:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <!-- CSS --> <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> <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 category data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- category dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">Selecione a 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"> <input type="text" name="produtos" id="produtos" class="form-control input-lg" autocomplete="off" placeholder="" /> </div> </div> </div> </body> </html> Abaixo segue o script Ajax que chama o script php para popular o input text:
      <script> $(document).ready(function(){ $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); if(queryID){ $('#produtos').typeahead({ source: function(query, result) { $.ajax({ url:"fetch.php", method:"POST", data: 'query='+queryID, dataType:"json", success:function(data) { result($.map(data, function(item){ return item; })); } }) } }); } }); }); </script> E por fim, o código php que tem como função enviar o resultado da query para o Ajax:
      <?php //fetch.php include 'dbConfig.php'; if(!empty($_POST["query"])){ $request = mysqli_real_escape_string($db, $_POST["query"]); $query = " SELECT * FROM produtos WHERE nomeProduto LIKE '%".$request."%' AND categoriaFK = ".$_POST["query"]." "; $result = $db->query($query); $data = array(); if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $data[] = $row["nomeProduto"]; } echo json_encode($data); } } ?> Como podem observar no código acima, estou tentando utilizar o Ajax para preencher o input text conforme o valor selecionado na caixa de seleção. No caso como posso acertar o código php e o script Ajax para montar essa solução? É possível? Desde já agradeço.
    • By Aquiles Maior
      Olá pessoal, estou tentando refazer esta mesma requisição porém via axios devido fato que preciso que  funcione com o async em false, 
      porém não estou sabendo lidar com o axios ainda.  Não achei na doc, como requisitar o ResponseHeader('Date') no axios. Se alguém
      puder dar um help aqui pro barbudo.
       
      Obrigado!!!
      function horax(){ $.ajax({ type: 'GET', cache: false, url: location.href, 'async': false, complete: function (req, textStatus) { var date = new Date(req.getResponseHeader('Date')); serverTime = moment(date).format('x') $('#clock1').text(moment(date).format('HH:mm:ss')); }, error: function(txt) { } }); setTimeout(horax, 1000); } horax(); alert(+serverTime); //apenas pra testar se está recebendo valor glogal fora da funcao  
    • By granderodeo
      Criei um formulário para envio dos pedidos, assim que o cliente colocar os dados e concluir a compra. Fiz a maior parte com requisições ajax, está tudo funcionando perfeitamente, e como certeza disso, após clicar em finalizar compra, o cliente é redirecionado para página '4d-thank-you.php', onde ele recebe a mensagem de que o pedido foi efetuado com sucesso. Mais eu quero adicionar mais um campo, para o cliente inserir o endereço, mais já tentei de todas as formas, efetuo todas modificações certinhas, e quando clico em Finalizar compra, o cliente não é mais redirecionado para a página '4d-thank-you.php', ou seja a requisição não está sendo feita com sucesso. Vou deixar abaixo os códigos que fazem o carrinho funcionar e a inserir os dados do formulário no Mysql, esse código está funcionando, porém, quando adiciono mais um campo ele para de funcionar, se puderem me ajudar preciso urgente para um projeto. 
       
       
      Esse é o carrinho, e a parte onde o cliente coloca as informações para concluir o pedido.
      <?php // SHOPPING CART WILL BE STORED IN THE SESSION // $_SESSION['cart'][PRODUCT ID] = QUANTITY require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "2a-config.php"; switch ($_POST['req']) { /* [INVALID REQUEST] */ default: echo "INVALID REQUEST"; break; /* [ADD ITEM TO CART] */ case "add": if (is_numeric($_SESSION['cart'][$_POST['product_id']])) { $_SESSION['cart'][$_POST['product_id']] ++; } else { $_SESSION['cart'][$_POST['product_id']] = 1; } echo "Produto adicionado ao carrinho"; break; /* [COUNT TOTAL NUMBER OF ITEMS] */ case "count": $total = 0; if (count($_SESSION['cart'])>0) { foreach ($_SESSION['cart'] as $id => $qty) { $total += $qty; } } echo $total; break; /* [SHOW CART] */ case "show": // Fetch products require PATH_LIB . "2b-lib-db.php"; require PATH_LIB . "4c-lib-cart.php"; $cartLib = new Cart(); $products = $cartLib->details(); // Cart contents in HTML $sub = 0; $total = 0; ?> <h1 style="font-family: 'Gotham Light;'" class="text-center text-info mt-2">Minhas compras&nbsp;<i class="fa fa-gift"></i></h1> <table id="cart-table"> <tr> <th>Remover</th> <th>Quantidade</th> <th>Nome do produto</th> <th>Preço</th> </tr> <?php if (count($_SESSION['cart'])>0) { foreach ($_SESSION['cart'] as $id => $qty) { $sub = $qty * $products[$id]['product_price']; $total += $sub; ?> <tr> <td> <a href="#" class="text-danger lead" onclick="cart.remove(<?= $id ?>);"> <i class="fa fa-trash"></i></a> </td> <td><input class="form-control" id='qty_<?= $id ?>' onchange='cart.change(<?= $id ?>);' type='number' value='<?= $qty ?>'/></td> <td><?= $products[$id]['product_name'] ?></td> <td><?= sprintf("$%0.2f", $sub) ?></td> </tr> <?php }} else { ?> <tr align="center" ><td colspan="3" align="center">&nbsp;Seu carrinho está vazio&nbsp;&nbsp;<button class="btn btn-success"><a style="color: white; text-decoration: none;" href="index.php">Continuar comprando</a></button></td></tr> <?php } ?> <tr> <td colspan="2"></td> <td><strong>Preço total</strong></td> <td><strong><?= sprintf("$%0.2f", $total) ?></strong></td> </tr> </table> <hr> <?php if (count($_SESSION['cart']) > 0) { ?> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fa fa-credit-card"></i>&nbsp;Finalizar Compra</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form class="p-2" onsubmit="return cart.checkout();"> <div class="form-row"> <div class="form-group col-md-6"> <label for="co_name">Nome completo</label> <input type="text" class="form-control" id="co_name" placeholder="Nome completo"> </div> <div class="form-group col-md-6"> <label for="co_email">Seu email</label> <input type="email" class="form-control" id="co_email" value="" disabled> </div> </div> <div class="form-group"> <label for="co_address">Rua, Sítio</label> <input type="text" class="form-control" id="co_address" placeholder="Digite a rua ou sítio onde mora"> </div> <div class="form-group"> <label for="inputAddress2">Bairro</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Digite o bairro onde mora"> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputState">Município</label> <select id="inputState" class="form-control" disabled> <option>União dos Palmares</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <input type="submit" class="btn btn-info btn-block" value="checkout"> </form> </div> </div> </div> <!---- FIM FINALIZAR COMPRA E MAIS DUVIDAS -----> <?php } break; /* [CHANGE QTY] */ case "change": if ($_POST['qty'] == 0) { unset($_SESSION['cart'][$_POST['product_id']]); } else { $_SESSION['cart'][$_POST['product_id']] = $_POST['qty']; } echo "Ação realizada com sucesso"; break; /* [CHECKOUT] */ // @TODO // Beef up this section on your own! // There are no error & security checks in this simple example // You may also want to add more of your own checkout procedures here case "checkout": require PATH_LIB . "2b-lib-db.php"; require PATH_LIB . "4c-lib-cart.php"; $cartLib = new Cart(); if ($cartLib->checkout($_POST['name'], $_POST['email'])) { $_SESSION['cart'] = []; echo "OK"; } else { echo $cartLib->error; } break; /* [ALTERNATIVE CHECKOUT] */ // This version sends an email to the customer on successful checkout case "checkout-email": require PATH_LIB . "2b-lib-db.php"; require PATH_LIB . "4c-lib-cart.php"; $cartLib = new Cart(); if ($cartLib->checkout($_POST['name'], $_POST['email'])) { $_SESSION['cart'] = []; // @TODO // Format this email message as you see fit $order = $cartLib->get($cartLib->orderID); $to = $_POST['email']; $subject = "Order Received"; $message = ""; foreach ($order['items'] as $pid=>$p) { $message .= $p['product_name'] . " - " . $p['quantity'] . "<br>"; } $headers = implode("\r\n", [ 'MIME-Version: 1.0', 'Content-type: text/html; charset=utf-8', 'From: john@doe.com' ]); echo @mail($to, $subject, $message, $headers) ? "OK" : "ERROR sending email!" ; } else { echo $cartLib->error; } break; } ?>  
       
      Aqui é feita a inserção do formulário no Mysql
      <?php class Cart extends DB { function details () { // details() : get details of items in cart // Empty if (count($_SESSION['cart'])==0) { return false; } // Get products in cart $sql = "SELECT * FROM `products` WHERE `product_id` IN ("; $sql .= str_repeat('?,', count($_SESSION['cart']) - 1) . '?'; $sql .= ")"; return $this->fetch($sql, array_keys($_SESSION['cart']), "product_id"); } function checkout ($name, $email) { // checkout() : checkout, create new order // PARAM $name : customer's name // $email : customer's email address // Init $this->start(); // Create the order entry first $pass = $this->exec( "INSERT INTO `orders` (`order_name`, `order_email`) VALUES (?, ?)", [$name, $email] ); // Insert the items if ($pass) { $this->orderID = $this->lastID; $sql = "INSERT INTO `orders_items` (`order_id`, `product_id`, `quantity`) VALUES "; $cond = []; foreach ($_SESSION['cart'] as $id=>$qty) { $sql .= "(?, ?, ?),"; array_push($cond, $this->orderID, $id, $qty); } $sql = substr($sql, 0, -1) . ";"; $pass = $this->exec($sql, $cond); } // Finalize $this->end($pass); return $pass; } function get ($id) { // get () : get order // PARAM $id : order ID $order = $this->fetch( "SELECT * FROM `orders` WHERE `order_id`=?", [$id] ); $order['items'] = $this->fetch( "SELECT * FROM `orders_items` LEFT JOIN `products` USING (`product_id`) WHERE `orders_items`.order_id=?", [$id], "product_id" ); return $order; } } ?>  
       
       
      Esse é o script, que ajuda nas funcionalidades do Carrinho de compras.
      // @TODO - // There is literally little to no interface in this script. // Feedback meesage such as "item added to cart" uses raw Javascript alert // Bootstrap, jQuery, Angular, or vanilla CSS - Implement your own interface. var cart = { ajax : function (opt) { // ajax() : helper function, do AJAX request // PARAM opt.data : data to be sent, an object with key-value pairs // opt.url : target URL // opt.target : (optional) ID of HTML element, put server response in here if provided // opt.load : (optional) function to call when AJAX load is complete // DATA var data = null; if (opt.data) { data = new FormData(); for (var d in opt.data) { data.append(d, opt.data[d]); } } // AJAX var xhr = new XMLHttpRequest(); xhr.open('POST', opt.url, true); xhr.onload = function(){ if (xhr.status!=200) { console.log(xhr); alert("AJAX error. Server responded with error code " + xhr.status + " " + xhr.statusText); } else { if (opt.target) { document.getElementById(opt.target).innerHTML = this.response; } if (typeof opt.load == "function") { opt.load(this.response); } } }; xhr.send(data); }, add : function (id) { // add () : add item to cart // PARAM id : product ID cart.ajax({ url : "4b-ajax-cart.php", data : { req : "add", product_id : id }, load : function (res) { cart.count(); // @TODO alert(res); } }); }, count : function () { // count() : update items count cart.ajax({ url : "4b-ajax-cart.php", data : { req : "count", }, target : "page-cart-count" }); }, toggle : function (reload) { // toggle() : show/hide cart // PARAM reload : force cart reload? var pgPdt = document.getElementById("page-products"), pgCart = document.getElementById("page-cart"); if (reload || pgCart.classList.contains("ninja")) { cart.ajax({ url : "4b-ajax-cart.php", data : { req : "show", }, target : "page-cart", load : function () { pgPdt.classList.add("ninja"); pgCart.classList.remove("ninja"); } }); } else { pgPdt.classList.remove("ninja"); pgCart.classList.add("ninja"); } }, change : function (id) { // change() : change quantity var qty = document.getElementById("qty_"+id).value; cart.ajax({ url : "4b-ajax-cart.php", data : { req : "change", product_id : id, qty : qty }, load : function (res) { cart.count(); cart.toggle(1); // @TODO alert(res); } }); }, remove : function (id) { // remove() : remove item from cart document.getElementById("qty_"+id).value = 0; cart.change(id); }, checkout : function () { // checkout () : checkout cart.ajax({ url : "4b-ajax-cart.php", data : { req : "checkout", // @TODO // Change to checkout-email if you want an email to be sent on checkout // req : "checkout-email", name : document.getElementById("co_name").value, email : document.getElementById("co_email").value, }, load : function (res) { if (res=="OK") { window.location = "4d-thank-you.php"; } else { gen.nShow(res); } } }); return false; } }; window.addEventListener("load", cart.count);  
×

Important Information

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