Question

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 🙂

Answer 1

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.