Google style page loading , Bulk records not on onload, display some and fetch remain in back? - ajax

Question

I'm developing a web application,after login the user is redirected to the inbox page,
where he will find many widgets, each with hundreds of records.
So it is taking too much time to open inbox page after login success.Very much performance issue.
So i want to display some(5-10) records in each widget
and after the page loads in the backend(user doesn't know) the request will be processing still and fetch the records and append them to the widget records.
Eg. If you open google images and search for cricket, it will display the page with images and if you scroll down only you will come to know the ajax request going and appending the response to the web page,
But it is not waiting till the entire page is loaded.
I must develop my application in the same way.
Any idea is Highly Appreciated and sample code too.

Answer 1

This should work for you, Mr.Chowdary.
You would need something to handle your requests in the backend. Since you did NOT specify whether you used Java or PHP or Python or whatever, I used PHP - its what I know best :D
PSEUDO CODE (loadmore.jsp)
Begin
widget = URL(widget) //the widget id or name
page = URL(page) //the page being retrieved
switch (widget)
{
case "widget1":
data_for_widget1 = paginated_query1(page)
print data_for_widget1
break
case "widget2":
data_for_widget2 = paginated_query2(page)
print data_for_widget2
break
default :
print "Invalid Widget"
break
}
End
PHP Version
<?php
if (isset($_GET['page'])) {
$widget = $_GET['page'];
$page = $_GET['page'];
switch ($widget) {
case "MyWidget1": //dynamic example
$manyManyItems; //A massive array of items
$pages = array_chunk($manyManyItems, 5); //break it up into chunks of 5 items
if( array_key_exists ($pages[$page]) )
for ($i = 0; $i < count($pages[$page]); $i++) { //load those chunks
echo '<div class="item">'.$pages[$page][$i].'</div>';
}
else {
echo "zero"; //code word that tells ajax that there is nothing more to load
}
break;
case "MyWidget2": //manual example
if($page==1) { //loads the first chunck manually
echo '<div class="item">dynamic content 1</div>';
echo '<div class="item">dynamic content 2</div>';
echo '<div class="item">dynamic content 3</div>';
}
elseif($page==2) { //loads the next batch
echo '<div class="item">dynamic content 1</div>';
echo '<div class="item">dynamic content 2</div>';
echo '<div class="item">dynamic content 3</div>';
}
else
echo "zero"; //code word that tells ajax that there is nothing more to load
break;
default:
echo "zero"; //code word that tells ajax that there is nothing more to load
}
}
?>
HTML
Each widget could look like this
<div id="MyWidget1" class="widget" data-widgetPage="0">
<div class="item">default content</div>
<div class="item">another default content</div>
...
<div class="loadmoreajaxloader" style="display:none;"><center>Loading...</center></div>
</div>
Javascript
<script type="text/javascript">
$(".widget").scroll(function()
{
if($(this).scrollTop() == $(this).height() - $(this).height())
{
var nextPage = eval($(this).attr("data-widgetPage") + 1);
$(this).find('.loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php?widget="+$(this).attr("id")+"&page="+nextPage,
success: function(html)
{
if(html != "zero")
{
$(this).append(html);
$(this).('.loadmoreajaxloader').hide();
}else
{
$(this).find('.loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
$(this).attr("data-widgetPage", nextPage);
}
});
</script>
Success with the app.

Answer 2

I got to know the following answer suits my requirement from the following site.. Jquery endless scrolling