CODEWITHSUNDEEP
phpjqueryhtmlmysqlajax
Barnold
Barnold

Reputation: 130

How can I update the displayed values on my page when MySQL records change?

I am trying to create a very simple auction page and I am getting closer and closer thanks to this community.

The page is very simple, what happens is that someone can put their name and a bid, place the bid, then the page will refresh for them with the new bid (providing it is higher than the current). Unfortunately, this only refreshes the page for whoever placed the bid.

I would like the page to update for everyone currently looking at it, so they can make sure to bid higher than the current bid.

I have looked online but cannot find much that helps me, I have seen this done with something called polling, or alternatively AJAX and jQuery - However I am not sure if these are the same.

Here is a snippet of my HTML code, this code retrieves the auctions:

<div class="auction-main">
<h1 class="auction-title">Bathroom Accessories</h1>

<?php
$con=mysqli_connect("xxxx","xxxx","xxxx","xxxx");

if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * From auction WHERE category = 'Bathroom' ORDER BY ID DESC");


while($row = mysqli_fetch_array($result))
  {
    echo "<form name='auction' id='auction" . $row['ID'] . "'>
            <input type='hidden' name='id' value='" . $row['ID'] . "' />
            <div class='auction-thumb'>
                <div class='auction-name'>" . $row['Item'] . "</div>";
            echo "<img class='auction' src='" . $row['ImagePath'] . "' />";
            echo "<div class='auction-bid'>Current Bid: £<div class='nospace' id='" . $row['ID'] . "'>" . $row['CurrentBid'] . "</div></div>";
            echo "<div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname' autocomplete='off'/></div>";
            echo "<div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid' autocomplete='off'/></div>";
            echo "<div class='auction-bid'><input type='submit' name='submit' value='Place Bid!' /></div>";
    echo "</div></form>";
  }
echo "</table>";

mysqli_close($con);

?>

Here is a snippet of my jQuery, this code posts to the PHP page to actually place the bids:

<script>
    $(document).ready(function(){
        $('form[name="auction"]').submit(function(){
            var id = $(this).find('input[name="id"]').val();
            var bidname = $(this).find('input[name="bidname"]').val();
            var bid = $(this).find('input[name="bid"]').val();
            var currentbid = $('#'+id).text();
            var itemdesc = $(this).find('.auction-name').text();

            if (bidname == '')
            {
                alert("No name!")
                return false;   
            }

            if (bid > currentbid)
            {
                alert("Bid is greater than current bid");   
            }
            else
            {
                alert("Bid is too low!");
                return false;   
            }

            $.ajax({
            type: "POST",
            url: "auction-handler.php",
            data: {bidname: bidname, bid: bid, id: id, itemdesc: itemdesc},
            success: function(data){
                window.location.reload();
                bidname = '';
                bid = '';
                currentbid = '';
            }
        });
        return false;

        }); 
    });
</script>

And then finally, here is a snippet of my PHP. This code posts the bids to the MySQL database:

<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);

$con=mysqli_connect("lena","Admin","1tadm1nI","auction");

if (mysqli_connect_errno())
    {
            echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

$bidname = $_POST['bidname'];
$bid = $_POST['bid'];
$id = $_POST['id'];
$itemdesc = $_POST['itemdesc'];

$query = "UPDATE auction SET CurrentBid = '$bid', Bidder = '$bidname' WHERE ID = '$id'";

$query2 = "INSERT INTO auction_log (Item, Bid, Bidder) VALUES ('$itemdesc','$bid','$bidname')";



mysqli_query($con, $query) or die(mysqli_error());

mysqli_query($con, $query2) or die(mysqli_error());

mysqli_close($con);
?>

So the code I have shown here only places the bids etc. What I want to achieve is to be able to show these new bids to everyone currently on the page. Currently the only way they appear is if someone has gone onto the page after the bid has been placed, or the user manually refreshes the page.

I would like the ability to be able to almost 'push' any updates on the MySQL database, to the webpage.

If anyone could give me advice, or code snippets on how I can achieve this, I would really appreciate it.

Thank you for reading, if you need anymore information let me know.

Upvotes: 4

Views: 244

Answers (1)

Anand Singh
Anand Singh

Reputation: 2363

What you are looking for is called Realtime.

You can achieve this with different methods.For now with Ajax you can send some request in some interval to server and check if anything happened and If anything happened you can update it to view. Its called pooling.

For more you can see this awesome answer https://stackoverflow.com/a/12855533/3143384.

Hope this will save your time.

Upvotes: 2

Related Questions