在同一页面的div中加载PHP回显链接的内容

Question

I have SELECT data from a table from my database.This data come with links. What i want is that when i click on the link, it loads more of that data in a div instead of going to aa different page. Each links comes with an id from which to know data to load in the div from the database.Below is the code

<div class="pricepop"></div>
<div class="pricetab">
<table class="table">
                <thead>
                    <tr>
                      <th>COMMODITIES</th>
                      <th>UNITS</th>
                      <th>INTERNATIONAL PRICE($)</th>
                      <th>TERMS</th>
                      <th>LOCAL PRICE (&#8358;)</th>
                      <th>AS AT</th>
                      <th>MARKET</th>
                      <th>Full Details</th>
                    </tr>
                </thead>
                <tbody>
                <style>
                .table > thead > tr > th, .table > tbody > tr > td {
                    font-size: 10px !important;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
                </style>
                  <?php
                  $sql = $db->prepare("SELECT * FROM commodityprices");
                  $result = $sql->execute();
                  while ($row = $result->fetchArray(SQLITE3_ASSOC))
                  {
                      $id = $row['id'];
                      $_SESSION['id'] = $id;
                      $name = $row['name'];
                      $unit = $row['unit'];
                      $iprice = $row['iprice'];
                      $lprice = $row['lprice'];
                      $irate = $row['irate'];
                      $lrate = $row['lrate'];
                      $terms = $row['cterms'];
                      $asat = date('d/M/Y');
                      $market = $row['market'];

                          echo '<tr>
                          <td>'.$name.'</td>
                          <td>'.$unit.'</td>';
                          if ($irate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$iprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$iprice.'</td>';
                          }
                          echo '<td>'.$terms.'</td>';
                          if ($lrate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$lprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$lprice.'</td>';
                          }
                          echo '<td>'.$asat.'</td>
                          <td>'.$market.'</td>
                          <td><a class="comprice" href="pricedetails.php?id='.$id.'">View more</a></td>
                          </tr>';
                  }                 
                  ?>
                </tbody>
                </table>
</div>

Below i have a javascript that loads the data from the database into the .pricepop on link click

$(document).ready(function() {
    $(".comprice").on("click", function (e) {
        e.preventDefault();
        $(".pricepop").load("pricedetails.php");
    });
});

Below is the pricedetails.php code that gets the remaining price details.

                  <thead>
                    <tr>
                      <th>COMMODITIES</th>
                      <th>TERMS</th>
                      <th>LOCAL PRICE (&#8358;)</th>
                      <th>AS AT</th>
                      <th>MARKET</th>
                      <th>Price/bag</th>
                    </tr>
                </thead>
                <tbody>
                <style>
                .table > thead > tr > th, .table > tbody > tr > td {
                    font-size: 10px !important;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
                </style>
                  <?php
                  $priceId = $_SESSION['id'];
                  $sql = $db->prepare("SELECT * FROM commodityprices WHERE id = ?");
                  $sql->bindParam(1, $priceId, SQLITE3_INTEGER);
                  $result = $sql->execute();
                  while ($row = $result->fetchArray(SQLITE3_ASSOC))
                  {
                      $id = $row['id'];
                      $name = $row['name'];
                      $iprice = $row['iprice'];
                      $lprice = $row['lprice'];
                      $lrate = $row['lrate'];
                      $terms = $row['cterms'];
                      $asat = date('d/M/Y');
                      $market = $row['market'];
                      $priceperbags = $row['priceperbags'];

                          echo '<tr>
                          <td>'.$name.'</td>';
                          echo '<td>'.$terms.'</td>';
                          if ($lrate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$lprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$lprice.'</td>';
                          }
                          echo '<td>'.$asat.'</td>
                          <td>'.$market.'</td>
                          <td class="comprice">'.$priceperbags.'</td>
                          </tr>';
                  }
                  ?>
                </tbody>
                </table> 
</div>

The issue now is that no matter the link i click on from the echoed php data, the data displayed in the .pricepop is the details last echo link.

How can i fix this such that when i click on a link, details gotten from id of that link is echo and displayed in the .pricepop .

Answer 1

You must use AJAX POST or GET statemant to get what you need. Simple jQuery .load() can't help you.

In basics, you must do some kind of pagination to load or append new data.

Here is examples:

http://itsolutionstuff.com/post/php-infinite-scroll-pagination-using-jquery-ajax-exampleexample.html http://phppot.com/php/ajax-pagination-with-php/