load content from one php page in another

Question

I have three PHP pages index.php, fetch_data.php and product_detail.php.

My index.php has three columns: filter options, products panel, detailed description.

When a user clicks on a product in the product panel, the detailed description should load product_detail.php.

When I have target="_blank" in fetch_data, this works and shows product detail, but I don't want it to show in a new window. Everything must be on the same page in index.php. I need it to work something like: onclick="loadQueryResults()". Problem I think is that I'm not sure the method will be accessible in product_detail.php if declared in index.php.

I tried javascript to load product_detail.php in a div in index.php but it does not reference the id of the row.

<!-- index.php =============================-->
<div class="col-md-6">
<br />
<div class="row filter_data"></div><!--Contains output of filtered data-->
</div>

<div class="col-md-4">
<br />
<h4>Product Detail</h4>

<script type="text/javascript">
function loadQueryResults() 
{
$('#DisplayDiv').load("product_detail.php?id=<?PHP $row['id'] ?>");
return false;
}                    
</script>
<div id="DisplayDiv" >
<!-- This is where product_detail.php should be inserted -->
</div>
</div> 

//fetch_data.php=================================
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$total_row = $statement->rowCount();
$output = '';
if($total_row > 0)
{
foreach($result as $row)
{ 
$GLOBALS['id'] = $row['id'];

$output .= '
<div class="col-sm-4 col-lg-8 col-md-8">
<div style="border:1px solid #ccc; border-radius:5px; padding:10px; margin-bottom:10px; height:300px;">

<p align="center">

<strong><button type="button" onclick="loadQueryResults()" >'. $row['company'] .'</button>'. $row['company'] .'</strong></p>
ID : '. $row['id'].'<br />
Detail : <br />'. $row['detail'] .' <br /><br />
</p>
</div>
</div>
';
}
}

//product_detail.php=====================================

$connect = new mysqli($host, $dbUsername, $dbPassword, $dbname);
if (mysqli_connect_error()) {
die('Connect Error('. mysqli_connect_errno().')'. mysqli_connect_error());
} else {

$id = $_GET['id'];
$id = mysqli_real_escape_string($connect,$id);
$query = "SELECT * FROM `db` WHERE `id`='" . $id . "'";
$result = mysqli_query($connect,$query);

while($row = mysqli_fetch_array($result)) {
echo "<br/><br/>";
echo "Company: <b>" .$row['company']. "</b>";
echo "Detail: <b>" .$row['detail']. "</b>";

}}

How can I get product_detail to display in DisplayDiv in the index.php page?

Answer 1

You got two ways.

1. Merge both files into one and make code according to your desier.
2. Use AJAX method to fetch data from the second php url and display it in desired file.