CODEWITHSUNDEEP
phpjqueryajax
JulianJ
JulianJ

Reputation: 1317

Refresh instantly with Ajax

I am trying to understand ajax and want to figure out how I can refresh a div that displays a rowcount from a mysql database live as the data is entered into that database.

I have a simple form on the same page and as the data is submitted from the form to the database how can I make the div update 'live' as well?

The code I've posted here posts a name from a form which is inserted into a mysql database. Then the number of rows in the database is counted and returned as a json object. It all works fine but only refreshes the rowcount when I reload the page and I want it to refresh instantly.

Many thanks.

The form

    <form class="form-inline" action="" id="myform" form="" method="post">
 <!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name"></label>  
  <div class="col-md-8">
  <input id="name" name="name" type="text" placeholder="name" class="form-control input-lg" required>
    </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit1"></label>
  <div class="col-md-4">
    <button id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
  </div>
</div>

</form>

<!---------Display rowcount from database--------->

The jquery

<script>
$(document).ready(function(){
$("#submitButtonId").on("click",function(e){
  e.preventDefault();

var formdata = $(this.form).serialize();
    $.post('data.php', formdata,
           function(data){

 //Reset Form
$('#myform')[0].reset(); 
          });

return false;
});
});
</script>
<script>

$(document).ready(function() { 

$.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                    $("#count").append(data.count);
}
});    
                return false;  
});

</script>

data.php

<?php
//include db configuration file
include_once("db_conx.php");

$name= mysqli_real_escape_string($db_conx,$_POST['name']);
//Update Database
$stmt = $db_conx->prepare('INSERT INTO my_table set name?');
$stmt->bind_param('s',$name);
$stmt->execute();

//Count Rows
$sql="SELECT name FROM utility";
$query = mysqli_query($db_conx, $sql);
  // Return the number of rows in result set
  $rowcount=mysqli_num_rows($query);

// sending JSON output
$my_data=array(count=>"$rowcount");

echo json_encode($my_data,true);

?>

Upvotes: 0

Views: 82

Answers (2)

JP. Aulet
JP. Aulet

Reputation: 4398

With PHP + ajax you should query to the database every X time with a timeout (setTimeOut()).

You could use websockets or take a look to firebase.

Also I suggest you to change .append(data.count); to .html(data.count); in order to 'clean' the div, if not, you may have multiple 'data.count' on it.

Here a post with a lot of answers for this: What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?

Upvotes: 1

Drown
Drown

Reputation: 5982

If you want the server to push events to the client, you can use Websockets. There are services like Pusher that can help, it has a free plan (100 connections, 200K messages per day) and a good documentation to integrate with PHP and some popular frameworks.

If you don't want to use websockets, you can use a more traditionnal polling : every X seconds, you make a GET request to the server asking for the count, if it changes you update it, if not you do nothing and wait for the next call. This can be setup easily with setTimeout() in Javascript.

Upvotes: 1

Related Questions