By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,575 Members | 1,377 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,575 IT Pros & Developers. It's quick & easy.

How to make "Load More" button? (similar to Facebook, twitter etc.)

ilya Kraft
100+
P: 134
Hello,

I am working on a site where users post their small articles. All articles display on my homepage. I would like to display 20 articles and then have "Load More" button at the bottom that ,when clicked, loads 10 more articles and again when clicked loads 10 more articles and so on.
similar button to one facebook has at the bottom of the wall "Older posts" .
Does anyone know how this can be achieved? If you know any good tutorials on this, could you please post them?
May 26 '11 #1
Share this Question
Share on Google+
2 Replies


100+
P: 1,059
Here is a simple example. If it does not ring the bell......

Test.htm
Expand|Select|Wrap|Line Numbers
  1. <script language="Javascript">
  2. Current=1;
  3. function xmlhttpPost(strURL) {
  4.     var xmlHttpReq = false;
  5.     var self = this;
  6.     // Mozilla/Safari
  7.     if (window.XMLHttpRequest) {
  8.         self.xmlHttpReq = new XMLHttpRequest();
  9.     }
  10.     // IE
  11.     else if (window.ActiveXObject) {
  12.         self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  13.     }
  14.     self.xmlHttpReq.open('POST', strURL, true);
  15.     self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  16.     self.xmlHttpReq.onreadystatechange = function() {
  17.         if (self.xmlHttpReq.readyState == 4) {
  18.             // updatepage(self.xmlHttpReq.responseText);
  19.             Current=parseInt(self.xmlHttpReq.responseText);
  20.             document.getElementById('trick').innerHTML+="<TR><TD>"+self.xmlHttpReq.responseText+"</TD></TR>";
  21.         }
  22.     }
  23.     self.xmlHttpReq.send("Current="+Current);
  24. }
  25. </script>
  26. <TABLE id='trick'>
  27.     <TR>
  28.         <TD style='color:pink;border:1px solid black'>
  29.             1
  30.         </TD>
  31.     </TR>
  32. </TABLE>
  33. <button onclick="xmlhttpPost('next.php')">Try</button>
  34.  
next.php
Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     $Current=$_POST['Current'];
  3.     $Current++;
  4.     echo $Current;
May 27 '11 #2

ilya Kraft
100+
P: 134
Dude ;D

thank you I understood most of code and I think I can now make this )))
May 27 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.