Ir para conteúdo

POWERED BY:

Jamersonjds

Como listar os dados do banco de dados com JQUERY + PHP, E coloca determinado item no click

Por , em Javascript

Recommended Posts

Jamersonjds    0

Jamersonjds
Postado

Pra aprendizado, estou tentando listar dados do banco de dados e trazer os resultados para meu html.

Estou conseguindo fazer com este código.

  

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>Chat</title>
	<link rel="stylesheet" href="../public/style/reset.css">
	<link rel="stylesheet" href="../public/style/chatStyle.css">
	<!-- É adicionado a biblioteca jquery e o fontAwesome -->
	<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
	<link href="../public/style/fontawesome/css/all.css" rel="stylesheet">
	<script src="../public/js/jquery.min.js"></script>
</head>
<style>
	.test2 {
		cursor: pointer;
	}
</style>
<script>
	$(document).ready(function(){
		var itens = "", url = "../includes/configs/chat.php", itens2 = "";
		// Capturar dados usando Método AJAX do jquery
		$.ajax({
			url: url,
			cache: false,
			dataType: "json",
			success: function(retorno){
				for(var i = 0; i<retorno.length; i++){
					itens += "<li>";
					itens += "<a class='test2' onclick='function retornou(){$('.Tes22').html('wadwd')}'>";
					itens += "<div class='imgUserList'>";
					itens += "<div class='widthUserImg'>";
					itens += "<div class='imgUserListD'><img src='https://avatars0.githubusercontent.com/u/3966553?s=460&v=4' alt=''></div>";
					itens += "</div>";
					itens += "<div class='textUserList'>";
					itens += "<input type='text' class='pegarID' value='" + retorno[i].id + "'>";
					itens += "<span class='title'>" + retorno[i].email + "</span>";
					itens += "<h1 class='title'>Está online</h1>";
					itens += "</div>";
					itens += "</div>";
					itens += "</a>";
					itens += "</li>";
				}
				$(".pessoas").html(itens);
				
			}
		})
	});
</script>
<body onload="carregarItens()">
<div class="container">


	<div class="listaPessoas">
		<div class="headerPeople title">
			<h1>Contatos</h1>
			<h2 class="Tes22"></h2>
		</div>
		
		<ul class="pessoas">
			<!-- <li>
				<a href="">
				<div class="imgUserList">
					<div class="widthUserImg">
					<div class="imgUserListD"><img src="https://avatars0.githubusercontent.com/u/3966553?s=460&v=4" alt=""></div>
					</div>
					<div class="textUserList">
					<span class="title">10.1.196.90</span>
					<h1 class="title">Está online</h1>
					</div>
				</div>
				</a> 
			</li> -->
		</ul>
	</div>



	<div class="chat">
		<div class="chatHeader">
			<div class="title text">
				<h1>james</h1>
			</div>
			<div class="menuUser title">
				<i class="fas fa-ellipsis-h"></i>
			</div>
      
		</div>
		
		<div class="chatMessage">
			
		</div>


		<div class="chattext">
			<form action="">
				<input type="text" id="modal">
				<button><i class="fas fa-paper-plane"></i></button>
			</form>
      </div>
	</div>



	<div class="infoPessoas">
		
	</div>


</div>


<script src="../public/js/chat.js"></script>
	
</body>
</html>

Porém estou querendo pegar apenas o ID e colocar em um <h2> e não estou conseguindo.

Exemplo: Ao clicar em um dado vindo do banco de dados como é listado acima eu colocar o ID dele no <h2>.

 

Este é meus dados vindo do PHP já no json. 

echo json_encode($dados, JSON_PRETTY_PRINT);

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Conexão mysql com outro domínio
      Por ILR master
      Fala galera, tudo certo?
       
      Seguinte: No servidor A estou tentando fazer uma consulta com o servidor B, mas está dando erro.
      Estou usando o mesmo código de conexão do servidor B que funciona perfeitamente, mas no servidor A, dá erro.
      Segue código:
       
      $host = 'servidor B';
      $user = 'user';
      $pass = '********';
      $db   = 'banco';
       
      // conexão e seleção do banco de dados
      $conexao = mysqlI_connect($host, $user, $pass, $db);
      mysqlI_set_charset($conexao,"utf8");
      //print "Conexão rodando e OK!"; 
      //mysqlI_close($conexao);
       
      Alguém pode me ajudar?
    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      [Resolvido] JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • violin101
      PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto
      Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
    • violin101
      PHP+Codeigniter - Adicionar Registro Plano de Contas
      Por violin101
      Caros amigos, saudações.
       
      Humildemente peço desculpa por postar uma dúvida que tenho.

      Preciso salvar no MySql, os seguinte Registro:

      1 - Principal
      ====> minha dúvida começa aqui
      ==========> como faço para o Sistema Contar Automaticamente o que estiver despois do 1.____?
      1.01 - Matriz
      1.01.0001 - Estoque
      1.01.0002 - Oficina
      etc

      2 - Secundário
      2.01 - Loja_1
      2.01.0001 - Caixa
      2.01.0002 - Recepção
      etc
       
      Resumindo seria como se fosse um Cadastro de PLANO de CONTAS CONTÁBEIL.

      Grato,


      Cesar









       
×

Informação importante

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

  Aceito