tenho uma pequena duvida, nas paginas da minha aplicação vraptor eu tenho um table que faz o seguinte.
<tbody>
<c:forEach items="${produtoList}" var="produto">
<tr>
<td id="pCodigo">${produto.codigo}</td>
<td>${produto.nome}</td>
<td>${produto.descricao}</td>
<td>${produto.preco}</td>
<td>
<a href="<c:url value="/produto/editar/${produto.codigo}"/>">
<img alt="Editar Produto" src="<c:url value="/resources/img/icons/editar.png"/>">
</a>
</td>
<td>
<a id="deleteRow" href="#">
<img alt="Editar Produto" src="<c:url value="/resources/img/icons/lixeira.png"/>">
</a>
</td>
</tr>
</c:forEach>
</tbody>
e tenho um script assim:
$('#deleteRow').click(function(){
var pCodigo = document.getElementById("pCodigo").innerHTML;
var tr = $(this).addClass('row_selected');
oTable.fnDeleteRow(tr);
$.ajax({
url:'<c:url value="/util/delete/" />'+pCodigo,
success:function(data){
alert('Passou');
},
error:function(){
alert('Erro');
}
});
});
só que toda vez que na pagina do vraptor mostra os icones pra clickar, só funciona para a primeira linha , ou seja se eu tentar clicar na segunda linha essa açao nao ocorre, é pq ele so permite um id na mesma pagina ou nao tem nada haver? pq estou olhando meu html pelo browser e todos tem o id deleteRow
Vamos lá!
ID é um identifier, ou seja, um identificador. Para que você possa saber qual é o registro, você precisa dar um identificador UNICO.
Ou seja, vc está colocando “pCodigo” em TODAS as linhas… Isso é um erro gravíssimo.
O ID NUNCA pode repetir dentro de uma página HTML… Não importa nem se o elemento for diferente.
Por isso ele só pega o primeiro, pq ele só considera o primeiro elemento que aparece com esse ID. Para fazer o que você quer fazer, você vai precisar usar a class.
Primeiro:
Segundo:
$('#deleteRow').click(function(){
var self = $(this);
var pCodigo = self.parent().siblings('.pCodigo');// Está pegando o irmão do pai do elemento clicado que tem a class pCodigo.
var tr = self.addClass('row_selected');
oTable.fnDeleteRow(tr);
$.ajax({
url:'<c:url value="/util/delete/" />'+pCodigo,
success:function(data){
alert('Passou');
},
error:function(){
alert('Erro');
}
});
});
rafael, só que agora fiz a seguinte modificaçao.
$(document).ready(function() {
oTable = $('#produtoList').dataTable({
"sDom" : "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>",
"sPaginationType": "bootstrap"
});
});
function fnClickDeleteRow() {
var tr = $(this);
oTable.fnDeleteRow(tr);
}
<table id="produtoList" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Descrição</th>
<th>Preço</th>
<th>Editar</th>
<th>Excluir</th>
</tr>
</thead>
<tbody>
<c:forEach items="${produtoList}" var="produto">
<tr>
<td id="pCodigo">${produto.codigo}</td>
<td>${produto.nome}</td>
<td>${produto.descricao}</td>
<td>${produto.preco}</td>
<td>
<a href="<c:url value="/produto/editar/${produto.codigo}"/>">
<img alt="Editar Produto" src="<c:url value="/resources/img/icons/editar.png"/>">
</a>
</td>
<td>
<a id="deleteRow" href="#" onclick="fnClickDeleteRow();">
<img alt="Editar Produto" src="<c:url value="/resources/img/icons/lixeira.png"/>">
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
tipo agora coloquei em cima de uma function, agora ele elimina a linha, porem só faz uma vez, depois que eu elimino a linha e clicar em outro, nao elimina, ou seja se tiver 5 linhas, qualquer uma das 5 linhas é eliminada, porem se eu clicar novamente em uma das 4 que ficaram, ele nao elimina.
NAO FAÇA ASSIM!!! NUNCA use eventos dentro das tags (onclick).
Do jeito que tava estava certo.
Você continua com o ID ao invés da CLASS…
[quote=Rafael Guerreiro]Vamos lá!
ID é um identifier, ou seja, um identificador. Para que você possa saber qual é o registro, você precisa dar um identificador UNICO.
Ou seja, vc está colocando “pCodigo” em TODAS as linhas… Isso é um erro gravíssimo.
O ID NUNCA pode repetir dentro de uma página HTML… Não importa nem se o elemento for diferente.
Por isso ele só pega o primeiro, pq ele só considera o primeiro elemento que aparece com esse ID. Para fazer o que você quer fazer, você vai precisar usar a class.
Primeiro:
Segundo:
$('#deleteRow').click(function(){
var self = $(this);
var pCodigo = self.parent().siblings('.pCodigo');// Está pegando o irmão do pai do elemento clicado que tem a class pCodigo.
var tr = self.addClass('row_selected');
oTable.fnDeleteRow(tr);
$.ajax({
url:'<c:url value="/util/delete/" />'+pCodigo,
success:function(data){
alert('Passou');
},
error:function(){
alert('Erro');
}
});
});[/quote]
tá rafael, mais ai esse $(’#deleteRow’) é o id de ou seja ele so está setando para a primeira linha do como modificar para que ele possa pegar de qualquer linha? e especificando somente o ultimo de excluir.
no caso, se eu trocar por class ai em vez de fica $(’#deleteRow’) fica como? fica $(’.deleteRow’).click…
testei, só que tem um problema ele só elimina a PRIMEIRA linha, mesmo se eu clicar na segunda linha, ele elimina a Primeira Linha.
[code]
[/code]
e outra, esse var pCodigo = self.parent().siblings(’.pCodigo’); ele vai pegar o valor do id que esta no html?
Você precisa pegar o inner html desse cara
Faça assim:
modifiquei, mais dá uma olhada ae o outro problema, que ele só está excluindo a primeira linha e depois de excluir essa linha se eu clicar novamente ele nao exclui nada.
é como se estivese setando esses class somente para a primeira linha do meu forEach
Você está passando self para o dataTables…
Precisa passar o TR:
“Vou testar sua modificaçao”, atualmente está da seguinte forma.
rafael, fiz o seguinte teste, coloquei agora 3 linhas, e ele so esta excluindo sempre a primeira linha, por exemplo
1-
2-
3-
se eu clicar em excluir qualquer um desses ele exclui a 1, ai fica
2-
3-
se eu clicar em excluir em qualquer um desses, ele exclui a 2 ai fica
3-
e nao exclui a 3 pq nao tem uma linha acima.
rafael, implementei sua modificaçao, e está exatamente como informei na resposta acima, dá uma lida.
Tente ver os parâmetros que estão sendo enviados para o server.
Coloque alert para descobrir os valores que estão sendo passados nas configurações e veja a documentação: http://datatables.net/ref
fiz essa modificaçao
var self = $(this);
var tr = self.closest('tr');
var pCodigo = self.parent().siblings('.pCodigo').html;
oTable.fnDeleteRow(tr);
quando passo o mouse em cima do debug da variavel tr, ele me dá a linha que eu realmente quero, eu axo que possa ser que dentro do fnDeleteRow tem que passar algo a mais, vou dar uma olhada.
rafael. consegui, segue a modificaçao.
$('.deleteRow').click(function(){
var self = $(this);
var tr = self.closest('tr');
var pCodigo = self.parent().siblings('.pCodigo').html;
oTable.fnDeleteRow(tr[0]); //estava vendo a parte que ele insere a posiçao e testei essa inserção e está funcionando corretamente
//
o var pCodigo = self.parent().siblings(’.pCodigo’).html;
nao está recebendo o html do codigo nao ;/
alguem saberia como receber? estou debugando e quando chega na parte do pCodigo ele simplesmente desaparece do firebug como se o codigo nao estivesse correto.
ps: consegui, ficou da seguinte forma: var codigo = self.parents(‘td’).siblings(’.pCodigo’).html();