Load more with jQuery, AJAX, PHP and Textpattern

robhert · 2018-04-21 02:18:54

Hi. I wanted to use the pagination “load more”, so I made my research and found this: http://makitweb.com/load-more-results-with-jqueryajax-and-php/

I did everything it says and it is working. Now, what I need is to make it more “Textpattern friendly”, like use tags, plugins, re-use the Textpattern config.php, hacking-proof and stuff like that, AND:

choose the Category or Section to show, like: <txp:article_custom section=“blog” />
choose the Form, like: <txp:article_custom form=“blog” />
integrate it in my blog page :)

Here goes the scripts I am using:

config.php

<?php
$host = "localhost"; /* Host name */
$user = "user"; /* User */
$password = "password"; /* Password */
$dbname = "database"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

getData.php

<?php
// configuration
include 'config.php';
$row = $_POST['row'];
$rowperpage = 2;
// selecting posts
$query = 'SELECT * FROM textpattern limit '.$row.','.$rowperpage;
$result = mysqli_query($con,$query);
$html = '';
while($row = mysqli_fetch_array($result)){
    $id = $row['ID'];
    $title = $row['Title'];
    $content = $row['Excerpt_html'];
    $shortcontent = substr($content, 0, 160)."...";
    $link = $row['url_title'];
    // Creating HTML structure
    $html .= '<div id="post_'.$id.'" class="post">';
    $html .= '<h1>'.$title.'</h1>';
    $html .= '<p>'.$shortcontent.'</p>';
    $html .= '<a href="'.$link.'" target="_blank" class="more">Ver m&aacute;s</a>';
    $html .= '</div>';
}
echo $html;

script.js

$(document).ready(function(){
    // Load more data
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        var rowperpage = 2;
        row = row + rowperpage;
        if(row <= allcount){
            $("#row").val(row);
            $.ajax({
                url: 'getData.php',
                type: 'post',
                data: {row:row},
                beforeSend:function(){
                    $(".load-more").text("Loading...");
                },
                success: function(response){
                    // Setting little delay while displaying new content
                    setTimeout(function() {
                        // appending posts after last post with class="post"
                        $(".post:last").after(response).show().fadeIn("slow");
                        var rowno = row + rowperpage;
                        // checking row value is greater than allcount or not
                        if(rowno > allcount){
                            // Change the text and background
                            $('.load-more').text("Hide");
                            $('.load-more').css("background","darkorchid");
                        }else{
                            $(".load-more").text("Load more");
                        }
                    }, 2000);
                }
            });
        }else{
            $('.load-more').text("Loading...");
            // Setting little delay while removing contents
            setTimeout(function() {
                // When row is greater than allcount then remove all class='post' element after 3 element
                $('.post:nth-child(3)').nextAll('.post').remove();
                // Reset the value of row
                $("#row").val(0);
                // Change the text and background
                $('.load-more').text("Load more");
                $('.load-more').css("background","#15a9ce");
            }, 2000);
        }
    });
});

style.css

.container{
    width: 55%;
    margin: 0 auto;
    border: 0px solid black;
    padding: 10px 0px;
}
/* post */
.post{
    width: 97%;
    min-height: 200px;
    padding: 5px;
    border: 1px solid gray;
    margin-bottom: 15px;
}
.post h1{
    letter-spacing: 1px;
    font-weight: normal;
    font-family: sans-serif;
}
.post p{
    letter-spacing: 1px;
    text-overflow: ellipsis;
    line-height: 25px;
}
/* Load more */
.load-more{
    width: 99%;
    background: #15a9ce;
    text-align: center;
    color: white;
    padding: 10px 0px;
    font-family: sans-serif;
}
.load-more:hover{
    cursor: pointer;
}
/* more link */
.more{
    color: blue;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 16px;
}

loadmore.php

<?php
include "config.php";
?>
<!doctype html>
<html>
    <head>
        <title>Load more data using jQuery,AJAX, and PHP</title>
        <link href="style.css" type="text/css" rel="stylesheet">
        <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div class="container">
            <?php
            $rowperpage = 2;
            // counting total number of posts
            $allcount_query = "SELECT count(*) as allcount FROM textpattern";
            $allcount_result = mysqli_query($con,$allcount_query);
            $allcount_fetch = mysqli_fetch_array($allcount_result);
            $allcount = $allcount_fetch['allcount'];
            // select first 5 posts
            $query = "select * from textpattern order by ID asc limit 0,$rowperpage ";
            $result = mysqli_query($con,$query);
            while($row = mysqli_fetch_array($result)){
                $id = $row['ID'];
                $title = $row['Title'];
                $content = $row['Excerpt_html'];
                $shortcontent = substr($content, 0, 160)."...";
                $link = $row['url_title'];
            ?>
                <div class="post" id="post_<?php echo $id; ?>">
                    <h1><?php echo $title; ?></h1>
                    <?php echo $shortcontent; ?>
                    <a href="<?php echo $link; ?>" target="_blank" class="more">More</a>
                </div>
            <?php
            }
            ?>
            <h1 class="load-more">Load More</h1>
            <input type="hidden" id="row" value="0">
            <input type="hidden" id="all" value="<?php echo $allcount; ?>">
        </div>
    </body>
</html>

Thank you for any help!

robhert · 2018-04-22 16:28:22

Hi! Meanwhile, I’m porting this to my TXP site, so, first of all, I want to know, how to “convert” the loadmore.php script using smd_query:

<?php
$rowperpage = 2;
// counting total number of posts
$allcount_query = "SELECT count(*) as allcount FROM textpattern";
$allcount_result = mysqli_query($con,$allcount_query);
$allcount_fetch = mysqli_fetch_array($allcount_result);
$allcount = $allcount_fetch['allcount'];
// select first 5 posts
$query = "select * from textpattern order by ID asc limit 0,$rowperpage ";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result)){
    $id = $row['ID'];
    $title = $row['Title'];
    $content = $row['Excerpt_html'];
    $shortcontent = substr($content, 0, 160)."...";
    $link = $row['url_title'];
?>
    <div class="post" id="post_<?php echo $id; ?>">
        <h1><?php echo $title; ?></h1>
        <?php echo $shortcontent; ?>
        <a href="<?php echo $link; ?>" target="_blank" class="more">More</a>
    </div>
<?php
}
?>

I want to make clear I don’t know PHP or MySQL, but I’m trying doing this:

<txp:variable name="rowperpage" value="2" />
<txp:variable name="allcount_query" value='<txp:smd_query query='SELECT count(*) as allcount FROM textpattern'>'>
<txp:variable name="allcount_result"  value='<txp:smd_query query='mysqli_query($con,$<txp:variable name="allcount_query")'>'>
<txp:variable name="allcount_fetch"  value='<txp:smd_query query='mysqli_fetch_array($<txp:variable name="rowperpage" />)'>'>
<txp:variable name="allcount" value='<txp:smd_query query='$<txp:variable name="allcount_fetch" />['allcount']'>' />
<txp:variable name="query" value='<txp:smd_query query='select * from textpattern order by ID asc limit 0,$rowperpage'>' />
<txp:variable name="result" value='<txp:smd_query query='mysqli_query($con,$<txp:variable name="query" />)'>' />

just before the PHP while tag, which looks so odd and confusing to me help needed here:

<txp:php>
while($<txp:variable name="row" value="<txp:smd_query query='mysqli_fetch_array($<txp:variable name="result" />)'>"/>){
<txp:variable name="ID" value="<txp:smd_query query='SELECT count(*) as allcount FROM textpattern'>" />
$id = $row['ID'];
$title = $row['Title'];
$content = $row['Excerpt_html'];
$shortcontent = substr($content, 0, 160)."...";
$link = $row['url_title'];
</txp:php>

Thank you in advance, for any hint.

edited: Quotes corrected (thanks Colak)

Last edited by robhert (2018-04-22 16:57:32)

colak · 2018-04-22 16:40:19

re your variables. Tags in tags are enclosed in single quotes:

<txp:variable name="rowperpage" value="2" />
<txp:variable name="allcount_query" value='<txp:smd_query query='SELECT count(*) as allcount FROM textpattern'>'>
<txp:variable name="allcount_result"  value='<txp:smd_query query='mysqli_query($con,$<txp:variable name="allcount_query")'>'>
<txp:variable name="allcount_fetch"  value='<txp:smd_query query='mysqli_fetch_array($<txp:variable name="rowperpage" />)'>'>
<txp:variable name="allcount" value='<txp:smd_query query='$<txp:variable name="allcount_fetch" />['allcount']'>' />
<txp:variable name="query" value='<txp:smd_query query='select * from textpattern order by ID asc limit 0,$rowperpage'>' />
<txp:variable name="result" value='<txp:smd_query query='mysqli_query($con,$<txp:variable name="query" />)'>' />

robhert · 2018-04-22 16:58:16

Thank you Colak, I have edited my post.

etc · 2018-04-23 07:52:13

Hi Robhert,

it’s not a direct answer to your question, just a hint. Include jQuery in your page (that’s already done, I suppose) and add the following script:

<script>
(function($){
var $main = $("main").first();
$.fn.doScroll = function(e) {
	e.preventDefault();
	var $href = $(this).attr("href");
	$("<div />").load($href + " main > *", function() {
		$(this).find("a[rel=next]").one("click", $.fn.doScroll);
		$main.append($(this).children());
		$(this).remove();
	});
};
$("a[rel=next]").one("click", $.fn.doScroll);
})(jQuery);
</script>

Then clicking “next” link in the default 4.6 theme should append the next page of results to <main /> part of the template. You may need to replace the main selector with your own container where you want the articles to be displayed.

robhert · 2018-04-23 16:11:40

etc wrote #311327:

Then clicking “next” link in the default 4.6 theme should append the next page of results to <main /> part of the template. You may need to replace the main selector with your own container where you want the articles to be displayed.

Hi etc! Thank you for your time. It is working. I see the “next page of results” appended, the only problem is: the old articles are overlapping the “next page” articles. I found my site is using Masonry script, and imagesLoaded function would do the trick, but my intentions has failed. Could you give me a hand?

This is the script, btw:

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": ".grid-sizer", "gutter": ".gutter-sizer", "percentPosition": true, "transitionDuration": "0.3s" }'>
  <div id="blogster">
     <txp:article section="blog" limit="2" form="blog" />
  </div>
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
</div>

<script>
(function($){
var $main = $("#blogster").first();
$.fn.doScroll = function(e) {
   e.preventDefault();
   var $href = $(this).attr("href");
   $("<div />").load($href + " #blogster > *", function() {
      $(this).find("a[rel=next]").one("click", $.fn.doScroll);
      $main.append($(this).children());
      $(this).remove();
   });
};
$("a[rel=next]").one("click", $.fn.doScroll);
})(jQuery);
</script>

etc · 2018-04-23 19:43:02

You could try to call Masonry appended method (not tested):

<script>
(function($){
var $main = $("#blogster").first(), $grid = $main.closest(".grid");
$.fn.doScroll = function(e) {
   e.preventDefault();
   var $href = $(this).attr("href");
   $("<div />").load($href + " #blogster > *", function() {
      $(this).find("a[rel=next]").one("click", $.fn.doScroll);
      var $children = $(this).find(".grid-item");
      $main.append($(this).children());
      $grid.masonry("appended", $children);
      $(this).remove();
   });
};
$("a[rel=next]").one("click", $.fn.doScroll);
})(jQuery);
</script>

Edit: see masonry.desandro.com/methods.html for more methods and examples.

Last edited by etc (2018-04-23 19:56:16)

robhert · 2018-04-23 22:06:45

Hi etc! You are very helpful! It is working. Now I have to continue build my site and get worry about other stuffs. Thank you very much!

Textpattern CMS

Textpattern CMS support forum

#1 2018-04-21 02:18:54