List mysql data in a modal using php

Question

I would like to list a field that is in the database in a list that is already created. When the user clicks on the "title" field he has to call a modal with some database data. What happens, it even calls, only from the first line, on the remaining lines it returns the data contained in the first line. Below follows my code:

<table class="table">

		<thead>
				<tr>
						<th>Data de cadastro</th>
						<th>titulo</th>


				</tr>
		</thead>
		<tbody>
				<?php
				$result = mysql_query("SELECT * FROM gr_atividade ati
															join gr_entidade ent on ent.id_entidade = ati.id_entidade
															WHERE ati.id_processo = ". $_GET['id']."
															order by data_cadastro desc");
				while ($atividade = mysql_fetch_array($result)) {                               
				?>

				<tr>
				<td><?php echo $atividade['data_cadastro']?></td>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
		<div class="modal-content">
				<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
				</div>
				<div class="modal-body">
						<h4><?php echo $atividade['titulo']?></h4>
						<p><?php echo $atividade['descricao']?></p>
				</div>
				<div class="modal-footer">
						<button type="button" class="btn btn-info waves-effect" data-dismiss="modal">Sair</button>
				</div>
		</div>
		<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
				<td><a href="javascript:;" data-toggle="modal" data-target="#myModal"><?php echo $atividade['titulo']?></a></td>
				<td><?php echo $atividade['nome'].'&nbsp'.$atividade['sobrenome'];
						?>
				</td>

				
						</td>
			</tr>

				 <?php
				 }
				 ?>

		</tbody>
</table>

The current form even works only for the first line, but for the others, the value of the first line is repeated , but only the modal that is repeated.

Answer 1

The attribute id must be used only in one element. Each new modal you have to use a id different.

When you use several id equal, Javascript will capture the first element and disregard the rest.

You can use a variable, for example count, to differentiate the models. This will generate myModal1, myModal2, myModal3, myModal4

Example:

<table class="table">

  <thead>
    <tr>
      <th>Data de cadastro</th>
      <th>titulo</th>


    </tr>
  </thead>
  <tbody>
    <?php
        $count = 0;

                $result = mysql_query("SELECT * FROM gr_atividade ati
                                                            join gr_entidade ent on ent.id_entidade = ati.id_entidade
                                                            WHERE ati.id_processo = ". $_GET['id']."
                                                            order by data_cadastro desc");
                while ($atividade = mysql_fetch_array($result)) {                               
                ?>

      <tr>
        <td>
          <?php echo $atividade['data_cadastro']?>
        </td>
        <div id="myModal<?php echo $count ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
              </div>
              <div class="modal-body">
                <h4>
                  <?php echo $atividade['titulo']?>
                </h4>
                <p>
                  <?php echo $atividade['descricao']?>
                </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-info waves-effect" data-dismiss="modal">Sair</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>
        <td>
          <a href="javascript:;" data-toggle="modal" data-target="#myModal<?php echo $count++ ?>">
            <?php echo $atividade['titulo']?>
          </a>
        </td>
        <td>
          <?php echo $atividade['nome'].'&nbsp'.$atividade['sobrenome'];
                        ?>
        </td>

      </tr>

      <?php } ?>

  </tbody>
</table>