Reload data continuously with Ajax

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?

Vikalp Patel · Accepted Answer · 2019-12-30 11:18:53Z

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>

edited Dec 30, 2019 at 11:18

Vikalp Patel

10.9k7 gold badges66 silver badges100 bronze badges

answered Dec 30, 2019 at 9:43

Madhuri Patel

1,24812 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anu Over a year ago

Hi Madhuri, I updated my php file content. Probably that file got some issue and that is why Ajax is not working. Could you please check if I am doing something wrong in that php file?

Anand Pandey · Accepted Answer · 2019-12-30 11:46:51Z

1

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

answered Dec 30, 2019 at 11:46

Anand Pandey

2,0454 gold badges23 silver badges40 bronze badges

2 Comments

Anu Over a year ago

Hi Anand, I tried, but not working. Probably something wrong with my php file. I updated my code with the content of php file. Could you please see if i am doing something wrong?

Anand Pandey Over a year ago

You have to check console or alert in your brower.

user7544594 · Accepted Answer · 2019-12-30 09:38:38Z

0

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

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

answered Dec 30, 2019 at 9:38

user7544594

1 Comment

Anu Over a year ago

That is a typo happened from me. Anyway thank you haisen for highlighting it.

Anu · Accepted Answer · 2020-01-31 06:52:57Z

0

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

answered Jan 31, 2020 at 6:52

Anu

1,1392 gold badges21 silver badges51 bronze badges

Collectives™ on Stack Overflow

Reload data continuously with Ajax

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related