Grab clicked client id and write to a variable to recover in a modal

Question

My PHP code has a while that lists registered users, from a query MYSQL.

This list of users shows the photo, the id, the name and a link to open a modal. Follow the code of while:

<?php
  error_reporting(E_ALL ^ E_DEPRECATED);
  $link = mysql_connect("localhost","root","") or die ("Não foi possível conectar servidor");
  $banco = mysql_select_db('rscc-db', $link) or die ("Impossível conectar banco de dados");
  $sql = mysql_query("SELECT id,nome,foto FROM tb_usuarios order by nome");
  while ($dadosUsu = mysql_fetch_assoc($sql)) {
    $id_usu = $dadosUsu['id'];
    $nome_usu = $dadosUsu['nome'];
    $foto_usu = $dadosUsu['foto'];
    echo "<img src='fotos/".$foto_usu."' alt='Foto de exibição'; width='25'; height='30'; align='left'; /><br />";
    echo $id_usu;
    echo $nome_usu;
    echo '<a href="#pagina" class="pagina click"> Info</a><br />';
  }
?>  

If we click on the "Info" link of any of the listed users, it will open the modal window. Follow the code Javascript and the structure of Divs modal:

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        if($.cookie('modal') !== undefined){
            $('#modal').css('display','none');
        }
            $('.pagina').click(function(){
                 $('#modal').fadeIn(200);
            });
            $('.fechar, #modal').click(function(event){
                if(event.target !== this){
                    return;
                }
            $('#modal').fadeOut(200);
                $.cookie('modal', '1', { expires: 7 });
            });
        });
 </script>




<div id="modal">
    <div class="modal-box">
        <div class="modal-box-conteudo">

            <?php
                error_reporting(E_ALL ^ E_DEPRECATED);
                $link = mysql_connect("localhost","root","") or die ("Não foi possível conectar servidor");
                $banco = mysql_select_db('rscc-db', $link) or die ("Impossível conectar banco de dados");
                $sql = mysql_query("SELECT id,nome,email,foto FROM tb_usuarios where id='**$id_usuario**'");

---- continuação do código -----

              ?>
        </div>
       <div class="fechar">X</div>
   </div>
</div>

I wonder how I could store in the variable id_usuario the user id that has been clicked, to use in this query within Modal.

Answer 1

You can place a date attribute or even id on your link by receiving the id variable and pick it up by javascript and assign it to some input field of your modal. Ex:

PHP

echo '<a href="#pagina" data-id="'.$id_usu.'" class="pagina click"> Info</a><br />';

Js

 $('.pagina').click(function(){
    # o $(this) é o objeto clicado, ou seja, o link e estou pegando o
    # conteúdo do campo data-id e atribuindo a um input dentro da sua modal
    $("#input-na-modal").val($($(this).attr("data-id"));

    $('#modal').fadeIn(200);
 });