473,326 Members | 2,175 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Load more data using ajax

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
2 1758
Dormilich
8,658 Expert Mod 8TB
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
I have updated my question may be now you can help.
Oct 27 '15 #3

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

Similar topics

6
by: davvid | last post by:
hello, please I would like to know if it's possible to load data in hierarchical table structure with identity column used as pk (for all the tables) : I mean table root (Id_root(pk,identity...
0
by: drec | last post by:
I have a table in which its primary key is auto-incremented. Yet, when I try to load data using load data infile, this column will not auto-increment. I am leaving that column blank in my file to...
0
by: abrahamvk | last post by:
Hi, How to load data into Japanese DB2 Database using DB2 Load Utility, where the table column names are in Japanese in windows environment. We could successfully load Japanese data into a table...
1
by: ghjk | last post by:
I'm developing web application using php. In there i want to refresh one of my table which is having mysql data, using ajax. How can I do that? I didn't know anything about ajax and could you please...
2
by: heybobo | last post by:
Hi, my aim is to display the content of my json data i receive from my php file. php is sending : PHP---> $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
0
by: Pramoddb2 | last post by:
Hi, I am getting below error CLI0109E String data right truncation. SQLSTATE=22001 while trying to load data using an local application T05 in my project. this is an JAVA based application...
0
by: karimkhan | last post by:
I have created php code which shows google chart when page is loaded using mysql data and php. I want ajax_form_temp.php has button on which one click then chart should appear without page load using...
2
by: milatif19 | last post by:
I can get the text file data from Apache but not the xml file data. Both files are in the same place on C:\xampp\htdocs\mdata. The code for the xml data is this: <!DOCTYPE html> <html>...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.