Based on ajax, click to load more refreshing loads to this page, ajax this page

Based on ajax, click to load more refreshing loads to this page, ajax this page

First, we will show you:

Effect demonstration

In this example, the page is displayed by PAGE instead of hiding undisplayed content.

The database structure is the same as that in ajax Paging

JavaScript code

<script type="text/javascript"> $(document).ready(function() {   var track_click = ; //track user click on "load more" button, righ now it is click   var total_pages = <?php echo $total_pages; ?>;   $('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load   $(".load_more").click(function (e) { //user clicks on button     $(this).hide(); //hide load more button on click     $('.animation_image').show(); //show loading image     if(track_click <= total_pages) //make sure user clicks are still less than total pages     {       //post page number and load returned data into result element       $.post('fetch_pages.php',{'page': track_click}, function(data) {         $(".load_more").show(); //bring back load more button         $("#results").append(data); //append data received from server         //scroll page to button element         $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, );         //hide loading image         $('.animation_image').hide(); //hide loading image once data is received         track_click++; //user click increment on load button       }).fail(function(xhr, ajaxOptions, thrownError) {          alert(thrownError); //alert any HTTP error         $(".load_more").show(); //bring back load more button         $('.animation_image').hide(); //hide loading image once data is received       });       if(track_click >= total_pages-)       {         //reached end of the page yet? disable load button         $(".load_more").attr("disabled", "disabled");       }      }     }); }); </script>

XML/HTML code

<div id="results"></div> <div align="center"> <button class="load_more" id="load_more_button">load More</button> <div class="animation_image" style="display:none;"> Loading...</div> </div> 

Fetch_pages.php

Php code

<?php include("conn.php"); $item_per_page = 3; //sanitize post value $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);  //throw HTTP error if page number is not valid if(!is_numeric($page_number)){   header('HTTP/1.1 500 Invalid page number!');   exit(); }  //get current starting point of records $position = ($page_number * $item_per_page);  //Limit our results within a specified range.  $results = mysql_query("SELECT * FROM content ORDER BY id DESC LIMIT $position, $item_per_page");  //output results from database echo '<ul class="page_result">'; while($row = mysql_fetch_array($results)) {   echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>'; } echo '</ul>'; ?> 

The above content is a small series of ajax-based implementation. Click to load more and load the content on this page without refreshing the content. I hope you will like it.