I cant get different values from different buttons with the same Class

Question

Hi everyone and thanks in advance.

I'm trying to get a modal to see the different editions that have been made on a computer. I have the following button structure, the green button called "Ficha" opens a modal with a PC specifications. T First Modal called "ventanaFichaPortatil"

The modal that opens is as follows Second modal called ventanaControlCambios

Each "Ver cambios" button contains the identifier of the PC that we want to view changes. So far so good. The problem is when I try to retrieve the id of the button for the second time, that is, the first time it catches it well, but if we open another modal from another PC, the ID goes out the first time. The function that I use is the following

    $("button[id=verControlCambios]").click(function(){
    var identificativo =  $(this).data('id');
    alert(identificativo);
    // This is to open the second modal
    var modal = $('#ventanaControlCambios');
    $('#ventanaControlCambios').modal('show');
    $('#ventanaControlCambios').css("max-height", $(window).height());
    $('#ventanaControlCambios').css("overflow-y", "scroll");
    $('#ventanaControlCambios').modal('handleUpdate');
});

Identificativo always has the id of the computer on which we click first. If you need more information or whatever, please ask me

HTML CODE

    <div class='modal fade' id='ventanaControlCambios' tabindex='-1' role='dialog' aria-labelledby='#ventanaControlCambios'>

          <div class='modal-dialog'>
                <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' id='tituloFicha'></h4>
                    </div>
                    <div id='filas' class='modal-body'>

                    </div>
                    <div class='modal-footer'>
                        <center>
                        <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='fa fa-times'></i> Cerrar</button>
                        </center>
                    </div>
                </div>
            </div>
        </div>






    <div class='modal fade' id='ventanaFichaPortatil' tabindex='-1' role='dialog' aria-labelledby='#ventanaFichaPortatil' aria-hidden='true'>
        <div class='modal-dialog'>
            <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' id='tituloFicha'></h4>
                    </div>
                <div class='modal-body'>
                    <center>
                    <h3 class='media-heading' id='nombreFichaPortatilV'></h3>
                    <h4 class='media-heading' id='MarcaYModeloV'><small></small></h4>
                    <h4 class='media-heading' id='EmpleadoV'><small></small></h4>
                    <span><strong></strong></span>
                        <span class='label label-info' id='serialnoV'></span>
                    </center>
                    <hr>
                    <center>
                    <p class='text-left'><strong>Memoria RAM: </strong>
                        <span class='label label-success' id='ramV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Procesador: </strong>
                        <span class='label label-success' id='procesadorV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Capacidad HDD: </strong>
                        <span class='label label-success' id='discoDuroV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Sistema Operativo: </strong>
                        <span class='label label-success' id='soV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Activo fijo: </strong>
                        <span class='label label-success' id='activoFijoV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Fecha compra: </strong>
                        <span class='label label-success' id='fechaCompraV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>ClaveBIOS: </strong>
                        <span class='label label-success' id='ClaveBIOSV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Proveedor: </strong>
                        <span class='label label-success' id='ProveedorV'></span>
                    </p>
                    </center>
                    <center>
                    <p class='text-left'><strong>Ubicacion: </strong>
                        <span class='label label-success' id='UbicacionV'></span>
                    </p>
                    </center>
                </div>
                <div class='modal-footer'>
                    <center>
                    <button id='verControlCambios' data-relatedtarget='#wop' data-target='#ventanaControlCambios' type='button' class='vCC btn btn-default'><i class='fa fa-table'></i> Ver cambios</button>
                    <a id='QREquipoPC' href='' target='_blank'> <button type='button' class='btn btn-default'><i class='fa fa-qrcode'></i> QR</button> </a>
                    <a id='fichaCompletaEquipoPC' href='' target='_blank'> <button type='button' class='btn btn-default'><i class='fa fa-file-pdf-o'></i> Ficha completa</button> </a>
                    <a id='pdfEquipoPC' href='' target='_blank'> <button type='button' class='btn btn-warning'><i class='fa fa-folder-open-o '></i> PDF</button> </a>
                    <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='fa fa-times'></i> Cerrar</button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</div>
      </br>
      <div class='modal-footer'>
        <button type='button' class='btn btn-danger' data-dismiss='modal'><i class='fa fa-times'></i> Cerrar</button>
        <button type='button' class='btn btn-success btnControlCambios' id='editarPortatil'><i class='fa fa-floppy-o'></i> Guardar</button>
      </div>
    </div>
  </div>
</div><div class='container'><h1 id='tituloEquipamiento'><span class='glyphicon glyphicon-list-alt' aria-hidden='true'></span> Lista de equipamiento - Equipos activos</h1>
      </br></br>
    <div class='table-responsive'><table class='table table-hover table-condensed' id='tablaEquiposCyndea'>
      <thead>
        <tr>
          <th>Identificativo</th>
          <th>Marca y modelo</th>
          <th>Nombre Equipo</th>
          <th>Empleado</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody id='busqueda'><tr><td> 1</td>
      <td> MARCA MODELO</td>
      <td> </td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='1'
        data-mm='MARCA MODELO'
        data-ram=''
        data-prc=''
        data-hdd=''
        data-so=''
        data-ne=''
        data-sno=''
        data-fcm='2016-04-07'
        data-bs='' 
        data-emp='' 
        data-act=''
        data-pve=''
        data-ub=''
        >Ficha</button>



      <button value='1' id='desactivarEquipo' class='btn btn-danger .submit' value='1' data-nombre=''>Desactivar</button>
      </td></tr><tr><td> 2</td>
      <td> MARCA MODELO</td>
      <td> CYNDEA 21</td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='2'
        data-mm='MARCA MODELO'
        data-ram='4'
        data-prc='CORE i5'
        data-hdd='500'
        data-so='Windows 7'
        data-ne='CYNDEA 21'
        data-sno='9832642983'
        data-fcm='2014-07-08'
        data-bs='cyndea01' 
        data-emp='' 
        data-act='1983246'
        data-pve='Proveedor D eIT'
        data-ub='Open space 1'
        >Ficha</button>



      <button value='2' id='desactivarEquipo' class='btn btn-danger .submit' value='2' data-nombre='CYNDEA 21'>Desactivar</button>
      </td></tr><tr><td> 39</td>
      <td> HP ProDesk 400 G2</td>
      <td> Cyndea5216</td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='39'
        data-mm='HP ProDesk 400 G2'
        data-ram='88gb'
        data-prc='i9'
        data-hdd='2TB'
        data-so='W11'
        data-ne='Cyndea5216'
        data-sno='61561561sd561d56s51'
        data-fcm='2017-04-04'
        data-bs='as4da23sd' 
        data-emp='' 
        data-act='351561c'
        data-pve='ITS Duero'
        data-ub='Prueba'
        >Ficha</button>



      <button value='39' id='desactivarEquipo' class='btn btn-danger .submit' value='39' data-nombre='Cyndea5216'>Desactivar</button>
      </td></tr><tr><td> 40</td>
      <td> HP ProDesk 400 G2</td>
      <td> Cyndea526</td>
      <td> </td>
      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='40'
        data-mm='HP ProDesk 400 G2'
        data-ram='88gb'
        data-prc='i9'
        data-hdd='2TB'
        data-so='W11'
        data-ne='Cyndea526'
        data-sno='61561561sd561d56s51'
        data-fcm='2017-04-04'
        data-bs='as4da23sd' 
        data-emp='' 
        data-act='351561c'
        data-pve='ITS Duero'
        data-ub='Prueba'
        >Ficha</button>




      <td id='botones'>
      <button  class='btn btn-primary .submit' data-toggle='modal' data-target='#ventanaFichaPortatil' 
        data-id='37'
        data-mm='OnePlus 3T'
        data-ram='574'
        data-prc='577'
        data-hdd='579'
        data-so='581'
        data-ne='585'
        data-sno='587'
        data-fcm='2017-03-27'
        data-bs='589' 
        data-emp='' 
        data-act='583'
        data-pve='sdoik'
        data-ub='Taller de informática'
        >Ficha</button>



      <button value='37' id='desactivarEquipo' class='btn btn-danger .submit' value='37' data-nombre='585'>Desactivar</button>
      </td></tr></tbody></table><div id='botonesTabla'></div></div></div></body> 

</html>

I have put the part that I think is necessary, if you need more, do not doubt to ask me — V.Vallejo, Apr 05 '17 at 11:05

score 0 · Answer 1 · edited May 23 '17 at 12:25

0

Change click to on. Reason: https://stackoverflow.com/a/11878976/6429774

Use classes instead id's. Use an id only once.

$("body").on('click', 'button[class=verControlCambios]', function(e){
    var identificativo =  $(this).data('id');
    console.log(identificativo);
    // other code
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="verControlCambios" data-id="test-button1">button1</button>
<button class="verControlCambios" data-id="test-button2">button2</button>

edited May 23 '17 at 12:25

Community

1
1

answered Apr 05 '17 at 10:16

Philip

3,486
1
24
37

Thank you very much for the answer Phil, after several tests, I changed your function according to my code, but still do the same. To the button I have put a class called verCon ---------------------------------> $(".verCon").on('click', $('.verCon'), function(e){ – V.Vallejo Apr 05 '17 at 11:01

score 0 · Accepted Answer · answered Apr 19 '17 at 09:53

0

As I have not been able to put the data in the modal, I have finally done it in new browser tab, using a new php file.

Thank you very much

answered Apr 19 '17 at 09:53

V.Vallejo

17
1
1
9

I cant get different values from different buttons with the same Class

2 Answers2