/*load_data.php*/
<?php
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];
if($action <> "get")
{
?>
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Load Data while scrolling 9lessons tutorials</title>
<link rel="stylesheet" href="9lessons.css" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/pure.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,
function(data){
if (data != "") {
$(".message_box:last").after(data);
}
$('div#last_msg_loader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $
(window).height()){
last_msg_funtion();
}
});
});
</script>
</head>
<body>
<div align="center" >
<div>
</div>
<?php
include('load_first.php');
?>
<div id="last_msg_loader"></div>
</div>
</body>
</html>
<?php
}
else
{
include('load_second.php');
}
?>
/*load_first.php*/
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/pure.js"></script>
<script>
$.getJSON('first.json', function(data) {
var directive={
'div#message_list':{
'obj<-msg_list':{
'div.message_box @id':'#{obj.msg_id}',
'span#num':'obj.msg_id',
'label#msg':'obj.message'
}
}
};
$('div#contentData').render(data, directive);
});
</script>
<div id="contentData">
<div id="message_list">
<div id="" align="left" class="message_box" >
<span class="number" id="num"></span><label id="msg"></label>
</div>
</div>
</div>
/*load_second.php*/
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/pure.js"></script>
<script>
$.getJSON('second.json', function(data) {
var directive1={
'div#msg_list':{
'msg<-msg_list':{
'div.message_box @id':'#{msg.msg_id}',
'span#val':'msg.msg_id',
'label#msg1':'msg.message'
}
}
};
$('div#contentData2').render(data, directive1);
});
</script>
<div id="contentData2">
<div id="msg_list">
<div id="" align="left" class="message_box">
<span class="number" id="val"></span><label id="msg1"></label>
</div>
</div>
</div>
/*first.json*/
{
"msg_list":[
{
"msg_id":1,
"message":"A"
},
{
"msg_id":2,
"message":"B"
},
{
"msg_id":3,
"message":"C"
},
{
"msg_id":4,
"message":"D"
},
{
"msg_id":5,
"message":"E"
},
{
"msg_id":6,
"message":"F"
},
{
"msg_id":7,
"message":"G"
},
{
"msg_id":8,
"message":"H"
},
{
"msg_id":9,
"message":"I"
},
{
"msg_id":10,
"message":"J"
},
{
"msg_id":11,
"message":"A"
},
{
"msg_id":12,
"message":"B"
},
{
"msg_id":13,
"message":"C"
},
{
"msg_id":14,
"message":"D"
},
{
"msg_id":15,
"message":"E"
},
{
"msg_id":16,
"message":"F"
},
{
"msg_id":17,
"message":"G"
},
{
"msg_id":18,
"message":"H"
},
{
"msg_id":19,
"message":"I"
},
{
"msg_id":20,
"message":"J"
}
]
}
/*second.json*/
{
"msg_list":[
{
"msg_id":"21",
"message":"A"
},
{
"msg_id":"22",
"message":"B"
},
{
"msg_id":"23",
"message":"C"
},
{
"msg_id":"24",
"message":"D"
},
{
"msg_id":"25",
"message":"E"
},
{
"msg_id":"26",
"message":"F"
},
{
"msg_id":"27",
"message":"G"
},
{
"msg_id":"28",
"message":"H"
},
{
"msg_id":"29",
"message":"I"
},
{
"msg_id":"30",
"message":"J"
}
]
}