Reload data continuously with Ajax - php

Question

I have a page with some bootstrap cards. Information showing inside the card is retrieved from MySQL database.
What I need
I need these cards to be updated every 3 seconds without reloading the page. I know that Ajax is the way to do this (Update content without refreshing page). I am not familiar with Ajax. However, I tried as below
<script>
setInterval(
(function x() {
$.ajax({
type: "POST",
url: "vTagInfoCall.php",
processData: false,
contentType: false,
data: "",
success: function(result) {
$("#inputFieldDisplay").html(result);
}
});
return x;
})(), 3000);
</script>
Also I gave the following div with id inputFieldDisplay as below
<div class="container-fluid">
<div id="inputFieldDisplay"></div>
</div>
My Issue
When I redirect to the mentioned page vTagInfoCall.php with all my php codes and contents, it is not loading anything to the div with id inputFieldDisplay. Did anyone know what am I doing wrong here?
Edit 1
Following is my vTagInfoCall.php file contents
<?php ob_start();?>
<?php include "db.php"; ?>
<?php
$tagQuery = "SELECT * FROM vtagdetails WHERE status = 0";
$tagQueryExecute = mysqli_query($conn, $tagQuery);
$openItems = mysqli_num_rows($tagQueryExecute);
while($tagQueryRows = mysqli_fetch_array($tagQueryExecute)){
$srNumber = $tagQueryRows['srNumber'];
$Name = $tagQueryRows['Name'];
$Code = $tagQueryRows['Code'];
$customerName = $tagQueryRows['customers'];
$Type = $tagQueryRows['Type'];
session_start();
echo '<form method="post"> <div class="card cardBodyStyle">
<div class="card-body" >
<div class="row">
<input type="text" name= "srNum" value = "'.$srNumber.'" hidden>
<input type="text" name= "tpCode" value = "'.$Code.'" hidden>
<div class="col-sm"><i class="fab fa-500px"></i> '.$Name.'</div>
<div class="col-sm"><i class="fas fa-atom"></i> '.$Type.'</div>
<div class="col-sm"><i class="fas fa-globe fa-spin"></i> '.$customerName.'</div>
</div>
</div></div></form><br>';
}
?>
Edit 2
It is showing the following error in console. Can someone help why is the error?

Answer 1

I found two issues in code:
First in your script, please use below code:
<script>
setInterval(x, 3000);
function x() {
$.ajax({
type: "POST",
url: "vTagInfoCall.php",
processData: false,
contentType: false,
data: "",
success: function(result) {
$("#inputFieldDisplay").html(result);
}
})
}
</script>
Second one is remove # from your id of div because # is just use to indicate id of element in jquery and .(dot) for class name of element. Please update your code with below code:
<div class="container-fluid">
<div id="inputFieldDisplay"></div>
</div>

Answer 2

You can use directly in setInterval function
setInterval(function()
{
$.ajax({
type: "POST",
url: "vTagInfoCall.php",
processData: false,
contentType: false,
data: "",
success: function(result) {
$("#inputFieldDisplay").html(result);
}
});
}, 3000);//time in milliseconds
And the problem is in Html div also as showed by madhuri and haisen.
Whenever you used attributes(name,id,class whatever) you dont need to put dot,# or other symbols in the div or input.
So please fix it. I think it will work definitely.
<div id="#inputFieldDisplay"></div> // Wrong because of #
<div id="inputFieldDisplay"></div> //Right

Answer 3

you html code with some incorrect in id="#inputFieldDisplay"
<div class="container-fluid">
<div id="inputFieldDisplay"></div>
</div>

Answer 4

After many trials and methods, found out that I was using CDN of slim version of jQuery which caused this problem. Somehow there is some issue with Ajax in the slim version
I solved it by using the uncompressed version of jQuery CDN from here and that is it!!