CODEWITHSUNDEEP
javascriptphpjqueryajax
Naren Verma
Naren Verma

Reputation: 2307

How to display new records on screen without refreshing the page?

I have to display the all the records on the screen which are inserted into the database without refreshing the page. I have 3 columns called as Firstname, Lastname, Email and after clicking on the submit button data are inserting in the database using ajax Which is working.

Now I am fetching the records on the same screen without refresh the page but it is not working when I am refreshing the page then it is displaying the last record which is inserted.

Please check below link. You will get an idea what I am asking. Inserted data and display data at the same time.

http://prntscr.com/g953bs

Index.php

<?php
ob_start();
session_start();
include('../../db/connection.php');
$sql = "SELECT * FROM test1";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<form method="post" id="register" autocomplete="off">
  <input type="text" name="fname" id="fname" placeholder="Firstname">
  <input type="text" name="lname" id="lname" placeholder="Lastname">
  <input type="email" name="email" id="email" placeholder="Email">
  <input type="submit" name="submit" value="submit" >
</form>
<table border="1" style="margin-top: 25px;">
<tr>
    <th>Id</th>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Email</th>
  </tr>
 <?php
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {

  echo "<tr>
                <td>".$row['id']."</td>
                <td>".$row['fname']."</td>
                <td>".$row['lname']."</td> 
                <td>".$row['email']."</td>
            </tr>";

    }
} else {
    echo "0 results";
}
$conn->close();
 ?>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    $('#register').submit(function(e){
    e.preventDefault(); // Prevent Default Submission

            var fname = $("#fname").val();
            var lname = $("#lname").val();
            var email = $("#email").val();
            var dataString = 'fname='+ fname + '&lname='+ lname + '&email='+ email;
            $.ajax(
            {
                url:'process.php',
                type:'POST',
                data:dataString,
                success:function(data)
                {
                    // $("#table-container").html(data);
                    $("#register")[0].reset();
                },
            });
        });
</script>
</body>
</html>

Process.php

$firstname=$_POST['fname'];
  $lastname=$_POST['lname'];
  $email=$_POST['email'];

$sql = "INSERT INTO test1 (fname, lname, email) VALUES ('$firstname', '$lastname', '$email')";

if (mysqli_query($conn, $sql)) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
$conn->close();

Upvotes: 1

Views: 2424

Answers (4)

amit wadhwani
amit wadhwani

Reputation: 1140

As you have only one table then use below code. 

 $('table tr:last').after('<tr>...</tr><tr>...</tr>');

If you have any class or id then you can modify below syntax as $('selector tr:last')

Use it in success of ajax call

Upvotes: 0

Peter M
Peter M

Reputation: 1059

First of all I'd like to suggest taking a look at binding parameters with mysqli to make your query saver.

Then in order to add the date without refreshing you could return the data on successful insert. Then append this data to the table.

Example Process.php

if (mysqli_query($conn, $sql)) {
    echo "<tr>
            <td>".mysqli_insert_id($conn)."</td>
            <td>".$firstname."</td>
            <td>".$lastname."</td> 
            <td>".$email."</td>
        </tr>";
} else {

Upvotes: 0

Naincy
Naincy

Reputation: 2943

Define id to the table

<table border="1" style="margin-top: 25px;" id="myTable">

Changes in ajax call

$.ajax(
            {
                url:'process.php',
                type:'POST',
                data:dataString,
                success:function(data)
                {
                    $('#myTable tr:last').after('<tr><td>' +fname +'</td><td>'+lname+'</td><td>'+email+'</td></tr>');
                    $("#register")[0].reset();
                },
            });

Note: Also you should handle the case if eror while inserting in your code as currently you are only taking positive case.

I hope this will help

Upvotes: 0

caryarit ferrer
caryarit ferrer

Reputation: 326

    $('#IdTable tr:last').after('<tr><td>id<td>fname<td>lname<td>email</tr>');

Upvotes: 1

Related Questions