AJAX auto update depending on database value??

Question

nonshatter 26 Posting Whiz

14 Years Ago

Hi all,

I have a been developing an Online auction website using PHP and Mysql for the last few weeks. I have implemented everything including the 'bidding', 'buy it now' options of the auction etc.

I don't know much about AJAX to be honest, but I think it is the technology I need for this... My requirement is to devise a way of updating (in real-time) the current price of a particular auction product as more and more users bid on the item. Once a user bids on the item, the bid table of the database is updated with the highest bidders price. So once this value changes in the database, would it be possible to update the price on the webpage? Obviously, it is important for this update to be as accurate as possible to maintain the integrity of the auction.

Does anyone know of a method or technique to achieve a similar functionality? ANY help is much appreciated!

Thanks,
Nonshatter

javascript

3 Contributors
8 Replies
4K Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by fxm

sergb 7 Junior Poster

14 Years Ago

AJAX allows you to send a full request to the server, but without disturbing the displayed page. The request is sent and the response is handled in javascript.

To acheive what you want, you can poll the server for the current price of the item at regular intervals. You can do that in JavaScript using the setInterval function. The function that would be called periodically, will send an AJAX request to the server, and handle the response by updating the displayed price on the page. On the server side, you can write a page that prints the price of the requested item.

PHP page that returns the price:

<?php
$item_id = $_GET['id'];
$price = get_price_by_id($id);
echo $price;
?>

For easy handling of AJAX requests (and many other benefits) take a look at the jQuery javascript library. You code could be as easy as the following:

function requestPrice() {
    // URL of the above page. The time parameter is to prevent caching...
    var url = "getprice.php?id=123&time=" + (new Date()).getTime();
    // Make a GET request and put the response in the HTML element with id priceElement
    jQuery("#priceElement").load(url);
}

// Poll every 3 seconds.
setInterval(requestPrice, 3000);

Hope this helps.

sergb 7 Junior Poster

14 Years Ago

You have your HTML (especially the priceElement) in the wrong file. Your getprice.php page should not generate any HTML. All it needs to echo is the price. Think of your AJAX request as calling a function that returns a float value (the price). The argument to this function is passed in the query string.

So, here is what your getprice.php would look like:

<?php
include ('db.php');
$id = $_GET['auc'];
$getprice = mysql_query("SELECT b_currentprice FROM bid WHERE auction_id = '$id' ORDER BY b_timestamp DESC");
$resultprice = mysql_fetch_assoc($getprice);
$price = $resultprice['b_currentprice'];

echo $price;
?>

And here is the page that displays the price. This is the page that contains the priceElement whose value (innerHTML property) is being updated.

<html>
<body>
Here is the price:
<div id="priceElement"></div>
</body>
</html>
<script type="text/javascript">
function updateBids() {
    // I have left out the date/time just to keep it simple for now.
    // Remember to put the time back (or set appropriate headers) when putting
    // this code in production. Otherwise, the browser will cache the response
    // of getprice.php and will always return that value without even executing
    // getprice.php on the server every time.
    var url = "getprice.php?id=<?php echo $id; ?>";
    // Now, jQuery will be able to find an element with id=priceElement
    // because it exists in the page where this code runs.
    jQuery("#priceElement").load(url);
}

setInterval("updateBids()", 1000);
</script>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nonshatter 26 Posting Whiz · Answer 1 · 2010-05-14T16:45:48+00:00

Thanks, I didn't have a clue where to start but you've helped me get started on this feature. I think I am nearly there but I still haven't been able to get the current price to display on the client-side. I have set it up as follows:

(getprice.php) - When I pass an auction ID to this page, it returns the current price, so given an id, I know this page is returning the correct values.

<?php
include ('db.php');

		$id = $_GET['auc'];
		$getprice = mysql_query("SELECT b_currentprice FROM bid WHERE auction_id = '$id' ORDER BY b_timestamp DESC");
		$resultprice = mysql_fetch_assoc($getprice);
		
		$price = $resultprice['b_currentprice'];
?>

<html>
<head>

</head>
<body>

<div id="priceElement">
	<?php echo $price; ?>
</div>

</body>
</html>

(auction.php?auc=123) - This is the page that displays the auction. The page that I will need to return the current price.

<script type="text/javascript">

    function updateBids() {
     //I have left out the date/time just to keep it simple for now
	var url = "getprice.php?id=<?php echo $id; ?>";
	jQuery("#priceElement").load(url);
}

setInterval("updateBids()", 1000);

</script>

Is there something I am missing? E.g. Is there something else I need to include on the client-side to display the updated price?
Thanks again,
Nonshatter

nonshatter 26 Posting Whiz · Answer 2 · 2010-05-14T19:02:58+00:00

Still nothing. Technically it should work...

<html>
<head>
<script type="text/javascript">
function updateBids() {
	var url="getprice.php?auc=<?php echo $id; ?>";
	jQuery("#priceElement").load(url);
}

setInterval("updateBids()", 1000);
</script>
</head>
<body>
Here is the price: <div id="priceElement"></div>
</body>
</html>

<?php
include ('db.php');

		$id = $_GET['auc'];
		$getprice = mysql_query("SELECT b_currentprice FROM bid WHERE auction_id = '$id' ORDER BY b_timestamp DESC");
		$resultprice = mysql_fetch_assoc($getprice);
		
		$price = $resultprice['b_currentprice'];
		echo $price;
?>

I have tested the getprice.php page on its own (manually giving it an auction id), so there shouldn't be any issues with that... Is there a way I can troubleshoot to see if the URL is actually being sent correctly by the javascript? I'm a bit stumped... Thanks

nonshatter 26 Posting Whiz · Answer 3 · 2010-05-14T20:04:59+00:00

Okay...I've been trying for hours and do you know what it was? I didn't have:

<!DOCTYPE html>

At the top of my page! [ROOKIE MISTAKE]

However, now my whole page doesn't display properly at all?! I've spent hours on my layout and styles etc. Does this mean I will need to change everything again to display my page correctly? : (

fxm 23 Posting Pro · Answer 4 · 2010-05-14T21:48:34+00:00

You might try a better DOCTYPE and/or run your page(s) through a validator.

nonshatter 26 Posting Whiz · Answer 5 · 2010-05-15T04:49:44+00:00

Yea... I'm currently in the process of re-writing my CSS. I am now using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Is this the most 'correct' doctype to use? Or does it not really make much difference? At least I won't make the same mistake again!

fxm 23 Posting Pro · Answer 6 · 2010-05-15T05:31:35+00:00

It makes a major difference. For example, some properties aren't available at all in 'strict'. Some validators will suggest the DOCTYPE(s) that will best fit the page(s) submitted/processed.

Plus, if you're not careful: welcome to the wonderful world of 'quirks mode' in the various IEs.