Gmail like page updation(refresh)

[avvllvva]

Hi,

 

all of you know that, in Gmail, whenever a new mail comes, it will show in the top row without a page refresh- without a ajax refresh - even without a appear/disappear of any layers.

 

I need similar one in my website.

 

That means, suppose I'm in a News listing page(these news are coming from database ) and the same time database is updated with one new record (ie; adding a new News). I want to display this new record on the top of the news listing page without a page refersh  same as gmail , that I explained above.

 

Can anybody tell me how to implement this?

 

Thanks

[AngelicS]

without a ajax refresh -

 

According to what I know, the only way to get something from the database, or from the server itself, without refreshing the page, is by using AJAX.

 

I don't think there is any other way.

 

Edit:

 

What you'll have to do is set a JavaScript timer, and every time the timer reaches 0, run an AJAX function, and reset the timer. That will set it in a loop, and the AJAX function will get what you need from the database and insert it into the news div.

 

Best wishes

//AngelicS

[Garethp]

They use AJAX. They're famous for they're AJAX. They're the ones that use AJAX the most as it was just taking off

[avvllvva]

okay , I know, but in ajax we have to wait for the server response after sending a request , in this mean time user will be inactive , I don't want this. Suppose if we are using ajax,  the DIV layer that contains the news list(10-20 records) will be refreshed. So there should be some delay in the request-response timing. But look at Gmail they are not refreshing the 'listing area' but only the top row (maybe). I want that technique, I know the only way is ajax but I have no idea how to do it in this manner.

[avvllvva]

My only concern is , the user will not get a feeling like the page or layer is refreshing.

 

ie; avoid the whole refresh of the Div layer which contains the news listing. Instead

only the top row is refreshing ( something like that).

 

 

Any ideas ?

[AngelicS]

The following code is normal HTML DOM:

 

<div id="test">
Lalalalalalala
</div>
<div>
<input type="button" value="click here" onclick="getElementById('test').innerHTML+='testtesttest'" />
</div>

 

What it does is, when the button is pressed, it adds the text "testtesttest" after the "lalalalalala.."

 

You can do the same thing but with ajax.

 

When the timer expires, run a PHP script, and make sure you add the following code in the end of the function:

 

getElementById('TheDivId').innerHTML+=xmlhttp.responseText;

 

Inside the PHP script, check if there are any new news. If there is any new news item, make sure that you echo it.

 

Hope this isn't confusing. You'll need to define the xmlhttp before you can use this function.

Here's a link that might help.

 

W3Schools - Ajax

http://www.w3schools.com/ajax/ajax_browsers.asp

 

Best wishes

//AngelicS