Load php page on div with JavaScript

Question

Trying to load php results (from a different page) into a div on same page on link clicked

I have tried following the answer in here

But this didn't work for me. Below is what i have tried

price.php

<div class="pricepop"></div>

<?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>//Link to dispaly more results
</td>
                          </tr>';
             }

pricedetails.php

<?php
                  $priceId = $_GET['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>';
                  }

The JavaScript

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

When i click on the view more link in price.php the results in pricedeatils.php is supposed to display in the .pricepop div (which is in price.php page) but when i click currently the .pricepop is blank. Please how do i solve this issue? Thanks.

Answer 1

Your code isn't loading the correct url. Modified so id parameter is part of the url.

Use this js script instead.

$(document).ready(function() {
    $(".comprice").on("click", function (e) {
        e.preventDefault();
        $(".pricepop").load($(this).attr('href'));
    });
});