HTML buttons do not work - Javascript - AJAX


I want that when selecting an image of the STATE column of a table I change the image / icon depending on what you choose in the modal created in Bootstrap with two buttons / Button1 or Button2 /. If your initial state collected from the database (by a query query) is state = 1, ask me in the modal if you want to change the state to state = 0 or state2, and so on for each user / row / ID.

It does not do anything when clicking on each button, it opens the modal when clicking on the image.

Code in the table column:

echo "<td onclick=\"cambiar_estado(this);\" width=\"10%\" id=\"".$row['ID_OBLIGATORIO']."\" data-estado=\"".$row['estado']."\">" ?>
<!-- Columna ESTADO del usuario. -->
    echo "<a data-toggle=\"modal\" data-target=\"#modalEstado\" style=\"cursor:pointer\">";
        echo "<img src=\"/imagenes/".$row['estado'].".gif\">";
    echo "</a>"; ?>


Modal code:

<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 class="modal-body" style="background-color:#66D6F8;">
                        <center><b>¿Deseas cambiar el estado del usuario/ID?</b></center>

                <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>
                    <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>
            <!-- /.modal-content -->
        <!-- /.modal-dialog -->
    <!-- /.modal -->

Javascript code:

    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);


        // $('#modal').modal();

        var estado = $(this).attr('estado');
asked by omaza1990 18.11.2016 в 10:36

1 answer


The question is missing a lot of information ...

I'm going to assume that clicking on the row that contains the state (the one you show in PHP) is called cambiar_estado(row) ... if so, I'll also assume that the state is stored correctly in $(row).data('estado') .

If I'm doing fine here, everything works fine except for state 0, where you have a bug:

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

what should it be:

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

Once this has been corrected, although you say that it does not do anything when you press each button, it does. Write the status correctly in the console. If you should do something else, and you do not, you should complete the question to reflect it (more code, more details of the implementation, etc.).

I leave you a jsfiddle, in which I changed the console.log by an alert to make it more obvious:


EDIT: I have changed the jsfiddle to reflect the changes in the original question. I've adapted it a bit, but the spirit is the same, and it works as expected.

answered by 18.11.2016 в 11:07