Create pop-up bootstrap modal for each state with buttons

0

I have a table where there is a column called " estado ", each user / row / id has a status as a series, see ( 0,1,2 ). The description of the states is: 0-inactive 1-active 2-banned. When loading the page I get the current status thanks to a conexión vía mysql a la bbdd.

What I want is: when clicking on an image / link of user X of the status column, I asked if you want to change it to the other two remaining states, choose which one, and activate it.

For example: as a series the user / ID 38 has status = 1 (active), I want to click on his image (a href) and he asks me with two buttons if I want to change to the state (button0) or to the state (button2) ). And I updated the result.

Code: I think the ruling is here:

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

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
    <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">
                <p>¿Deseas cambiar el estado del usuario/ID?</p>
            </div>    
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="boton_uno" class="boton-estado btn-primary">Boton 1</button>
                <button type="button" id="boton_dos" class="boton-estado btn-primary">Boton 2</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
asked by omaza1990 17.11.2016 в 15:58
source

1 answer

1

To do this, you must identify what state your row has.

There are 3 scenarios:

  • If you have status 0 (inactive) you can change to: Active (1) or Banned (2)
  • If you have status 1 (active) you can change to: Inactive (0) or Banned (2)
  • If you have status 2 (banned) you can change to: Inactive (0) or Active (1)

I do not know your complete code but what I would do would be the following:

In the first instance you must create only ONE Modal, in your code you create a footer for each row that you are going through something like this:

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
      <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">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" id="boton_uno" class="btn_estado btn-primary">Boton 1</button>
            <button type="button" id="boton_dos" class="btn_estado btn-primary">Boton 2</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

This modal has 3 buttons the first to close and the other two that you ask to change the state. Important add id to identify them and add the class btn-estado now explain why.

When you click on row you call the function cambiar_estado within this function you must rescue the current status of your row and verify what options to deliver, something like this:

<script>
    function cambiar_estado(row) {
        var estado = $(row).data('estado');
        var opcion_estado_1;
        var opcion_estado_2;
        var label_estado_1;
        var label_estado_2;
        if(estado == 1){
            opcion_estado_1 = 0;
            label_estado_1 = "Inactivo";
            opcion_estado_2 = 2;
            label_estado_2 = "Baneado";
        }else if(estado == 2){
            opcion_estado_1 = 0;
            label_estado_1 = "Inactivo";
            opcion_estado_2 = 1;
            label_estado_2 = "Activo";
        }else if(estado == 0){
            opcion_estado_1 = 1;
            label_estado_1 = "Activo";
            opcion_estado_2 = 2;
            label_estado_2 = "Baneado";
        }
        $('#boton_uno').attr('estado', opcion_estado_1);
        $('#boton_dos').attr('estado', opcion_estado_2);
        $('#boton_uno').html(label_estado_1);
        $('#boton_dos').html(label_estado_2);
        $('#myModal').modal();
    }

$('.btn-estado').click(function(){
    //Rescatas el atributo estado seteado en el click del row
    var estado = $(this).attr('estado');
    console.log(estado);
})
</script>

This function does what it does to verify the current state, save in variables opcion_estado_1 and opcion_estado_2 the possible values that the user can edit. (In addition to the labels to change the text of the button, this is in case you need it). Then set the buttons with id boton_uno and boton_dos an attribute called estado . And also the labels that you name above and lift the modal $('#myModal').modal();

The modal will carry the content you want plus these buttons. Then I capture the event click in any element with class btn-estado , of that button I get the value estado of the attribute and there you should edit the state of your object, making the call to ajax or as You are doing.

$('.btn-estado').click(function(){
    //Rescatas el atributo estado seteado en el click del row
    var estado = $(this).attr('estado');
})

EDITING

For it to work properly, you must first in your <td> define an attribute called estado

 <td onclick="cambiar_estado(this);" id="<?php echo $row['ID_OBLIGATORIO']?>" data-estado="<?php echo $row['estado']?>">

Then in the function cambiar_estado

Here you get the value of data-estado , do what I explained earlier and everything will work perfectly. Once you click on one of the buttons you get the new status.

    
answered by 17.11.2016 / 16:30
source