I want to update my page when I update the database from another instance of the same page.But I am unable to do so. Index.php is my Home page. The if block of the doo() function, if(x.readyState==4 && x.status==200) never exeutes, may be because the status never becomes equal to 200. In the console I am getting "1000 Failed to load resource: net::ERR_INSUFFICIENT_RESOURCES" . Moreover I do not understand why the update function is not waiting for 10 seconds and overflowing the stack. I will be very obliged to get any solution and suggestions.
index.php
<html>
<head>
<title>das shuler
</title>
<script>
function foo()
{
//if (str.length==0) {
//document.getElementById("txtHint").innerHTML="";
//return;
//else {
data=document.getElementById("story").value;
alert(data);
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
alert("state change");
data=xmlhttp.responseText;
parent=document.getElementById("content");
child=document.createElement("div");
news=document.createTextNode(data);
child.appendChild(news);
parent.appendChild(child);
id=setTimeout(update(data),20);
alert("after setTimeout");
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
alert("data sent");
xmlhttp.open("GET","populate.php?story="+data,true);
xmlhttp.send();
}
function update(str)
{
data=str;
//alert(data);
//alert("inside update");
var x=new XMLHttpRequest();
x.onreadystatechange=doo();
function doo(){
if(x.readyState==4 && x.status==200)
{
alert("here");
data=x.responseText;
if(data!=str)
{
parent=document.getElementById("content");
child=document.createElement("div");
news=document.createTextNode(data);
child.appendChild(news);
parent.appendChild(child);
}
}
x.open("GET","retrieve.php",true);
x.send()
id=setInterval(update(data),10000);
}
}
</script>
</head>
<body onload="update()">
<div id="header"><h1 style="color:grey;align:center;">das shuler</h1><hr></div>
<div id="content">
</div>
<div id="make-content"><form method="post" action="populate.php"><input type="text" name="story" id="story"><input type="button" value="post" onclick="foo()"></form></div>
</body>
populate.php
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$data=$_REQUEST["story"];
echo $data;
$sql = "INSERT INTO News (Data)
VALUES ('$data')";
if (mysqli_query($conn, $sql)) {
$last_id = mysqli_insert_id($conn);
// echo "New record created successfully. Last inserted ID is: " . $last_id;
}
else
{
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
retrieve.php
<?php
$conn=mysqli_connect("localhost","root","root","myDB");
echo "hrloo";
$sql="select Data from News ";
$q=mysqli_query($conn,$sql);
$data=mysqli_fetch_assoc($q);
echo $data;
mysqli_close($conn);
?>
Your code seems to be broken. The setTimeout function logic is not working properly. The alert() right after setTimeout will fire on page load as it is not included in the function on which you are setting the timeout.
Also setTimeout() takes time in milliseconds. Try putting 10,000 if you need a 10 sec break on window.
Refer this:
setTimeout(function(){ alert("after setTimeout"); },10000);