Tengo hecho un archivo index index.php
donde creo un formulario... os muestro el código de la columna ESTADO en la cual si pulsamos sobre la imagen nos abre un modal, preguntando qué estado queremos elegir.
En el archivo funciones.js
trato las posibilidades de ambos botones y verifico que funciona correctamente mostrándolo en consola.
Mi duda, ando algo perdido, es... ¿cómo puedo actualizar la imagen al hacer click en los botones para cambiar el estado? Es decir, que al seleccionar uno de los dos botones la imagen principal me cambie por el valor del botón seleccionado. Espero haberme explicado, si no ver mi código del link.
index.html
echo "<td onclick=\"cambiar_estado(this);\" width=\"06%\" 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\">"; //cursor:pointer -> estilo de dedo/raton encima de un link/evento.
echo "<img src=\"/imagenes/".$row['estado'].".gif\">"; //Cada ID tiene su imagen establecida(0.gif, 1.gif, 2.gif) dependiendo del estado mediante: $row["estado"];
echo "</a>"; ?>
</center>
<?php
echo "</td>";
?>
<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" name="boton_estado" class="boton-estado btn-default">Boton 1</button>
<button type="button" id="boton_dos" name="boton_estado" class="boton-estado btn-default">Boton 2</button>
Funciones.js
function cambiar_estado(row) {
//Conseguimos el estado actual.
var estado = $(row).attr('data-estado');
//Mostramos por consola el estado actual.
console.log("El estado inicial es: "+estado);
var opcion1, opcion2, label1, label2;
//Hacemos las diferentes comprobaciones de los estados y valores de los botones.
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) {
opcion1 = 1;
label1 = "Activo";
opcion2 = 2;
label2 = "Baneado";
}
//Añadimos el atributo VALOR al ID asignado.
$('#boton_uno').attr('estado', opcion1);
$('#boton_dos').attr('estado', opcion2);
//Añadimos el atributo HTML texto al ID asignado.
$('#boton_uno').html(label1);
$('#boton_dos').html(label2);
//Guardamos en una variable los valores que tenga el elemento id boton_uno o boton_dos.
var boton1 = document.querySelector("#boton_uno");
var boton2 = document.querySelector("#boton_dos");
//Cambiamos el color de fondo de los botones dependiendo de si su valor es: activo/inactivo/baneado.
if (estado == 0) {
boton1.style.backgroundColor = "green";
boton2.style.backgroundColor = "orange";
} else if (estado == 1) {
boton1.style.backgroundColor = "red";
boton2.style.backgroundColor = "orange";
} else if (estado == 2) {
boton1.style.backgroundColor = "red";
boton2.style.backgroundColor = "green";
}
//Conseguimos el estado posterior al hacer click en el correspondiente boton.
$('.boton-estado').click(function(){
var estado = $(this).attr('estado');
//Volvemos a mostrar por consola su valor actual.
console.log("El valor actual es: "+estado);
});
}
He probado con la siguiente instrucción pero no me cambia el valor:
$('.boton-estado').val('../imagenes/0.png');
Es decir: $('.nombre_del_id').val('ruta_imagen');
¿A qué se debe el error?