1

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">&times;</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>&nbsp;&nbsp;&nbsp;
                    <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>
2
  • ¿Dónde llamas a tu función cambiar_estado? Commented el 18 nov. 2016 a las 10:00
  • Me faltó poner en la primera línea la llamada a la función {cambiar_estado}, perdón. echo "<td onclick=\"cambiar_estado(this);\" width=\"10%\" id=\"".$row['ID_OBLIGATORIO']."\" data-estado=\"".$row['estado']."\">" ?> Sigue sin reconocer los botones... me sale al clickear "undefined".
    – omaza1990
    Commented el 18 nov. 2016 a las 10:47

1 respuesta 1

2

A la pregunta le falta bastante información...

Voy a suponer que al pulsar sobre la fila que contiene el estado (la que muestras en PHP) se llama a cambiar_estado(row)... si es así, voy a suponer también que el estado está almacenado correctamente en $(row).data('estado').

Si hasta aquí voy bien, todo funciona bien excepto para el estado 0, en el que tienes un bug:

else if (estado == 0) {
            opcion_ = 1;

que debería ser:

else if (estado == 0) {
        opcion1 = 1;

Una vez corregido esto, aunque dices que no hace nada al pulsar cada botón, sí que lo hace. Escribe en la consola el estado correctamente. Si debería hacer algo más, y no lo hace, deberías completar la pregunta para reflejarlo (más código, más detalles de la implementación, etc).

Te dejo un jsfiddle, en el que he cambiado el console.log por un alert para hacerlo más evidente:

https://jsfiddle.net/zevane/6y02Lcmd/

EDIT: He cambiado el jsfiddle para reflejar los cambios en la pregunta original. Lo he adaptado un poco, pero el espíritu es el mismo, y funciona como esperas.

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – user227
    Commented el 18 nov. 2016 a las 13:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.