I have search results on left. When clicking on a result it needs to load in div on right - without a refresh or loading in a new page. The search gives three search results and has pagination. Regardless of which search result I click, the same id loads. Can anyone see where I am going wrong?
index.php
//get rows
$query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $limit");
if($query->num_rows > 0){ ?>
<div class="posts_list">
<?php
while($row = $query->fetch_assoc()){
$postID = $row['id'];
?>
<div class="list_item"><h2><?php echo $row["title"] ?></h2><button type="button" onclick="loadDoc()" >View</button></div>
<div class="item_viewer"><p id="demo"></p></div>
<script type="text/javascript">
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "file/file.php?id=<?php echo $row['id'] ?>", true);
xhttp.send();
}
</script>
<?php } ?>
</div>
<?php echo $pagination->createLinks(); ?>
<?php } ?>
file.php
<body>
<div class="container">
<div class="box">
<?PHP
//create connection
$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 `posts` WHERE `id`='" . $id . "'";
$result = mysqli_query($connect,$query);
while($row = mysqli_fetch_array($result)) {
echo "Company: <b>" .$row['title']. "</b>";
echo "<br/>";
echo "ID: <b>" .$row['id']. "</b>";
?>
<a href="<?PHP echo $row[''];}}?>"><button class="btn success">View</button></a>
<a href="" ><button class="btn default">Back</button></a>
</div>
</div>
</body>
Your code produces multiple loadDoc functions inside the loop, therefore every button uses the same function (with the same rowId statically placed inside of it).
It would be better if you had only one function and pass the id as a parameter like so:
<?
$query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $limit");
if($query->num_rows > 0){ ?>
<div class="posts_list">
<?php
while($row = $query->fetch_assoc()){
$postID = $row['id'];
?>
<div class="list_item">
<h2><?php echo $row["title"] ?></h2>
<!-- Pass Id into the function -->
<button type="button" onclick="loadDoc(<?php echo $row['id'] ?>)" >View</button>
</div>
<div class="item_viewer"><p id="demo"></p></div>
<?php } ?>
</div>
<script type="text/javascript"> // Move JavaScript function out of loop, so that it only exists once in the document
function loadDoc(rowId) { // Pass rowId as argument
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "file/file.php?id=" + rowId, true);
xhttp.send();
}
</script>
<?php echo $pagination->createLinks(); ?>
<?php } ?>