my jquery isn't auto refreshing, with the following code, is there any issue with it(seeBelow). I basically want it to check if any new bids have been placed and then update the html :)
EDIT:
function checkBids(){
var id = $('div.auction').attr('id')
$.ajax({
url: 'http://localhost/tinybid/index.php/auction/auctiondata',
dataType: 'json',
success: function(json){
if (json['i'] = 'product'+id) {
$('li.user').html(json['u']);
$('li.curPrice').html(json['p']);
}
}
});
}
$(document).ready(function() {
setInterval(checkBids, 1000);
});
Here is the auctiondata -
function auctiondata(){
$this->load->model('Auction_model', 'Auction');
$this->load->model('Bid_model', 'Bid');
$this->load->model('Customer_model', 'Customer');
$auctions = $this->Auction->getAllAuctions();
foreach ($auctions as $auction){
$lastBid = $this->Bid->getLastBid($auction['auction_id']);
$user = $this->Customer->getUserById($lastBid['user_id']);
$bid = strtotime($lastBid['end_time']);
$json[] = array(
'i' => $auction['auction_id'],
't' => $bid,
'p' => '£ '.$auction['current_price'],
'u' => $user['username']
);
}
echo json_encode($json);
}
EDIT 15:13 15/12/2011: here is the json output from the data : [{"i":"1","t":1323961871,"p":"£ 0.23","u":"joe2011uk"},{"i":"2","t":1323957557,"p":"£ 0.03","u":"joe2011uk"}]
the page is displaying the previous bid for i:1,
still not updating
Can anyone help, thanks for your time
Kerry :)
You're using checkBids()
's return
value, which is actually null
use setInterval('checkBids()', 1000);
You need to remove the ()
from the way you pass checkBids
to setInterval
.
By suffixing the function name with ()
, you are calling checkBids
, and passing the return value to setInterval
- which in your case in null
(because you don't call return
at any point). This will result in checkBids
being called once, and only once.
A function is like any other "value" (object) in Javascript - you pass it around just as you would a string or a number.
You can do what @Shvelo suggested and use the syntax you used, but wrap it in quotes to turn it into a string. However, you should not do this - this effectively means that setInterval
calls eval()
on the string you passed, which is inefficient and prone to errors. JSLint will not like you for doing it either.
Change
setInterval(checkBids(), 1000);
to
setInterval(checkBids, 1000);
Also, swap your two code segments around - you should define your function before you try and use it anywhere.
EDIT
After the long discussion below, I think you want to do this in you success function.
If you give your individual auction <div>
s IDs of auction<id>
, where <id>
is the numeric ID returned in json['i']
, then do this:
// ...
success: function(json) {
for (var i = 0; i < json.length; i++) {
$('#auction'+json[i]['i']+' li.user').html(json[i]['u']);
$('#auction'+json[i]['i']+' li.curPrice').html(json[i]['p']);
}
}
// ...
I think it should do what you want.
the
setInterval(checkBids(), 1000);
would be better with either quotes (ugh, uses eval) or wrapped:
setInterval(function(){checkBids();}, 1000);
slight fix to your syntax:
if (json['i'] = 'product'+id) {
should be
if (json['i'] == 'product'+id) {
or
if (json['i'] === 'product'+id) {