Submit data and display without page refresh

Question

I have a small website that using a basic MVC structure. I have some code that inserts two values into a database, the insertion works fine without any issues, however, if i want to see the new data i usually have to refresh the page or navigate to another page and then back. I understand that i need to use JQuery/Ajax to make this work but dont really understand how to do it with PHP functions.

The code in question is below:

PHP Function:

<?php
session_start();
require_once('../Config/config.php');

class Readings 
{
    public $dbconn;

    public function __construct()
    {
        $database = new Database();
        $db = $database->dbConnection();
        $this->dbconn = $db;
    }

    public function enterElecReadings($eUsage)
    {
        try
        {       
            $estmt = $this->dbconn->prepare("
                INSERT INTO elec_readings
                    (ElecUsage, DateAdded, AccountNumber) 
                VALUES
                    (:eUsage, NOW(), :accNum)");
            $estmt->bindparam(":eUsage", $eUsage);
            $estmt->bindparam(":accNum", $_SESSION['user_session']);
            $estmt->execute();  
            return $estmt;
        }
        catch(PDOException $e)
        {
            echo $e->getMessage();
        }   
    }

    public function getElecReadings(){
        try {
            $stmt = $this->dbconn->prepare("SELECT ElecUsage, DateAdded FROM elec_readings WHERE AccountNumber = '" . $_SESSION['user_session'] . "'");
            $stmt->execute();
            return $stmt;
        } catch (Exception $e) {

        }
    }
}

?>

Page that the user will see:

    if(isset($_POST['btn-submitElecUsage']))
    {
        $eUsage = strip_tags($_POST['txtElecUsage']);

        try {
            if($newReading->enterElecReadings($eUsage)){    
                $elecNotif[] = "Reading successfully entered.";
            }
        } catch (Exception $e) {
            echo $e->getMessage();
        }
    }

<div class="elecUsage">
        <form id="elecRead" method="POST">
            <h2>Electricity Usage</h2>

            <?php
            if(isset($elecError))
            {
                foreach($elecError as $elecError)
                {
                    ?>
                    <div class="alert alert-danger">
                        <?php echo $elecError; ?>
                    </div>
                    <?php
                }
            }

            if(isset($elecNotif))
            {
                foreach($elecNotif as $elecNotif)
                {
                    ?>
                    <div class="alert alert-danger">
                        <?php echo $elecNotif; ?>
                    </div>
                    <?php
                }
            }
            ?>

            Please enter your latest electricity meter reading:
            <br>
            <input type="text" name="txtElecUsage" required/>
            <br>
            <input type="submit" name="btn-submitElecUsage" value="Submit"/>

        </form>


        <br>
        Your previous Electricity meter readings:
        <br>

        <div id="previousElecReadings">
            <br>

            <table class="tableElec" >
                <thead>
                    <tr>
                        <th>Usage</th>
                        <th>Date Added</th>     
                    </tr>
                </thead>
                <?php
                foreach ($elec_readings as $elec_reading): ?>
                <tbody>
                    <tr>
                        <td><?php echo $elec_reading['ElecUsage']; ?></td>
                        <td><?php echo $elec_reading['DateAdded']; ?></td>
                    </tr>
                    <?php
                    endforeach;
                    ?>
                </tbody>
            </table>
        </div>
    </div>

Controller class:

<?php
require_once('../Model/readingsModel.php');
require_once('../Tool/DrawTool.php'); 

$newReading = new Readings();
// instantiate drawing tool
$draw = new DrawTool();
// parse (render) appliance view
$renderedView = $draw->render('../View/meterReadings.php', array('elec_readings' => $newReading->getElecReadings()), 
    array('gas_readings' => $newReading->getGasReadings()));

echo $renderedView;

?>

As i said above. Insertion works fine. But i want to see the data appear instantly instead of having to refresh.

Any ideas?

Thanks

Answer 1

All it really does it act like a browser and in the background hit that page. You can either choose to call back data or not, but it's as if your browser has gone to that page, so you treat it like any other page. This is just a hack cut and paste but this is probably close:

index.php (whatever your initial page is called):

    <!-- use the id to target the form -->
    <form id="elecRead" method="POST">
        <h2>Electricity Usage</h2>
        <!-- You just have an empty container where your ajax will return -->
        <div id="errors"></div>
        Please enter your latest electricity meter reading:
        <br>
        <input type="text" name="txtElecUsage" required/>
        <br>
        <input type="submit" name="btn-submitElecUsage" value="Submit"/>

    </form>
    ...etc...

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

    <script>
    // When page is done loading
    $(document).ready(function(){
        // When this particular form is submitted
        $('#elecRead').submit(function(e){
            // Stop normal refresh of page
            e.preventDefault();
            // Use ajax
            $.ajax({
                // Send via post
                type: 'post',
                // This is your page that will process the update 
                // and return the errors/success messages
                url: "page2.php",
                // This is what compiles the form data
                data: $(this).serialize(),
                // This is what the ajax will do if successfully executed
                success: function(response){
                    // It will write the html from page2.php into an 
                    // element with the id of "errors", in our case
                    // it's a div
                    $('#errors').html(response);
                },
                //  If the ajax is a failure, this will pop up in the console.
                error: function(response){
                    console.log(response);
                }
            });
        });
    });
    </script>

page2.php (processing page):

<?php
// Page two just contains the processing of the update
// so include everything that you need to do that
session_start();
require_once(__DIR__.'/../Config/config.php');
require_once(__DIR__.'/../Model/readingsModel.php');
// Check for the post
if(isset($_POST['btn-submitElecUsage'])){
        // Create the instance of your class that does the update and error
        // handling/rendering
        $newReading = new Readings();
        $eUsage = strip_tags($_POST['txtElecUsage']);

        try {
            if($newReading->enterElecReadings($eUsage)){    
                $elecNotif[] = "Reading successfully entered.";
            }
        } catch (Exception $e) {
            echo $e->getMessage();
        }
    }
// I am just using a buffer, but you don't need it
ob_start();
    // I presume this variable is on an included page, I don't see it 
    // anywhere but if you include the same stuff as your initial page,
    // it should show up here fine
    if(isset($elecError)){
        foreach($elecError as $elecError){
            ?>
            <div class="alert alert-danger">
                <?php echo $elecError; ?>
            </div>
            <?php
        }
    }

    if(isset($elecNotif)){
        foreach($elecNotif as $elecNotif){
            ?>
            <div class="alert alert-danger">
                <?php echo $elecNotif; ?>
            </div>
            <?php
        }
    }

$data = ob_get_contents();
ob_end_clean();
// Just print the contents of the page and your ajax on page 1
// will take this content and place it in the <div id="errors"><div>
die($data);

Answer 2

With pure php you can't do it without refreshing the page. So use AJAX!

Here's a little example

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="name"/>
        <input type="submit" id="submit" value="Send"><br/><br/>
        <div id="response"><div>

        <script>
        $(document).ready(function(){
            $('#submit').click(function(e){
                e.preventDefault();
                var value = $('#name').val();
                if (value != ''){
                    $.ajax({
                        type: "POST",
                        url: "your_process_file.php",
                        data: { name:value },
                        success: function(data){
                            $('#response').html(data);
                        },
                        fail: function(data){
                            $('#response').html('There is an error!');
                        }
                    });
                }
            });
        });
        </script>
    </body>
</html>

And your_process_file.php could look like:

$name = $_POST['name'];
$stmt = $db->prepare('SELECT * FROM tblName WHERE name=?');
$stmt->execute([$name]);
while ($row = $stmt->fetch()){
    echo $row['col1'],' ',$row['col2'],' ',$row['colN'];
}

And assuming you have some data in a db table:

id name address

1 abc address1

2 def address2

Then, when you write in the textbox, fe, abc the whole row from the table will be returned inside the <div id="response"></div> without refreshing the page.

OBS: I assume there might be some errors in the code, as I didn't test it.