My aim is to use AJAX to display php search results without having to reload the page.
So far I have been able to get the results, (I'm new to ajax, and I do not know jQuery), currently my only problem is that the search results which I am displaying in a html table appear at the top the page above everything, not in the specified div. I have used the innerHTML
to try and display it correctly.
Here is my main code:
<head>
<script>
function searchResults(title) {
if (title == "") {
document.getElementById("response").innerHTML="";
}
var request= new XMLHttpRequest();
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
var displayDiv= document.getElementById("response");
displayDiv.innerHTML=request.responseText;
}
}
request.open("GET", "functions.php?titleA="+title, true);
request.send();
document.getElementsById("response").innerHTML="Content";
}
</script>
<title>Anime Search</title>
</head>
<body>
<div class="main">
<div class= "header">
<h1>Search your Database</h1>
</div> <!-- close header -->
<div class= "searchA">
<p>Search your Anime database below</p>
<form onSubmit="searchResults(titleA)">
<label>Title</label><input type="text" name="titleA" placeholder="enter title"/>
<input type="submit" value="submit"/>
</form>
<div id="response">
</div> <!-- close response -->
</div> <!-- close searchA -->
</body>
and here is the php:
if (isset($_GET["titleA"])) {
$title= $_GET["titleA"];
$connection= connect();
$username= $_SESSION["username"];
$tableA= $username . "_Anime";
$queryA= "SELECT * FROM Anime." . "`$tableA` WHERE Title LIKE '%$title%'";
$resultA= mysqli_query($connection, $queryA);
if ($resultA == false) {
die("no results found");
}
$numRows= mysqli_num_rows($resultA);
echo "<table class= 'tSearch'>
<thead>
<th>Title</th>
<th>Alt Title</th>
<th>Seasons</th>
<th>Episodes</th>
<th>OVA's</th>
<th>Movies</th>
<th>Status</th>
<th>Downloaded</th>
</thead>
<tbody>";
while($row= mysqli_fetch_array($resultA, MYSQLI_BOTH)) {
echo "<tr>";
echo "<td>" . $row["Title"] . "</td>";
echo "<td>" . $row["Alt_Title"] . "</td>";
echo "<td>" . $row["Seasons"] . "</td>";
echo "<td>" . $row["Total_Episodes"] . "</td>";
echo "<td>" . $row["OVAS"] . "</td>";
echo "<td>" . $row["Movies"] . "</td>";
echo "<td>" . $row["Status"] . "</td>";
echo "<td>" . $row["Downloaded"] . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
mysqli_close($connection);
if ($resultA == false) {
echo mysqli_error($connection);
}
}
I have of course spend many hours trying to find out whats wrong, I do plan on learning jQuery, but for now I just really want to get this to work, so please do not tell me to use jQuery,
EDIT: link to a screenshot:
My browser is Safari 7.0.4, I tried Firefox and got the same problem.
I have fixed the problem, rewriting your code from the start really does help. The problem was that in my javascript I was sending the title as just +title, i really should have changed this to title.value, this is why the php wasn't understanding what i was trying to send it. Thanks Daniel for all the help. I will display all my code below. javascript:
function searchData() {
var title= document.getElementById("titleA");
var request= new XMLHttpRequest();
request.onreadystatechange= function() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("response").innerHTML=request.responseText;
}
}
request.open("POST", "functions.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("title="+title.value);
}
</script>
The php:
if (isset($_POST["title"])) {
$title= $_POST["title"];
} $connection= connect();
$username= $_SESSION["username"];
$tableA= $username . "_Anime";
$queryA= "SELECT * FROM Anime." . "`$tableA` WHERE Title LIKE '%$title%'";
$resultA= mysqli_query($connection, $queryA);
if ($resultA == false) {
die("no results found");
}
$numRows= mysqli_num_rows($resultA);
echo "<table class= 'tSearch'>
<thead>
<th>Title</th>
<th>Alt Title</th>
<th>Seasons</th>
<th>Episodes</th>
<th>OVA's</th>
<th>Movies</th>
<th>Status</th>
<th>Downloaded</th>
</thead>
<tbody>";
while($row= mysqli_fetch_array($resultA, MYSQLI_BOTH)) {
echo "<tr>";
echo "<td>" . $row["Title"] . "</td>";
echo "<td>" . $row["Alt_Title"] . "</td>";
echo "<td>" . $row["Seasons"] . "</td>";
echo "<td>" . $row["Total_Episodes"] . "</td>";
echo "<td>" . $row["OVAS"] . "</td>";
echo "<td>" . $row["Movies"] . "</td>";
echo "<td>" . $row["Status"] . "</td>";
echo "<td>" . $row["Downloaded"] . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
mysqli_close($connection);
if ($resultA == false) {
echo mysqli_error($connection);
}