Jump to content
luizpaulobtu

Melhor forma popular uma select (que usa ajax) na hora de editar um registro?

Recommended Posts

Boa tarde galera, meu nome é Luiz Paulo, primeiro post aqui no iMasters e chego aqui com uma dúvida bem filosófica... busquei algo mas não encontrei, talvés explicando fique mais fácil de vocês caros colegas e amigos desenvolvedores me ajudarem :smile:

 

No seguinte exemplo:

  • Temos um formulário de cadastro com Nome, Idade, Endereço (campos input texto) e Cidade e Bairro (selects), sendo que bairro popula via AJAX quando o usuário seleciona a Cidade (consulta pelo código e retorna o JSON q faz o append em Bairro)

 

Se tivermos que editar tal registro, qual a melhor maneira vocês sugerem para puxar já preenchido todos os campos, em especial a Cidade e o Bairro (que popular via AJAX), permitindo que ele possa alterar um deles. 

 

Atualmente eu utilizo um script no final do código q puxa o Bairro no document.ready() com um setTimeout depois de 800ms de carregamento da página, de acordo com o valor já selecionado da Cidade (nesse caso ele já inclui direto o valor no HTML via echo do PHP, que faz um selected="selected" básico hehehe)

 

Fiquem a vontade para dar sugestões e soluções, Abraço!

Share this post


Link to post
Share on other sites

@luizpaulobtu, joia! Não que você esteja fazendo errado, uma outra visão é: 

Você não sabe se o campo cidade e bairro sera alterado, talvez não seja, então não seria desperdício popular todo o select da cidade, selecionar a cidade e chamar o bairro? Fora os 800ms que do ponto de vista da web é muito tempo!

Você poderia, na edição, simplesmente criar os campos cidade e bairro com apenas uma informação, que seria a cidade e bairro do usuário, da mesma forma que faz com os demais campos. Caso o campo bairro seja clicado, ai sim então você faz um ajax e popula os demais bairros, o mesmo para o campo cidade. Fora os 800ms que você não precisara mais esperar, você poderá economizar duas requests ao servidor, caso o usuário não tenha a intenção de alterar estes campos.
 

Share this post


Link to post
Share on other sites

Tem uma terceira approach que é fazer apenas uma unica requisição (e aproveitar do cacheamento).

 

 

Exemplo abaixo com Estados x Cidades.

 

Seria popular todos os estados e a cada escolha refazer o select das cidades, isso tudo do lado do client (js) evitando requisições futuras.

 

Ex de Estados/Cidades:

SP:

--Campinas

--São Paulo (Capital)

-- Guarulhos

... (etc)

 

 

RJ:

--Barra Mansa

--Cabo Frio

--São Gonçalo

... (etc)

 

 

TL;DR ----

 

Pro : 

- Uso de Cache pode ser usado tranquilamente

- Evita futuras requisições

- Diminui sempre a quantidade/possibilidade em forma de arvore:

 

Contra: 

- Carrega todas as cidades do Brasil 

 

 

Veja um exemplo pratico (Em Js Vanilla / ou jQuery):

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/select

 

2 horas atrás, luizpaulobtu disse:

setTimeout depois de 800ms

Cuidado ai, 99% das vezes q eu vejo um setTimeout em código alheio é alguma gambiarra por falta de entendimento do conceito de Callbacks

https://pt.stackoverflow.com/questions/27177/o-que-é-callback

 

Share this post


Link to post
Share on other sites

Sim @EdCesar , essa é uma abordagem legal, no caso do cara clicar no campo popular economizar requests

 

@gabrieldarezzo muito interessante o uso de cache, bem... confesso q o setTimeout é meio que uma "gambiarra" para esperar um pouco pois tinha vezes que parecia não processar de primeira o retorno do JSON, sei lá, deve ser trauma meu rs

 

A idéia é conhecermos diferentes abordagens pois tem horas que eu penso q deve ter um jeito "mais certo" ou "mais fácil" rss

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 ewersonsv
      Olá pessoal estou iniciando o uso do ajax/js, estou fazendo um protótipo de sistema de estoque (onde gera-se uma fatura manualmente);
      O PHP ta tudo certo mais o JS não atualizar o valor assim que faz as ações { Adiciona, remover, aumenta/diminuir quantidade }
       

       
      AJAX/JS:
      <script type="text/javascript"> //VARIAVEL: var timmer; //PESQUISAR: function pesquisar(item,saidaid){ if(item != ''){ clearTimeout(timmer); timmer = setTimeout(function callback(){ $.ajax({ url: '<?php echo base_url('estoque/pesquisar/'); ?>'+item+'/'+saidaid, success: function(response){ jQuery('#resultado_pesquisar').html(response); }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); }, 100); }else{ $('.resultado_pesquisar').css("display", "none"); } } //CANCELAR PESQUISAR: function cancelar_pesquisar(){ $('#camp_pesquisar').val(''); $('#camp_pesquisar').focus(); $('.resultado_pesquisar').css("display", "none"); $.ajax.reload(); } //TESTE: //ADICIONAR ITEM: function adic_item_list(item,saidaid){ //alert(saidaid); if(item != ''){ clearTimeout(timmer); timmer = setTimeout(function callback(){ $.ajax({ data: {'item': item, 'saidaid': saidaid}, url: '<?php echo base_url('estoque/adicionar/'); ?>'+item+'/'+saidaid, success: function(response){ jQuery('#inner_invoice_area').html(response); $('#camp_pesquisar').val(''); $('#camp_pesquisar').focus(); $("#produt").ajax.reload(); if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); }, 100); }else{ $('.resultado_pesquisar').css("display", "none"); } } $('#adcitem').click(function () { $.ajax({ success: function(data){ if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } } }); }); //ALTERA QUANTIDADE DE ITEM: function atualizar_qntd(qntd,item,saidaid){ clearTimeout(timmer); timmer = setTimeout(function callback(){ var int_val = parseInt(qntd); $.ajax({ url: '<?php echo base_url('estoque/qntd/'); ?>'+int_val+'/'+item, success: function(response){ jQuery('#inner_invoice_area').html(response); $('#camp_pesquisar').val(''); $('#camp_pesquisar').focus(); if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); }, 400); } //DELETAR ITEM: function deletar_item(item,saidaid){ if(item != ''){ clearTimeout(timmer); timmer = setTimeout(function callback(){ $.ajax({ url:'<?php echo base_url('estoque/deletar/'); ?>'+item+'/'+saidaid, success: function(response){ jQuery('#inner_invoice_area').html(response); $('#camp_pesquisar').val(''); if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } }, error: function() { alert("Ocorreu um erro ao carregar os dados."); } }); $('#camp_pesquisar').focus(); $("#inner_invoice_area").ajax.reload(); }, 100); } } $('#dltitem').click(function () { $.ajax({ success: function(data){ if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } } }); }); //ATUALIZAR PAGINA: function reflesh(){ $.ajax({ success: function(data){ if(data.success == true){ setTimeout(function(){ location.reload(); }, 5000); } } }); } </script>  
       
    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
    • By teuzero
      Meu site é :https://xraros.000webhostapp.com/
       
      To com seguinte problema eu adicionei esse código:
       
      jQuery(document).ready(function() { if($(window).width()<=820) { $('#menu').hide(); } }); no arquivo carrega.js com a intenção de ocultar o menu só quando a tela estive com 820px de largurar ou menos, mais isso não esta acontecendo, como podem ver no meu site esse script n esta funcionando ele ta ocultando o menu em todas as resoluções, como faço pra deixar o menu oculto na resolução de 820px pra baixo?
    • By rxhxtx
      Boa tarde,
      nos meus estudos me deparei com mais um obstaculo,
      estava fazendo um tutorial sobre atualizacao de BD via ajax...
       
      os dados da pagina estao sendo atualizados perfeitamente, porem o PHP nao executa a funcao de colear os dados e atualizar o BD,
      <?php $connection = mysqli_connect('localhost' , 'root' ,'' ,'testes'); if(isset($_POST['user_id'])){ $user_fname = $_POST['user_fname']; $user_lname = $_POST['user_lname']; $user_email = $_POST['user_email']; $user_id = $_POST['user_id']; $result = mysqli_query($connection , "UPDATE `users_full` SET `user_fname`=`$user_fname` , `user_lname`=`$user_lname` , `user_email`= `$user_email` WHERE `user_id`=`$user_id`"); if($result){ echo 'data updated'; } } ?> se eu coloco 
      if(2+2 ==$){  
      e tiro os POST e coloco os valores ex: $user_fname = "carlinhos";
      atualiza, porem se deixo para ele pegar os dados vi post não funciona... so atualiza na pagina, mas o BD fica igual....
       
      qual é o erro? pq nao esta recebendo os POST??
       
      codigo da pagina é esse:
      <?php include 'listaUSUcon.php'; ?> <head></head> <body> <div class="container"> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <?php $table = mysqli_query($connection ,'SELECT * FROM users_full'); while($row = mysqli_fetch_array($table)){ ?> <tr id="<?php echo $row['user_id']; ?>"> <td data-target="user_fname"><?php echo $row['user_fname']; ?></td> <td data-target="user_lname"><?php echo $row['user_lname']; ?></td> <td data-target="user_email"><?php echo $row['user_email']; ?></td> <td><a href="#" data-role="update" data-id="<?php echo $row['user_id'] ;?>">Update</a></td> </tr> <?php } ?> </tbody> </table> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <input type="text" id="user_id" class="form-control" readonly> </div> <div class="modal-body"> <div class="form-group"> <label>First Name</label> <input type="text" id="user_fname" class="form-control"> </div> <div class="form-group"> <label>Last Name</label> <input type="text" id="user_lname" class="form-control"> </div> <div class="form-group"> <label>Email</label> <input type="text" id="user_email" class="form-control"> </div> <input type="hidden" id="user_id" class="form-control"> </div> <div class="modal-footer"> <a href="#" id="save" class="btn btn-primary pull-right save">Update</a> <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> <script> $(document).ready(function(){ // append values in input fields $(document).on('click','a[data-role=update]',function(){ var user_id = $(this).data('id'); var user_fname = $('#'+user_id).children('td[data-target=user_fname]').text(); var user_lname = $('#'+user_id).children('td[data-target=user_lname]').text(); var user_email = $('#'+user_id).children('td[data-target=user_email]').text(); $('#user_fname').val(user_fname); $('#user_lname').val(user_lname); $('#user_email').val(user_email); $('#user_id').val(user_id); $('#myModal').modal('toggle'); }); // now create event to get data from fields and update in database $('#save').click(function(){ var user_id = $('#user_id').val(); var user_fname = $('#user_fname').val(); var user_lname = $('#user_lname').val(); var user_email = $('#user_email').val(); $.ajax({ url : 'listaUSUcon.php', method : 'post', data : {user_fname : user_fname , user_lname: user_lname , user_email : user_email , user_id: user_id}, success : function(response){ // now update user record in table $('#'+user_id).children('td[data-target=user_fname]').text(user_fname); $('#'+user_id).children('td[data-target=user_lname]').text(user_lname); $('#'+user_id).children('td[data-target=user_email]').text(user_email); $('#myModal').modal('toggle'); } }); }); }); </script>  
       
      aquele include (listaUSUcon.php) é referente ao primeiro codigo que postei la em cima..
       
       
      para mim não faz sentido, pois aparentemente nao tem nada errado....
       
      alguem sabe onde estou errando???
       
       
       
       
       
       
       
       
    • By asacap1000
      Galera estou com uma consulta que ainda não consegui entender o porque. gostaria que ela trouxesse em apenas uma linha mas não vem de forma alguma.
       
      SELECT BO.LAGER, BO.ID_OS, K.ID_KLIENT, K.SUCHBEGRIFF CNPJ_CPF, K.NAME, BI.DIV_1 LOTE, BI.DIV_10 DI_DDE, (SELECT DISTINCT DIS.ID_DISPATCHER FROM FISCAL.DOCHD DC, WMS_EADI.DISPATCHER DIS WHERE DC.DOCHD_DOC_ID = BO.NR_NF AND DC.DOCHD_RPS_DESP = DIS.SUCHBEGRIFF) COD_COMISSARIA, (SELECT DISTINCT DIS.BEZ FROM FISCAL.DOCHD DC, WMS_EADI.DISPATCHER DIS WHERE DC.DOCHD_DOC_ID = BO.NR_NF AND DC.DOCHD_RPS_DESP = DIS.SUCHBEGRIFF) COMISSARIA, BO.NR_NF, BO.DATE_BILL, BO.DATE_EMISS, --------ABAIXO OS TIPOS DE SERVIÇOS ONDE ESTÃO OCORRENDO CADA RESULTADO ELE CRIA UMA LINHA---------------- (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'ARMAZ')) VLR_ARMAZ, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'GER.RISCO')) VLR_GER_RISCO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'MOVIMENT')) VLR_MOVIMENTACAO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'DESUNIT')) VLR_DESUNIT, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'PESAGEM')) VLR_PESAGEM, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT LIKE 'AVERBA%')) VLR_AVERBACAO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND WER.WERT = 'FAT.MINIMO.')) VLR_FAT_MINIMO, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND BLL.BILLITE NOT IN ('21.02', '21.03') AND WER.WERT = 'OUT.SERV.')) VLR_OUTROS_SERV, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND BLL.BILLITE = '21.02' AND WER.WERT = 'OUT.SERV.')) TRANSF_IN, (SELECT SUM(ROUND(OSI.PREIS, 2)) FROM BILL_OS_ITEM OSI WHERE OSI.LAGER = BO.LAGER AND OSI.ID_KLIENT = K.ID_KLIENT AND OSI.ID_OS = BO.ID_OS AND OSI.BILLITE = BI.BILLITE AND OSI.DIV_1 = BI.DIV_1 --AND NVL(OSI.DIV_10, 'x') = NVL(BI.DIV_10, 'x') AND OSI.BILLITE IN (SELECT BLL.BILLITE FROM BILL_ITEM BLL, WERTE WER WHERE BLL.TIPO_FAT = WER.WERT AND WER.WERTE_BER = 'ITENSF' AND BLL.BILLITE = '21.03' AND WER.WERT = 'OUT.SERV.')) TRANSF_OUT FROM BILL_OS BO, BILL_OS_ITEM BI, KLIENTEN K WHERE BO.LAGER = BI.LAGER AND BO.ID_KLIENT = BI.ID_KLIENT AND BO.ID_OS = BI.ID_OS AND BO.LAGER = K.LAGER AND BO.ID_KLIENT = K.ID_KLIENT and k.id_klient = '3099' and BO.NR_NF = '121304' AND BO.STATUS = '90' AND TRUNC(BO.DATE_BILL) BETWEEN '28/08/2019' AND '28/08/2019' GROUP BY BO.LAGER, BO.ID_OS, K.ID_KLIENT, K.SUCHBEGRIFF, K.NAME, BO.DATE_EMISS, BO.NR_NF, BO.DATE_BILL, BI.BILLITE, BI.DIV_1, BI.DIV_10
       
      Alguem consegue identificar neste select porque ele vem assim?
×

Important Information

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