Jump to content
gersonab

Carregar div sem refresh através do link

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites

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);
							  }
							});
						});

 

Share this post


Link to post
Share on other sites

Olá!
Segue sugestão:
VzphdVAASGCvAvx4Tlathw.png

 

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__);

iyLHa-8iTBi6DXyhzb4Wog.png

 

 

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

×

Important Information

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