Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Load more with jQuery, AJAX, PHP and Textpattern
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á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!
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
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)
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
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" />)'>' />
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
Thank you Colak, I have edited my post.
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
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.
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
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 themain
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>
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
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)
Offline
Re: Load more with jQuery, AJAX, PHP and Textpattern
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!
Offline