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

Loading more content in table view using ajax, php.

P: 19
Here are two samples of main page where posts are shown, first page is simple code where 3 posts are shown and below them is a load more button which loads next three posts.

Second code is bit complex it displays three posts in table, means three posts in single row with load more button at their bottom now problem here is when I click show more the next row should have next three posts, but the first post of next row is second post of first row, looks like javascript is catching id of first post instead of last in row so how to make it right?

js
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. </script>
simple page code which works fine
Expand|Select|Wrap|Line Numbers
  1. <div class="posts">
  2. <?php
  3.  
  4. $sql = "SELECT * FROM posts ORDER BY id desc limit 3";
  5. $query = $db->prepare($sql);
  6. $query->execute();
  7. while($row = $query->fetch(PDO::FETCH_ASSOC)){
  8. $ID = $row['id'];
  9. ?>
  10.  <div><h2><?php echo $row['title']; ?></h2></div>          
  11.  <div><p><?php echo $row['body']; ?></p></div>
  12.  <img src='<?php echo $row['pic']; ?>'>
  13.  <div><p><?php echo $row['about']; ?></p></div>
  14. <?php
  15. }
  16. ?>
  17. <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
  18. <span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
  19. <span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
  20. </div>
  21. </div>
table view page code
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. $sql = "SELECT * FROM posts ORDER BY id desc limit 3";
  3. $query = $db->prepare($sql);
  4. $query->execute();
  5. $row = $query->fetch(PDO::FETCH_ASSOC);
  6. $ID = $row['id'];
  7. ?>
  8.  
  9. <div class="posts">
  10. <table>
  11. <tr>
  12. <?php do { //horizontal looper?>
  13. <td>
  14. <div><h2><?php echo $row['title']; ?></h2></div>          
  15. <div><p><?php echo $row['body']; ?></p></div>
  16. <img src='<?php echo $row['pic']; ?>'>
  17. <div><p><?php echo $row['about']; ?></p></div>
  18. </td>
  19. <?php
  20. $row = $query->fetch(PDO::FETCH_ASSOC);
  21. if (!isset($nested_List)) {
  22. $nested_List= 1;
  23. }
  24. if (isset($row) && is_array($row) && $nested_List++%3==0) {
  25. echo "</tr><tr>";
  26. }
  27. } while ($row); //end horizontal looper 
  28. ?>
  29. </table>
  30. <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
  31. <span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
  32. <span class="loding" style="display: none;"><span class="loding_txt">Loading...</span></span>
  33. </div>
  34. </div>
ajax_more.php for table view
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. if(isset($_POST["id"]) && !empty($_POST["id"])){ 
  3. $id=$_POST['id']; 
  4. $query = $db->prepare("SELECT * FROM posts WHERE id < :getid ORDER BY id desc LIMIT 3");
  5. $query->execute(array(':getid'=>$id));
  6. $row = $query->fetch(PDO::FETCH_ASSOC);
  7. $ID = $row['id'];
  8. ?>
  9.  
  10. <table>
  11. <tr>
  12. <?php do { //horizontal looper?>
  13. <td>
  14. <div><h2><?php echo $row['title']; ?></h2></div>          
  15. <div><p><?php echo $row['body']; ?></p></div>
  16. <img src='<?php echo $row['pic']; ?>'>
  17. <div><p><?php echo $row['about']; ?></p></div>
  18. </td>
  19. <?php
  20. $row = $query->fetch(PDO::FETCH_ASSOC);
  21. if (!isset($nested_List)) {
  22. $nested_List= 1;
  23. }
  24. if (isset($row) && is_array($row) && $nested_List++%3==0) {
  25. echo "</tr><tr>";
  26. }
  27. } while ($row); //end horizontal looper 
  28. ?>
  29. </table>
  30. <div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
  31. <span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">Show more</span>
  32. <span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
  33. </div>
  34. <?php 
Oct 29 '15 #1
Share this Question
Share on Google+
3 Replies


Rabbit
Expert Mod 10K+
P: 12,364
That's because your line of code getting the id isn't inside the loop.
Oct 29 '15 #2

Dormilich
Expert Mod 5K+
P: 8,639
this looks like the span you click on has the wrong ID in it (namely the first ID of the posts). you would have to investigate the reason for that.
Oct 29 '15 #3

P: 19
thanks you are right, but when I placed it inside loop it grabs first three posts, on clicking show more no posts are loaded and show more goes away. Now I placed it inside loop

Expand|Select|Wrap|Line Numbers
  1.  <?php do { //horizontal looper?>
  2. <td>
  3. <div><h2><?php echo $row['title']; ?></h2></div>          
  4. <div><p><?php echo $row['body']; ?></p></div>
  5. <img src='<?php echo $row['pic']; ?>'>
  6. <div><p><?php echo $row['about']; ?></p></div>
  7. </td>
  8. <?php
  9. $row = $query->fetch(PDO::FETCH_ASSOC);
  10. $ID = $row['id'];
  11. if (!isset($nested_List)) {
  12. $nested_List= 1;
  13. }
  14. if (isset($row) && is_array($row) && $nested_List++%3==0) {
  15. echo "</tr><tr>";
  16. }
  17. } while ($row); //end horizontal looper 
  18. ?>
Oct 30 '15 #4

Post your reply

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