pass php query value postgresql to modal bootstrap

Question

pass php query value postgresql to modal bootstrap

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I want to pass the value of the php / postgresql query to the modal but I am not able to.

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

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

asked by anonymous 11.08.2017 / 22:51

2 answers

Redirect to the homepage after logged in - AngularJS Ui Router Erase certain rows from a .csv python [duplicate]

score 0 · Answer 1

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

Example:

Right (modal with immediate parent 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>

score 0 · Answer 2

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

And it has to be inside the loop or it will not work.

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

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

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

<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><scriptsrc="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>