pass query value php postgresql to modal bootstrap

Asked

Viewed 177 times

0

I want to pass the value of php/postgresql query to modal but I’m not getting it.

I have a dynamic table that lists the results. In one of these columns I want to include the modal button (popup) and pass the id of the line to the modal in order to query the bank.

My table:

<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>
php postgresql modal

  • woww why are you creating a model for each ? your html will be long

  • because I want the id line to query the database, it’s like I have a link in that column and open another page through so that through post or get used in a variable, but in this case instead of a link and new page I want to use a modal popup.

  • And why don’t you just create a model and change the contents of the model when the user opens it? It’s unnecessary for each of you to save the id

  • put the modal out of the loop, is that it? yes, it is already

  • yes and with javascript manipulates the data

2 answers

0

Your modal is within a table when it should be within a larger hierarchy within the DOM.

Example:

Right (modal having as immediate Parent the element body)

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

Wrong (modal off the top of the 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>

  • already corrected friend, posted the result below with detailed explanation, including my error. thanks.

  • Your modal is still in the wrong place and you need to accept your answer later.

  • if I put the modal out will not work, I tested here

  • But of course it works. If you pass the variables $row to another variable within the loop, you can access them within any part of the page. First just define it before the loop. Example: $id = ""; [iterate in the database and pass the result for variables] $Row['id'] = $id; outside the loop, you can print $id wherever you want. Use language features.

0

I solved the issue in the simplest way. I had tried this before but it was always an error because the id I was using was a string with characters and spaces. I fixed the id using string only, no spaces and no special characters, or numbers and it worked fine without having to add more code.

And it has to be inside the loop or it won’t work.

On the button I changed the name of the data-target to the query line id:

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

In modal, I changed the id name to the line id:

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

The complete code:

<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>

Browser other questions tagged php postgresql modal

You are not signed in. Login or sign up in order to post.