gersonab 1 Denunciar post Postado Outubro 9, 2023 Boa noite, já pesquisei e ainda não encontrei como fazer desta forma, tenho um link gerado com dados do mysql, quero que ao clicar no mesmo este carregue dentro de uma div sem dar refresh na página <a href="pagina.php?id=<?php echo id; ?>"> pagina </a> <div id="conteudo"> </div> já vi vários tutoriais com button , mas não é meu caso Compartilhar este post Link para o post Compartilhar em outros sites
Omar~ 87 Denunciar post Postado Outubro 9, 2023 Adicione um evento de click em cada link então você pode optar por duas alternativas: Retornar a função e devolver um valor falso. Prever o comportamento padrão do navegador com a tag. No entanto sugiro mesmo que use uma tag button é para esse tipo de finalidade que ela serve. Preparei um exemplo usando a minha biblioteca javascript Arquivos usados: https://github.com/Spell-Master/sm-web/blob/master/javascript/jsd/js-default.js https://github.com/Spell-Master/sm-web/tree/master/javascript/jsd/ajax <?php $idA = 'Simulando valor'; $idB = 'Outro simulado de valor'; ?> <script src="js-default.js" type="text/javascript"></script> <script src="ajax.js" type="text/javascript"></script> <p><a href="pagina.php?id=<?= $idA ?>" data-exemplo=""> pagina A </a></p> <p><a href="pagina.php?id=<?= $idB ?>" data-exemplo=""> pagina B </a></p> <div id="resultado"></div> <script> // Criando tudo antes para melhorar o desempenho var links = jsd('[data-exemplo]'), href = undefined, resultado = jsd('#resultado'); links.click(function (evento) { // Impedindo que redirecione evento.preventDefault(); // Extraíndo o valor de id do href href = jsd(this).attr('href').split('id=').reverse()[0]; // Solicitando o arquivo pagina.php envinado a ele um Protocolo GET com os dados do link jsd.ajax({ url: 'pagina.php', protocol: 'GET', type: 'html', response: 'text', values: { pagina: href }, onResult: function (resposta) { resultado.html(resposta); } }); }); </script> Compartilhar este post Link para o post Compartilhar em outros sites
gersonab 1 Denunciar post Postado Outubro 9, 2023 boa tarde. Não acontece nada , nem erro no console, a div não carrega. ja tentei muita coisa aqui .... Compartilhar este post Link para o post Compartilhar em outros sites
gersonab 1 Denunciar post Postado Outubro 10, 2023 no caso do button seria como pois dessa forma não carrega ... <button id="meuBotao" data-var="<?php echo $id; ?>" type="button" class="btn btn-sm btn-outline-primary"><?php echo $titulo ?></button> $("#meuBotao").click(function(){ var datavar = $(this).attr("data-var"); $.ajax({ url: 'botoes.php', type: 'GET', data: { idcat: datavar}, dataType: 'html', success: function(res){ $("#conteudo2").html(res); } }); }); Compartilhar este post Link para o post Compartilhar em outros sites
washalbano 54 Denunciar post Postado Outubro 10, 2023 Olá! Segue sugestão: index.php <?php $ids = [ 'asdf-1234', '4312-fasdf', '1zxc-3asd', ]; $links = ''; foreach ($ids as $id) { $links .= "<a href='pagina.php?id={$id}'> pagina {$id} </a>"; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ajax Loading HTML</title> <style> body{ background-color: #eee; } nav{ display: flex; } nav a{ padding:12px; } #conteudo{ border:thin solid goldenrod; border-radius:8px; background-color: #fff; padding:12px; box-shadow:1px 1px 5px rgba(0,0,0,.2); } </style> </head> <body> <nav><?=$links?></nav> <main> <h3>Conteúdo:</h3> <div id="conteudo"></div> </main> <script> const anchors = document.querySelectorAll('nav a'); const ajaxLoadHTML = async (e)=>{ e.preventDefault(); const link = e.target.getAttribute('href') const response = await fetch(`api/${link}`).then(response=>response.text()) conteudo.innerHTML = response } for(const anchor of anchors){ anchor.addEventListener('click', ajaxLoadHTML) } </script> </body> </html> api/pagina.php <?php echo '<pre>Conteúdo da página com id: '; print_r($_GET); echo '</pre>'; exit(__FILE__.' at line: '.__LINE__); Compartilhar este post Link para o post Compartilhar em outros sites
