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, it happens that someone can put their name and bid, place a bid, then the page will update the new bid for them (provided that it is higher than the current one). Unfortunately, this only refreshes the page for those who posted the application.
I would like the page to be updated for everyone who is currently looking at it, so they can be sure that the bid is higher than the current bid.
I looked online, but I can not find much that helps me, I saw how this was done with the help of the so-called survey, or, alternatively, AJAX and jQuery. However, I am not sure that they are the same.
Here is a snippet of my HTML code, this code retrieves 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 is sent to a PHP page to actually place 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 finally, here is a snippet of my PHP. This code places bets in 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);
?>
Thus, the code I showed here only places bets, etc. I want to make sure that these new bids are shown to everyone on the page. At the moment, the only way to show that someone has gone to the page after placing a bid, or that the user manually refreshes the page.
I would like to be able to practically "click" any updates in the MySQL database onto a web page.
If anyone could give me advice or code snippets on how I can do this, I would really appreciate it.
Thanks for reading, if you need more information let me know.