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

Load more data using ajax

P: 19
Here in my code below I display posts in table that has 3 columns i am limiting posts so initially only two rows are visible now I want to add load more button which shows few more posts and then few more untill all posts are viewed I tried many ajax and javascript codes but couldn't find a way.
This is my full code with two files here problem is once I click load more same six posts appear again so how to call next six posts by id and another problem after i click show more button it changes to loading and after that it doesn't go away though the new posts have a show more button under them but last show more button is replaced by loading which always remains there.
mains.php

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     $(document).on('click','.show_more',function(){
  4.         var ID = $(this).attr('id');
  5.         $('.show_more').hide();
  6.         $('.loding').show();
  7.         $.ajax({
  8.             type:'POST',
  9.             url:'ajax_more.php',
  10.             data:'id='+ID,
  11.             success:function(html){
  12.                 $('#show_more_main'+ID).remove();
  13.                 $('#posts').append(html);
  14.             }
  15.         });
  16.  
  17.     });
  18. });
  19. </script>
  20.  
  21.  
  22.     $sql = "SELECT * FROM posts order by id desc limit 6";
  23.     $query = $db->prepare($sql);
  24.     $query->execute();
  25.     $row = $query->fetch(PDO::FETCH_ASSOC);
  26.     $ID = $row['id'];
  27.  
  28.     <div id="posts"> 
  29.     <table>
  30.     <tr>
  31.     <?php do { //horizontal looper?>
  32.     <td>
  33.     <div>id</div>          
  34.     <div>title</div>
  35.     <div>body</div>          
  36.     <div>date</div>
  37.     </td>
  38.     <?php
  39.     $row = $query->fetch(PDO::FETCH_ASSOC);
  40.     if (!isset($nested_List)) {
  41.     $nested_List= 1;
  42.     }
  43.     if (isset($row) && is_array($row) && $nested_List++%3==0) {
  44.     echo "</tr><tr>";
  45.     }
  46.     } while ($row); //end horizontal looper 
  47.     ?>
  48.     </table>
  49.     <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
  50. <span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
  51. <span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
  52. </div>
  53.     </div> 
  54.  
ajax_more.php

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. include('/inc/connect.inc.php');
  3.  
  4. if(isset($_POST["id"]) && !empty($_POST["id"])){
  5.  
  6. $sql = "SELECT * FROM posts order by id desc limit 6";
  7. $query = $db->prepare($sql);
  8. $query->execute();
  9. $row = $query->fetch(PDO::FETCH_ASSOC);
  10. $ID = $row['id'];
  11. ?>
  12.  
  13. <table>
  14.     <tr>
  15.     <?php do { //horizontal looper?>
  16.     <td>
  17.     <div>id</div>          
  18.     <div>title</div>
  19.     <div>body</div>          
  20.     <div>date</div>
  21.     </td>
  22.     <?php
  23.     $row = $query->fetch(PDO::FETCH_ASSOC);
  24.     if (!isset($nested_List)) {
  25.     $nested_List= 1;
  26.     }
  27.     if (isset($row) && is_array($row) && $nested_List++%3==0) {
  28.     echo "</tr><tr>";
  29.     }
  30.     } while ($row); //end horizontal looper 
  31.     ?>
  32.     </table>
  33.     <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
  34. <span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
  35. <span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
  36. </div>
  37. <?php
  38.    }
  39. ?>
  40.  
Oct 27 '15 #1
Share this Question
Share on Google+
2 Replies


Dormilich
Expert Mod 5K+
P: 8,639
I tried many ajax and javascript codes but couldn't find a way.
so, what exactly have you tried and what didn’t work out?

PS. we’re not going to write your AJAX component for you.
Oct 27 '15 #2

P: 19
I have updated my question may be now you can help.
Oct 27 '15 #3

Post your reply

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