Question posted in
You can find the official documentation here.

Jquery ajax – 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

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    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!!


  2. 0

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

    <div class="container-fluid">
  <div id="inputFieldDisplay"></div>
</div>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search