SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Using Ajax to pro-actively update page contents?

    I have had a feature idea i've wanted to implement using ajax for a while.

    Consider that you are looking at an auction page. In the event that a new bid is placed while someone is looking at the page, I want the page to update without a refresh so that the new bid and the new bidder are now visible.

    Now you might think that this is impossible, but I beg to differ. I got the idea here: http://ht.bidz.com

    As you can see they are somehow using flash to connect to their backend and update the time + amount whenever a bid is placed.

    Now i'm guessing that its currently impossible to actually update the page unless you are constantly checking for changes in the database. So I thought perhaps running a script every few seconds to determine if there is anything new to show. The problem I guess will be overhead.

    Does anyone have any ideas on how I could create such a feature?
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the JavaScript framework called prototype there's a function Ajax.periodicalUpdater that you can use to achieve what you want.

    If you want to use Flash to update the contents of a page, you can use an interval function to check if the database was updated. Actually, you check a PHP file that outputs XML with all the new bids. In the ActionScript you can store the time of the last retrieved record, and when you check the database again, you post that stored time to the PHP file so it can return only records newer than x time.
    To then output new records to the browser, you can use JavaScript.
    Create a nice and simple function with a couple of parameters like this:
    Code:
    function updateBids (id, name, bid)
    {
        var div = document.createElement('div');
        div.setAttribute('id', id);
        div.innerHTML = name + '<span class="bid">' + bid + '</span>';
        document.getElementById('bids').appendChild(div);
    }
    In the ActionScript you can call the JavaScript function by using getURL('javascript:updateBids("'+id+'", "'+name+'", "'+bid+'");');

    Good luck
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hexburner View Post
    Actually, you check a PHP file that outputs XML with all the new bids. In the ActionScript you can store the time of the last retrieved record, and when you check the database again, you post that stored time to the PHP file so it can return only records newer than x time.
    I confess to be a total ajax newbie, and only beginner level with javascript. Going off what you just said, does this logic sound right:

    constantly update an xml file (probably I would do this with a cron job) every few seconds, so that I reduce the amount of database queries. Then, i'm using javascript/ajax to constantly read that file and determine whether any new bids have been placed?

    I will be fine with the php/mysql side but the javascript I don't even know where to start. Only a few hours ago I got my first ever bit of ajax working, that retrieves a database row when an option is selected in a drop down menu without page refresh

    EDIT: after a few hours playing with prototype, i'm so glad you provided this link... surely it must be responsible for some huge learning shortcuts - I already have achieved the functionality I want, I was expecting this to take a week... all thats left now is to tweak and to investigate options for non-javascript enabled users
    Last edited by wheeler; Jul 9, 2007 at 04:42.
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  4. #4
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wheeler View Post
    Going off what you just said, does this logic sound right:

    constantly update an xml file (probably I would do this with a cron job) every few seconds, so that I reduce the amount of database queries. Then, i'm using javascript/ajax to constantly read that file and determine whether any new bids have been placed?
    If you post the request to a PHP-file, you can easily write a PHP-script that retrieves data from the database inserted after a specific time and output the results in XML-format. It's a total waste of time updating an XML-file using crons. You can post the last time you retrieved data from within the ActionScript through the GET or POST method, you'll have to check the AS docs about that.
    FOR SALE: 1 set of morals, never used, will sell cheap

  5. #5
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers i'll look into this... actually I don't think I want to use flash/actionscript if I don't have to because that means the page is going to be dependant on flash and javascript being available.
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  6. #6
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realize that I can retrieve the relevant info from the database in a basic script, but because I plan to check this data somewhere between every 1-5 seconds (plus using prototype's decay to let it die off over time if nothing is changing) on every open item page, I figure this could turn into a massive hit for mysql.

    My thinking was to write to a single xml file instead, and have php/javascript relay the current values to the page. The theory being the server will be happier accessing a a pre-made file rather than running potentially xxx (or more) mysql queries per second. Perhaps i'm underestimating how much the server can handle?

    BTW I won't be using flash/actionscript at all.... this would mean i'd need modern javascript enabled browser plus flash plugin, probably a bit much in terms of accessibility... although I will have a non-ajax static version in <noscript> tags.
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •