Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jonatantorres

Atualizando várias DIVS com AJAX utilizando POST

Recommended Posts

Boa tarde a todos.

Estou precisando de uma ajuda, procurei na internet e não achei nada relativo ao meu problema, então resolvi recorrer ao iMasters.

Já adianto que sou BEM iniciante em Javascript, então se eu cometer algumas gafes, me perdoem.

Fazendo uma breve introdução ao meu problema, preciso alterar mais de uma DIV ao mesmo tempo com valores independentes via AJAX utilizando jQuery. Mas meus dados não estão na página, então precisaria utilizar uma requisição POST.

O problema é que, na utilização de POST, não encontrei uma maneira de atualizar mais de uma DIV com valores diferentes fazendo apenas uma requisição.

Não estou conseguindo colocar imagens para ilustrar melhor o problema, mas vou tentar fazer um esquemático.

Ao clicar em calcular, eu preciso que ele utilize o valor do textBox A e atualize a <DIV> ao lado, utilize o valor do textBox B e atualize a <DIV> ao lado e a mesma coisa para C.

legenda: [ ] = textbox ( ) = botão

Como está ficando:

A [ 50 ] 50

B [ 60 ] 50

C [ 20 ] 50

(CALCULAR)

Como deveria ficar:

A [ 50 ] 50

B [ 60 ] 60

C [ 20 ] 20

(CALCULAR)

Mas eu preciso que isso seja feito por POST, porque, num caso real, esses valores dos textbox seriam tratados com informações do banco e nas divs ao lado viriam informações que são fruto dessa combinação (do valor do textbox com informação do banco). Repeti os valores do textbox apenas para facilitar a visualização do problema.

Para atualizar os valores direto da página, consegui atualizar as 3 divs sem problemas. Mas tentando utiizar Post, não consegui pensar numa forma mais correta para fazer isso.

Minhas alternativas foram:

1 - Fazer 3 requisições (pra mim, a pior ideia hehehe)

2 - trazer uma string com os 3 valores e tratar no retorno (também não parece o ideal)

Gostaria de saber se existe uma maneira mais eficiente. Finalmente, vamos aos códigos:

função na página:

legenda:

#calc = id do botão

post.jsp = página do post

#a = id do textbox a

#valorA = id da div onde deve ser inserida a informação do valor A

#valorB = id da div onde deve ser inserida a informação do valor B

#valorC = id da div onde deve ser inserida a informação do valor C

$( "#calc" ).click(function() {
 
$.post("post.jsp", {a: $('#a').val()}, function( data ){
 
$("#valorA").text(data);
$("#valorB").html(data);
$("#valorC").html(data);
 
});
 
});
 

POST:

<% String a = request.getParameter("a");
response.getWriter().print(a);%>
 

Alguma maneira de resolver isso de forma eficiente?

Muito obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

o correto é retornar um json:

$("#valorA").text(data.valorA);
$("#valorB").html(data.valorB);
$("#valorC").html(data.valorC);
o json seria algo assim:

{
  "valorA": "xxxxx",
  "valorB": "yyyyy",
  "valorC": "bbbbb"
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.