Vou te explicar.
Primeiro:
tr[0] deu certo por que ele retorna uma instancia do Javascript e não do jQuery. Ou seja, o método do dataTables espera uma instancia do javascript. Isso é a mesma coisa que tr.get(0)…
Segundo:
.html() é um método e não um atributo.
ok, vou tentar modificar para deixar da maneira correta.
sem querer abusar, você ja viu alguma vez como efetuar um update de uma row, excluir ja consegui, queria saber se tem como efetuar o update, mais a api nao está me ajudando muito.
Você vai ter que fazer isso manualmente mesmo. Olhe na apostila FJ-28 o exemplo que eles dão lá. Vc vai ter que abrir um form, carregar os dados depois persistir.
na verdade não tem, ja terminei de ver ela, é pq estou usando o datatable do jquery e tenho um usuario que tem a opçao ativo/inativo quando clica na bolinha verde, ela fica vermelha e vice versa, só que da forma que quero fazer é somente atualizar a linha, ou seja vai enviar a requisiçao via ajax e somente vai dar um update na linha, porem da forma que é feita na fj28 ele faz um request para a mesma pagina, e isso é ruim pra mim pq se eu tiver 400 usuarios, ai eu filtro no datatable, quando ativar, ele mostra novamente a pagina com os 400 usuarios, em vez de atualizar e deixar o datatable mostrando somente a mesma linha que modifiquei.
Veja se isso responde.
http://datatables.net/ref#fnUpdate
Você precisa começar a procurar nas docs para ver se não encontra o que precisa.
na verdade eu até encontrei, mais o maior problema que encontrei é:
oTable.fnUpdate( ‘Example update’, 0, 0 );
‘’ esse texto é o que vai ser atualizado.
0 - esse zero do meio é a linha TR,
0 - esse ultimo zero é o td da linha,
o problema é que nao sei pegar a posiçao utilizando jquery, ou seja, teria que pegar esses numeros dinamicamente e não conheço a forma.
o segundo problema é que vou ter que trocar uma imagem e nao uma string.
e o terceiro problema é que novamente, se eu clicar uma vez, funciona, se eu clicar novamente, nao funciona.
e mesmo assim rafael, queria agradecer, você ja adiantou meus estudos e muito.
o problema é que nao sei pegar a posiçao utilizando jquery, ou seja, teria que pegar esses numeros dinamicamente e não conheço a forma.
$(‘selector’).index(); http://api.jquery.com/index/
o segundo problema é que vou ter que trocar uma imagem e nao uma string.
É o botão de verde para vermelho e vice-versa? Existe uma solução bem elegante para isso.
e o terceiro problema é que novamente, se eu clicar uma vez, funciona, se eu clicar novamente, nao funciona.
Olhe se vc não está usando e outras coisas assim…
bem, então vamos por partes
a linha ja estou conseguindo colocar a partir do tr[0] que fiz acima, agora vou tentar pegar o index do td respectivo.
e se der, mande o material de como mudar o verdinho pro vermelho e vice versa, na verdade estou fazendo exatamente isso, só que com os meus proprios icones.
Nesse caso eu prefiro te ensinar por aqui. Volte quando conseguir essa parte.
Pronto rafael, consegui.
segue o codigo completo da pagina em questão
meu table:
[code]
| # | <fmt:message key=“form.nome”/> | <fmt:message key=“form.login”/> | <fmt:message key=“form.senha”/> | <fmt:message key=“usuario.form.permissao”/> | <fmt:message key=“usuario.form.ativo”/> |
|---|---|---|---|---|---|
| ${usuario.codigo} | ${usuario.nome} | ${usuario.login} | ${usuario.senha} |
<img src="<c:url value="/resources/img/icons/ROLE_ADMINISTRADOR_${usuario.permissao.contains(‘ROLE_ADMINISTRADOR’)}.png"/>" alt=“Administrador”> <img src="<c:url value="/resources/img/icons/ROLE_USUARIO_VIP_${usuario.permissao.contains(‘ROLE_USUARIO_VIP’)}.png"/>" alt=“Usuario Vip”> |
<img alt=“Ativar” src="<c:url value="/resources/img/icons/objeto_ativo_${usuario.ativo}.png"/>"> |
meu script
$(document).ready(function() {
$('.updateRow').click(function(){
var self = $(this);
var td = self.closest('td').index();
var tr = self.parents('tr');
var codigo = self.parents('td').siblings('.pCodigo').html();
$.ajax({
url:'<c:url value="/usuario/ativar/" />'+codigo,
type: 'POST',
success:function(){
oTable.fnUpdate( 'Example update', tr.get(0), td);
},
error:function(){
alert('Erro');
}
});
});
o script está modificando exatamente no local do
<td>
<a class="updateRow" href="#">
<img alt="Ativar" src="<c:url value="/resources/img/icons/objeto_ativo_${usuario.ativo}.png"/>">
</a>
</td>
que é onde eu quero mudar.
Para alternar entre imagens de forma elegante.
Primeiro passo:
Abra um editor de imagens e coloque as duas imagens lá, uma ao lado da outra. Salve como icon_full…
Segundo passo:
Pegue o tamanho de cada imagem.
Terceiro passo:
remova a tag img da tag “a”…
Quarto passo:
Você vai precisar pensar em 2 nomes de classes CSS para quando vc chamar uma, ele coloca uma imagem, quando vc chamar a outra, ele coloca outra imagem.
Por enquanto vamos até aqui. Mas tem mais passos ainda.
[quote=Rafael Guerreiro]Para alternar entre imagens de forma elegante.
Primeiro passo:
Abra um editor de imagens e coloque as duas imagens lá, uma ao lado da outra. Salve como icon_full…
Segundo passo:
Pegue o tamanho de cada imagem.
Terceiro passo:
remova a tag img da tag “a”…
Quarto passo:
Você vai precisar pensar em 2 nomes de classes CSS para quando vc chamar uma, ele coloca uma imagem, quando vc chamar a outra, ele coloca outra imagem.
Por enquanto vamos até aqui. Mas tem mais passos ainda.[/quote]
cada imagem tem 16x16 e 16x16 cada, então eu fiz uma imagem 32x16 e coloquei uma ao lado da outra.
Perfeito!
Vai funcionar assim: vamos ter uma classe css chamada icon-editable.
A ideia é a seguinte, quando trocarmos a classe da tag a, o browser vai mover essa imagem para o lado e vai mostrar só o que tiver dentro da tag a… Ou seja, ele “troca” de imagem.
A vantagem dessa abordagem é que como usamos apenas 1 imagem para fazer esse efeito, tudo já vem carregado, além de minimizarmos a quantidade de requisições.
Então precisamos criar essa classe icon-editable que vai preparar a tag a para fazer esse efeito e depois teremos mais 1 classe que vai mudar o ícone que está sendo mostrado.
a.icon-editable {
overflow: hidden; /*Não mostra o que estiver fora da tag.*/
text-indent: 100%; /*Identa o texto que estiver dentro para fora da tag, a fim de ser escondido.*/
display: inline-block; /*Para conseguirmos definir uma altura e largura, o elemento não pode ser inline.*/
/*O mesmo tamanho de 1 ícone.*/
width: 16px;
height: 16px;
/*Muda o box-sizing para empurrarmos o conteúdo para fora da tag.*/
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 16px; /*É o mesmo valor da altura*/
background-image: url(img/icon_full.png); /*Aqui entra a imagem com os dois ícones.*/
background-repeat: no-repeat; /*Não queremos que o background repita.*/
background-position: 0 0; /*Por default, já mostra a primeira imagem.*/
}
a.icon-editable.inativo {
background-position: -16px 0; /*Se ele tiver essa classe inativo (mude o nome), ele leva a imagem do background 16 pixels para a esquerda.*/
/*Nesse caso é -16 por queremos levar a imagem para a esquerda e não o elemento para a direita...*/
}E ai, você precisa adicionar a classe .icon-editable na tag a e, quando for inativo, adiciona a class .inativo que ele vai mudar a imagem de lugar.
Assim dá a impressão de que ela está sendo trocada na hora, ela não vai precisar ser carregada depois.
mais ai vejo um probleminha:
background-position: 0 0; /Por default, já mostra a primeira imagem./
se por acaso a primeira imagem for o verde, ai eu vou, clico e mudo para vermelho(inativo), se eu atualizar a pagina ele me retorna verde novamente não? sendo que era pra estar vermelho.
Por esse motivo mesmo eu disse isso:
então, rafael, antes de implementar esse teu, eu tava matutando ake e tava fazendo da seguinte forma:
$(document).ready(function() {
$('.updateRow').click(function(){
var self = $(this);
var url = self.children().attr("src");
var td = self.closest('td').index();
var tr = self.parents('tr');
var codigo = self.parents('td').siblings('.pCodigo').html();
$.ajax({
url:'<c:url value="/usuario/ativar/" />'+codigo,
type: 'POST',
success:function(){
if(url.indexOf("true") >= 0 ) {
oTable.fnUpdate(
'<a class="updateRow" href="#">'+
'<img alt="Ativar" src="<c:url value="/resources/img/icons/objeto_ativo_false.png"/>">'+
'</a>', tr.get(0), td);
}
if(url.indexOf("false") >= 0 ) {
oTable.fnUpdate(
'<a class="updateRow" href="#">'+
'<img alt="Ativar" src="<c:url value="/resources/img/icons/objeto_ativo_true.png"/>">'+
'</a>', tr.get(0), td);
}
},
é errado?
pq vou comentar aqui essa parte e implementar a forma que vc está falando.
Isso aqui vai simplificar:
if(url.indexOf("true") >= 0 ) {
self.addClass('inativo');
// oTable.fnUpdate(
// '<a >'+
// '<img /resources/img/icons/objeto_ativo_false.png"/>">'+
// '</a>', tr.get(0), td);
}
if(url.indexOf("false") >= 0 ) {
self.removeClass('inativo');
// oTable.fnUpdate(
// '<a >'+
// '<img /resources/img/icons/objeto_ativo_true.png"/>">'+
// '</a>', tr.get(0), td);
}
utilizando essa estrutura que você me falou do editable neh?
Sim. Eu atualizei a minha resposta, agora está certo…
mais vou ter que editar aqui pq essa url está pegando o src de IMG então vou ter que adaptar para esses class que vc informou. Porque nesse seu exemplo não tem img.