Here I go again. I am trying to change content of a division with data retrieved from my database. This has to be done without reloading the page, therefore I am using xmlhttp and javascript. The website is running on CodeIgniter. Below is the code with a short summary of it. I have been following this tutorial, but for some reason, when I click the button, nothing is happening.
View *xampInstallFolder/htdocs/application/obs/views/test_v.php*
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( "#next_btn" ).click(function() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("listA").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getnext5.php?q="true);
xmlhttp.send();
})
</script>
</head>
<body>
<div id="listA">
</div>
<div id="next_btn">
</div>
</body>
</html>
Right now I trigger the function when my button gets clicked. The function is in the head of the view,. I am not sure where should the file with the query (getnext5.php) be stored. Right now it is inside the views folder. The link to the file is this xmlhttp.open("GET","getnext5.php?q="true); should I somehow change this?
Functions xampInstallFolder/htdocs/application/obs/views/getnext5.php
<?php
$con = mysqli_connect('localhost','root','root','obs2');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"obs2");
$sql="SELECT * FROM user WHERE id > 5";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result))
{
echo "<a style="display:block" href="base_url('core/detail/'.$row[id])">";
echo "<div id="suggested" onmouseover="" style="cursor: pointer;">";
echo "<div id="info">";
echo "<div id="info_center">";
echo "<p>" . $row['name'] . "</p>";
echo "</div>";
echo "</div>";
echo "<div class="mosaic-block fade">";
echo "<a href="base_url('core/detail/'.$row[id])" class="mosaic-overlay">";
echo '<div class="details">';
echo "<p>" . $row['summary'] . "</p>";
echo "</div>";
echo "</a>";
echo "<div class="mosaic-backdrop"><img src="www.puu.sh/5DSWj.jpg">";
echo "</div>";
echo "</div>";
echo "<div id="info">";
echo "<div id="info_center">";
echo "<p>" . "Rating: 7.7" . "</p>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</a>";
}
echo "</table>";
?>
In this file I establish the connection to my DB, run the query, store the rows in an array called $pages and then style the results using a while loop. The style is echoed, because it is then returned by the xmlhttp request and displayed in the listA division, replacing the original content. I am not sure if the echoes are written right or not.
I am open to any suggestions. Have been trying to resolve this the whole day without any success. Thank you all for reading and most importantly for your replies.
You're not concatenating the get parameter properly.
xmlhttp.open("GET","getnext5.php?q="true);
q="true <-- true is a boolean!
Try opening like this:
xmlhttp.open("GET","getnext5.php?q=true");
If you do want to concatenate proper, do "q="+variable
You can use jquery ajax api, and then on success function you can replace div content with values retrieved from db.