CODEWITHSUNDEEP
phpjqueryhtmlajax
Anu
Anu

Reputation: 1129

Reload data continuously with Ajax

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? enter image description here

Upvotes: 1

Views: 311

Answers (4)

Anu
Anu

Reputation: 1129

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!!

Upvotes: 0

Anand Pandey
Anand Pandey

Reputation: 2025

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

Upvotes: 1

Madhuri Patel
Madhuri Patel

Reputation: 1270

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>

Upvotes: 1

user7544594
user7544594

Reputation:

you html code with some incorrect in id="#inputFieldDisplay"

<div class="container-fluid">
  <div id="inputFieldDisplay"></div>
</div>

Upvotes: 0

Related Questions