Isso mesmo. Pode usar o hasClass do jQuery:
ah, verdade, deixa eu implementar aqui e efetuar testes, qualquer coisa quando empacar aqui volto.
mais ai vai ter um probleminha.
atualmente eu faço o seguinte:
ou seja, ele ja vai setar a imagem inicial se for true ou não.
da forma que estamos fazendo, não tem uma “logica” para setar, de forma que TODOS vão começar com a primeira imagem que no caso é botao vermelho.
há ideia é que começasse com o img setando essa parte: /objeto_ativo_${usuario.ativo}.png
e depois fizesse esse jogo de moficiaçoes, pq caso contrario se deixar da seguinte maneira:
<td class="activeDesactive">
<a class="updateRow icon-editable" href="#">
</a>
</td>quando inicialmente ele for fazer o ForEach, como vai setar inicialmente a imagem se ele em momento algum sabe se é true ou false para setar o inativo ou nao. a unica maneira que pensei aqui agora é fazer o seguinte:
<c:if test="{usuario.ativo}"> //true
<td class="activeDesactive">
<a class="updateRow icon-editable active" href="#">
</a>
</td>
</c:if>
<c:if test="{usuario.ativo}"> //false
<td class="activeDesactive">
<a class="updateRow icon-editable inactive" href="#">
</a>
</td>
</c:if>obs estou usando active e inactive no class somente para ilustrar a situação, no caso é só a inserção do inativo ou remoçao da mesma class.
e depois que está setado e a modificaçao é visual, ai entraria o script, alguma ideia?
Que tal o operador ternário??
[code]<c:if test="{usuario.ativo}"> //true
<td class=“activeDesactive”>
<a class=“updateRow icon-editable active” href="#">
</a>
</td>
</c:if>
<c:if test="{usuario.ativo}"> //false
<td class=“activeDesactive”>
<a class=“updateRow icon-editable inactive” href="#">
</a>
</td>
</c:if> [/code]
Fica assim:
[code]
<td class=“activeDesactive”>
<a class=“updateRow icon-editable ${usuario.ativo ? ‘active’ : ‘inactive’}” href="#">
</a>
</td> [/code]
show de bola cara, não sabia que podia fazer isso. UAHSUAHs, vivendo e aprendendo.
seguinte, a parte lógica inicial para mostrar as imagens já está funcionando.
vou partir agora para corrigir o javascript e ver se está funcionando corretamente.
edit:
então rafael, meu codigo ficou da seguinte maneira:
$(document).ready(function() {
$('.updateRow').click(function(){
var self = $(this);
var td = self.closest('td').index(); //provavelmente nao será mais usado.
var tr = self.parents('tr'); //provavelmente tbm nao será mais usado
var codigo = self.parents('td').siblings('.pCodigo').html();
$.ajax({
url:'<c:url value="/usuario/ativar/" />'+codigo,
type: 'POST',
success:function(){
if(self.hasClass('ativo')) {
//preciso primeiro remover ativo para adcionar o inativo?
self.addClass('inativo');
}
if(self.hasClass('inativo')) {
//preciso primeiro remover inativo para adicionar ativo?
self.addClass('ativo');
}
},
error:function(){
alert('Erro');
}
});
});
});seguinte rafael, está funcionando sim, porem só o primeiro click, no segundo ele ja nao muda o icone.
$(document).ready(function() {
$('.updateRow').click(function(){
var self = $(this);
var td = self.closest('td').index(); //provavelmente nao será mais usado.
var tr = self.parents('tr'); //provavelmente tbm nao será mais usado
var codigo = self.parents('td').siblings('.pCodigo').html();
$.ajax({
url:'<c:url value="/usuario/ativar/" />'+codigo,
type: 'POST',
success:function(){
if(self.hasClass('ativo')) {
self.removeClass('ativo');
self.addClass('inativo');
}
if(self.hasClass('inativo')) {
self.removeClass('inativo');
self.addClass('ativo');
}
},
error:function(){
alert('Erro');
}
});
});
});Vamos lá…
Use somente uma classe e coloque uma no default… e ai você usa o toggle do jquery, ele vai trocar para você.
Sugiro você trocar a imagem antes de acionar o ajax. Assim o user tem a sensação de velocidade…
Tente descobrir o porque só estar funcionando no primeiro click… Ele está indo para o server? Está inativando/ativando o registro?
fiz a seguinte modificação e está funcionando corretamente com 1 ou N clicks. xD
$(document).ready(function() {
$('.updateRow').click(function(){
var self = $(this);
var codigo = self.parents('td').siblings('.pCodigo').html();
$.ajax({
url:'<c:url value="/usuario/ativar/" />'+codigo,
type: 'POST',
success:function(){
if(self.hasClass('inativo')) {
self.removeClass('inativo');
} else {
self.addClass('inativo');
}
},
error:function(){
alert('Erro');
}
});
});
});<td class="activeDesactive">
<a class="updateRow icon-editable ${usuario.ativo ? '' : 'inativo'}" href="#"></a>
</td>quanto a trocar a imagem antes do ajax, como ficaria? no caso dentro de success não teria nenhuma informação?
Isso mesmo, dentro do success não teria nada. USE O TOGGLECLASS que eu mostrei em cima…
Sugiro vc colocar o toggleclass no error também, assim, quando der erro, vc volta para o que estava.
no caso toggleClass no lugar do remove class e add CLass? mais tipo, so preciso colocar toggleClass no error, se a mudança estiver fora do sucess correto?
Sim.
Sim.
eu acho melhor deixar no success mesmo, pq garante que a informação foi realmente modificada, e a diferença não é tão bruta assim.
vou partir para o editar usuário, vai ser uma nova aventura kkAUSHAUsh
obrigado pela ENORME ajuda.
um ultimo probleminha:
possuo o seguinte javascript:
$(document).ready(function(){
$('#addEmpresa').on('click', function(){
var self = $('#codigoDaEmpresa');
var selecionado = self.val(); // pega o codigo digitado no input
$.ajax({
url:'<c:url value="/usuario/addEmpresaTemp/" />'+selecionado,
type: 'POST',
dataType:'json',
success:function(data){
var options = [];
for (var i = 0; i < data.length; i++) {
options.push('<tr>');
options.push('<td class="pCodigo">'+data[i].codigo+'</td>');
options.push('<td>'+data[i].descricao+'</td>');
options.push('<td>'+data[i].cnpj+'</td>');
options.push('<td style="text-align:center;">'+
'<a style="text-align:center;" class="deleteRow" href="#">'+
'<img alt="Excluir Empresa" src="<c:url value="/resources/img/icons/lixeira.png"/>">'+
'</a>'+
'</td>');
options.push('</tr>');
}
$('#povoarEmpresa').html(options.join(''));
},
error:function(){
alert('Erro');
}
});
});
});
se vc prestar atenção estou montando nessa pagina esse td
options.push('<td style="text-align:center;">'+
'<a style="text-align:center;" class="deleteRow" href="#">'+
'<img alt="Excluir Produto" src="<c:url value="/resources/img/icons/lixeira.png"/>">'+
'</a>'+
'</td>');
que será um icone para excluir a linha dessa tabela.
podem quando monta, ele fica tudo direitim como tem que ficar, porem quando eu clico nessa imagem era pra acionar o seguinte javascript:
// remover empresa da tabela e da lista
$(document).ready(function() {
$('.deleteRow').click(function(){
var self = $(this);
var tr = self.closest('tr');
var codigo = self.parents('td').siblings('.pCodigo').html();
$.ajax({
url:'<c:url value="/usuario/delEmpresaTemp/" />'+codigo,
type: 'POST',
success:function(){
alert('chegou');
tr.remove();
},
error:function(){
alert('Erro');
}
});
});
coloquei pra debugar e ele nao está acionando esse javascript