CODEWITHSUNDEEP
phpjquerymysqlajax
JulianJ
JulianJ

Reputation: 1317

How to delay an Ajax request?

I have a form that posts data to a server side page where the data is inserted into a mysql database and then a row count of the database is performed and the result returned to the form page where it is then displayed.

I am using an ajax to fetch the row count data and I'm wondering if it is possible to delay the Ajax call until the data has been inserted into the database so I can get an accurate row count that would include the data just submitted? The current code works but only shows a row count before the form has been submitted. I have to reload the page to get a true result.

Form.php

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

<div id="count"></div>
</div>

The jquery

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

var formdata = $(this.form).serialize();
    $.post('server.php', formdata,
           function(data){
  //Reset Form
$('#myform')[0].reset(); 
          });

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

//Fetch Rowcount from server.php
  $(document).ready(function(){
$.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                    $("#count").html(data.count);

}
});
});
</script>

Server.php

<?php
//Connect to db
include_once("db_conx.php");
if( isset($_POST['name']) ){
$name= mysqli_real_escape_string($db_conx,$_POST['name']);

//Update Database 
$stmt = $db_conx->prepare('INSERT INTO myTable  set name=?');
$stmt->bind_param('s',$name);
$stmt->execute();
}
//Count Rows
$sql="SELECT name FROM myTable";
$query = mysqli_query($db_conx, $sql);
  // Return the number of rows in result set
  $rowcount=mysqli_num_rows($query);

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

echo json_encode($my_data,true);
?>

Upvotes: 1

Views: 127

Answers (3)

Keyne Viana
Keyne Viana

Reputation: 6202

Call the ajax that fetches the row count inside the response of the first ajax post.

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

    var formdata = $(this.form).serialize();
    $.post('server.php', formdata,
           function(data){
               //Reset Form
               $('#myform')[0].reset(); 
               fetchRowCount();
    });

    return false;
 });
});

function fetchRowCount() {
     $.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                        $("#count").html(data.count);

                    }
     });
}
</script>

Upvotes: 1

CalCon
CalCon

Reputation: 246

If I've understand correctly from the code, I see that the Fetch Rowcount is executed on $(document).ready. It means that once (and everytime) the page is loaded, it is executed. So it happens this:

1) the page is loaded

2) the Fetch rowcount is executed

3) You submit

4) you have to reload the page to go to point 2.

So the solution is to execute the row fetch as a callback function after the submit is executed, not on document ready.

Upvotes: 0

Quentin Roger
Quentin Roger

Reputation: 6538

you can call the count row function after the post like this:

 $.post('server.php', formdata,
     function(data) {
         //Reset Form
         $('#myform')[0].reset();
         $.ajax({
             url: 'data.php',
             dataType: "json",
             success: function(data) {
                 $("#count").html(data.count);
             });)
     });

Upvotes: 0

Related Questions