Quiero que al seleccionar una imagen de la columna ESTADO de una tabla me cambie la imagen/icono dependiendo lo que elija en el modal creado en Bootstrap con dos botones /Boton1 o Boton2/. Si su estado inicial recogido de la base de datos (por una consulta query) es estado=1, que me pregunte en el modal si quieres cambiar el estado a estado=0 o estado2, y así sucesivamente por cada usuario/fila/ID.
No hace nada al clickear sobre cada boton, sí abre el modal al clickear sobre la imagen.
Código de la columna de la tabla:
echo "<td onclick=\"cambiar_estado(this);\" width=\"10%\" id=\"".$row['ID_OBLIGATORIO']."\" data-estado=\"".$row['estado']."\">" ?>
<!-- Columna ESTADO del usuario. -->
<center>
<?php
echo "<a data-toggle=\"modal\" data-target=\"#modalEstado\" style=\"cursor:pointer\">";
echo "<img src=\"/imagenes/".$row['estado'].".gif\">";
echo "</a>"; ?>
Código del modal:
<div class="modal fade" tabindex="-1" role="dialog" id="modalEstado">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Cambio de estados - Ventana emergente.</h4>
</div>
<div class="modal-body" style="background-color:#66D6F8;">
<p>
<center><b>¿Deseas cambiar el estado del usuario/ID?</b></center>
</p>
</div>
<div class="modal-footer">
<span style="float:left">
<button type="button" id="boton_exit" align="center" class="btn btn-default" data-dismiss="modal">Exit</button>
</span>
<button type="button" id="boton_uno" class="boton-estado btn-default">Boton 1</button>
<button type="button" id="boton_dos" class="boton-estado btn-default">Boton 2</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Código Javascript:
<script>
function cambiar_estado(row) {
var estado = $(row).data('estado');
var opcion1, opcion2, label1, label2;
if (estado == 1) {
opcion1 = 0;
label1 = "Inactivo";
opcion2 = 2;
label2 = "Baneado";
}else if (estado == 2){
opcion1 = 0;
label1 = "Inactivo";
opcion2 = 1;
label2 = "Activo";
}else if (estado == 0) {
opcion_ = 1;
label1 = "Activo";
opcion2 = 2;
label2 = "Baneado";
}
$('#boton_uno').attr('estado', opcion1);
$('#boton_dos').attr('estado', opcion2);
$('#boton_uno').html(label1);
$('#boton_dos').html(label2);
// $('#modal').modal();
}
$('.boton-estado').click(function(){
var estado = $(this).attr('estado');
console.log(estado);
});
</script>
cambiar_estado
?