0

Quero passar o valor da consulta php/postgresql para o modal mas não estou a conseguir.

Tenho uma tabela dinâmica que lista os resultados. Numa dessas colunas pretendo incluir o botão modal (popup) e passar o id da linha para o modal de forma a fazer a consulta ao banco.

A minha tabela:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
    <td>col4</td>
    <td>col5</td>
    <td>col6</td>
  </tr>
  <?php         
    while($row = pg_fetch_assoc($query)){
  ?>
  <tr>
    <td><?php echo $row['col1'];?></td>
    <td><?php echo $row['col2'];?></td>
    <td><button type="button" class="popup-botao" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['id'];?>"><?php echo $row['col3'];?></button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">      
        <!-- Modal content-->
        <div class="modal-content">
        <?php 
        $id = $row['col3'];
        $qry_modal = pg_query($conn,"select * from table where id = $id");
        $row_modal = pg_fetch_assoc($qry_modal);
        ?>
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">MODAL HEADER</h4>
          </div>
          <div class="modal-body"><?php echo $row_modal['col10'];?></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>        
      </div>
    </div>
    <?php } ?>
    </td>
    <td><?php echo $row['col4'];?></td>
    <td><?php echo $row['col5'];?></td>
    <td><?php echo $row['col6'];?></td>
  </tr>
  <?php } ?>
</table>
5
  • woww porque tas a criar uma model para cada um ? teu html vai ficar extensoooooo
    – 13dev
    11/08/2017 às 21:25
  • porque quero o id linha para fazer consulta no banco, é como se tivesse um link naquela coluna e abrisse outra página através para que através de post ou get utilizasse numa variável, mas neste caso em vez de um link e nova página quero usar um popup modal.
    – user26858
    11/08/2017 às 21:36
  • e porque não crias so um model e alteras o conteúdo do model quando o user abrir-o? é desnecessario para cada um podes tabem guardar o id
    – 13dev
    11/08/2017 às 21:41
  • colocar o modal fora do loop, é isso? sim, já está
    – user26858
    11/08/2017 às 21:44
  • sim e com javascript manipulas os dados
    – 13dev
    11/08/2017 às 22:24

2 Respostas 2

0

O seu modal está dentro de uma tabela quando deveria estar dentro de uma hierarquia maior dentro do DOM.

Exemplo:

Certo (modal tendo como parent imediato o elemento body)

<body>
    <div class="content">
       <!-- resto do conteudo -->
    </div>
    <div class="modal" id="meu-modal">
       <!-- resto do modal -->
    </div>
</body>

Errado (modal fora do topo do DOM)

<body>
    <div class="content">
       <!-- resto do conteudo -->
    </div>
    <div class="bla-bla">
       <section>
           <!-- Este modal não está no lugar certo está? -->
           <div class="modal" id="meu-modal"></div>
       </section>
    </div>
</body>
4
  • já corrigi amigo, postei o resultado abaixo com a explicação detalhada, incluindo o meu erro. obrigado.
    – user26858
    11/08/2017 às 22:50
  • Seu modal ainda está no lugar errado e você precisa aceitar sua resposta depois.
    – user86792
    11/08/2017 às 22:51
  • se eu colocar o modal fora não vai funcionar, testei aqui
    – user26858
    11/08/2017 às 22:56
  • Mas é claro que funciona. Se você passar as variáveis $row para uma outra variável dentro do loop, você consegue acessá-las dentro de qualquer parte da página. Primeiro é só definí-la antes do loop. Exemplo: $id = ""; [faça a iteração no banco de dados e passe o resultado para variáveis] $row['id'] = $id; fora do loop, você pode imprimir $id onde quiser. Use os recursos da linguagem.
    – user86792
    11/08/2017 às 23:01
0

Resolvi a questão da forma mais simples. Já tinha tentado desta forma mas dava sempre erro porque o id que estava a usar era uma string com caracteres e espaços. Corrigi a id usando apenas string, sem espaços e sem caracteres especiais, ou números e funcionou direitinho sem ter de acrescentar mais código.

E tem de ser dentro do loop ou não vai funcionar.

No botão mudei o nome do data-target para o id da linha da consulta:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#<?php echo $row['id']; ?>"><?php echo $row['value']; ?></button>

No modal, mudei o nome do id para o id da linha:

<div class="modal fade" id="<?php echo $row['id']; ?>" role="dialog">

O código completo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

$query = pg_query($dbconn,"select * from table");

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr>
    <td align="center" valign="middle">header1</td>
    <td align="center" valign="middle">header2</td>
    <td align="center" valign="middle">header3</td>
  </tr>
</thead>
<tbody>
  <?php while($row = pg_fetch_assoc($query)){ ?>
  <tr>
    <td align="center" valign="middle"><?php echo $row_query['value1']; ?></td>
    <td align="center" valign="middle"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#<?php echo $row['id']; ?>"><?php echo $row['value2']; ?></button></td>
    <td align="center" valign="middle"><?php echo $row['value3']; ?></td>
  </tr>
    <!-- Modal -->
    <div class="modal fade" id="<?php echo $row['id']; ?>" role="dialog">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
          <p>This is a small modal.</p>
          <p><?php echo $row['value10']; ?></p>
          </div>
          <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
          </div>
        </div>
      </div>
    </div>    
  <?php } ?>
</tbody>
</table>

Você deve fazer log-in para responder a esta pergunta.