Váriável não retorna os dados

[Rai Siqueira 3]

Fala galera, então, meu js conta com uma variável que faz a busca no conteúdo, até ai tudo bem. só que quando tento fazer ela imprimir algo no html, não funciona.

$(document).ready(function(){

	var container 		= $("#container");
	var posts 			= container.find('#posts');
	var table_posts		= posts.find('#table-posts');
	var edita_post		= table_posts.find("#form-atualizar-post");
	var tbody 			= $("tbody");

	$.ajax({
		url : '/admin/painel/listar',
		datatype : 'json',
		success : function(data){
			var html = '';
			$.each(data, function(key, value){

				html+='<tr>';
				html+='<td>'+data[key].post_titulo+'</td>';
				html+='<td><a href="#" id="btn-editar" data-id="'+data[key].id+'">Editar</a></td>';
				html+='<td><a href="#" id="btn-deletar" data-id="'+data[key].id+'">Deletar</a></td>';
				html+='</tr>';
				
			});
			tbody.append(html);
		}
	})

	table_posts.on('click', '#btn-deletar', function(event){
		event.preventDefault();
		var id = $(this).attr('data-id');
		$.ajax({
			url : '/admin/post/deletar/'+id,
			type : 'DELETE',
			success: function(data){
				if(data === 'deletou'){
					alert('Post Deletado com Sucesso!');
					location.reload();
				}else{
					alert('Algum erro aconteceu. O post não foi Deletado :/')
				}
			}
		})
	})


	table_posts.on('click', '#btn-editar', function(event){
		event.preventDefault();
		var id = $(this).attr('data-id');
		$.ajax({
			url : '/admin/post/editar/'+id,
			type : 'GET',
			success: function(data){
				console.log(data);
			}
		})
	})
/*fim documento*/ });

quando tento executar o código a seguir, nada acontece:

[...]
	table_posts.on('click', '#btn-editar', function(event){
		event.preventDefault();
		var id = $(this).attr('data-id');
		$.ajax({
			url : '/admin/post/editar/'+id,
			type : 'GET',
			success: function(data){
				edita_post.html('teste');
			}
		})
	})
/*fim documento*/ });

Alguma solução?

[William Bruno 1501]

Vc não pode duplicar IDs. Veja que esses botões aqui:

html+='<td><a href="#" id="btn-editar" data-id="'+data[key].id+'">Editar</a></td>';
html+='<td><a href="#" id="btn-deletar" data-id="'+data[key].id+'">Deletar</a></td>';

dentro do loop .each() estão incorretos.

 

Vc não pode ter mais de um elemento com o mesmo ID. Nesse caso, utilize classes:

html+='<td><a href="#" class="btn-editar" data-id="'+data[key].id+'">Editar</a></td>';
html+='<td><a href="#" class="btn-deletar" data-id="'+data[key].id+'">Deletar</a></td>';

E então:

table_posts.on('click', '.btn-editar', function(event){

Dai em diante, acompanhe pelo console de erros o que aparecer.

Ctrl + Shift + J no Firefox ou Chrome.

[Rai Siqueira 3]

@Willian mudei os ids dos botões para classes, porém a function do edita_post.html('teste') ainda não retorna nada

[William Bruno 1501]

E o que aparece no console ?

 

Debugou para ver até onde está indo ?

 

	table_posts.on('click', '.btn-editar', function(event){
                console.log('entrou no click');

		event.preventDefault();
		var id = $(this).attr('data-id');

               console.log('pegou o id:' + id);
		$.ajax({
			url : '/admin/post/editar/'+id,
			type : 'GET',
			success: function(data){
                                console.log('entrou no success');
				edita_post.html('teste');
			}
		})
	})

veja quais desses console.log() aparecem.

[Rai Siqueira 3]

Olha ai, Willian:

não acontece nada quando uso a var edita_post. Já revisei o html, está tudo correto, já fiz o find dentro do sucess, tmb não funciona...

[William Bruno 1501]

Então seu problema agora é o elemento de id: #form-atualizar-post

 

var edita_post		= table_posts.find("#form-atualizar-post");

Foque nisso. O elemento existe ? ele realmente é filho de table_posts ?

Está no html ?

[Rai Siqueira 3]

Já tentei como:

var container 		= $("#container"); //layout
var posts 		= container.find('#posts'); //painel
var table_posts		= posts.find('#table-posts'); //painel
var edita_post		= posts.find("#form-atualizar-post"); //painel

e assim também (trocando o posts.find por container.find):

var container 		= $("#container"); //layout
var posts 		= container.find('#posts'); //painel
var table_posts		= posts.find('#table-posts'); //painel
var edita_post		= container.find("#form-atualizar-post"); //painel

O elemento existe e esta assim -> #container->#posts->#table-posts->#form-atualizar-post.

Também já tirei de dentro do #table_post e coloquei apenas dentro do #posts (isso tudo no html)

[William Bruno 1501]

Poste um link para visualizarmos online teu html.

[Rai Siqueira 3]

Aí está meu html:

Bem vindo <?php echo $nome; ?>

<div id="posts">
	
	<table class="table table-striped table-hover" id="table-posts">
		<thead>
			<tr>
				<th>Titulo</th>
				<th>Editar</th>
				<th>Deletar</th>
			</tr>
		</thead>

		<tbody>
		</tbody>
	</table>

	<div id="form-atualizar-post">
		<div class="col-md-8">
		<form method="" action="">
			<div class="form-group">
			<input type="text" name="post-titulo" id="post-titulo" class="form-control input-large">
			</div>

			<div class="form-group">
			<input type="text" name="post-texto" id="post-texto" class="form-control input-large">
			</div>

			<div class="form-group">
			<input type="submit" name="atualizar" id="atualizar" class="btn btn-primary">
			</div>
		</form>
	</div>
	</div><!-- fim #atualizar-posts -->

</div><!-- fim #posts -->

[William Bruno 1501]

Pronto, respondido:

	<table class="table table-striped table-hover" id="table-posts">
	</table>

	<div id="form-atualizar-post">

os elementos são irmãos, então nunca que vc vai encontrar eles com .find().

 

Aliás, adote isso como prática para qualquer elemento que vc vá selecionar pelo ID: vc não precisa saber do pai dele, e sim, só dele:

 

var container 		= $("#container");
var posts 		= $('#posts');
var table_posts		= $('#table-posts');
var edita_post		= $("#form-atualizar-post");

Caso mesmo assim vc tenha problemas, poste um link para verificamos online.