1

Olá, a todos.

Estou tentando popular uma list-group bootstrap com ajax mas não estou conseguindo. Já pesquisei em vários lugares sobre isso e não consegui resolver.

O código php está ok e o json que retorna do php também está ok.

Segue o código html

<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript">
$(document).ready(function(){
$('#lista').empty();
$.ajax({
    type:'GET',
    url: 'artigos.php',
    dataType: 'json',
    success: function(dados){
        for(var i=0;dados.length>i;i++){
            $('#lista').append('<a href=\"artigos/'+dados[i].link+'?id='+dados[i].id'\" class=\"list-group-item\">'+dados[i].titulo+'</a>');
        }
    }
});
});
</script>
</header>
<body>
<div class="page-header text-center">
<h1>Artigos <br /><small>Selecione um item para ler o artigo</small></h1>
</div>
<div class="list-group" id="lista">

</div>
<script src="js/jquery-3.2.1.min.js"></script>
</body>
</html>

2 Respostas 2

2

Estás a escapar aspas sem necessidade e a gerar HTML inválido.

Em vez de \" deves ter somente " uma vez que inicias as strings com aspa simples '.

Então muda

$('#lista').append('<a href=\"artigos/'+dados[i].link+'?id='+dados[i].id'\" class=\"list-group-item\">'+dados[i].titulo+'</a>');

(e corrigindo o + em falta em +dados[i].id'), para:

$('#lista').append('<a href="artigos/' + dados[i].link + '?id=' + dados[i].id + '" class="list-group-item">' + dados[i].titulo + '</a>');
1
  • 1
    Funcionou, dando uma olhada aqui foi falha minha, pois além do problema que você apontou, o arquivo estava com nome diferente na pasta js. Obrigado pela ajuda!
    – Henqsan
    Commented 29/10/2017 às 22:43
2

Além dos problemas citados na resposta do @Sergio, há outro erro em seu código que é a causa do problema: você está carregando o jQuery no final do documento, após o código.

Carregue a biblioteca jQuery preferencialmente no <head> do documento:

<head>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
2
  • Obrigado, mas mesmo colocando no head ainda não funcionou.
    – Henqsan
    Commented 29/10/2017 às 22:24
  • Funcionou, dando uma olhada aqui foi falha minha, pois além de ter colocado a chamada do jquery no fim da página, o arquivo estava com nome diferente na pasta js. Obrigado pela ajuda!
    – Henqsan
    Commented 29/10/2017 às 22:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .