PHP/HTML:
<ul id="load-more-div"></ul>
<a id="load-more" data-ppp="<?php echo get_option('posts_per_page'); ?>">load more</a>
JavaScripts:
(function($) {
// Grab the load more button, since I only want to run the code if the button is on the page
var loadMoreButton = $("#load-more");
if (loadMoreButton) {
// Get the posts_per_page number set in Reading Options
var ppp = loadMoreButton.data("ppp");
// Initialize function
var loadPosts = function(page) {
var theData, loadMoreContainer, errorStatus, errorMessage;
// The AJAX request
$.ajax({
url: "/wp-json/wp/v2/posts",
dataType: "json",
data: {
// Match the query that was already run on the page
per_page: ppp,
page: page,
type: "post",
orderby: "date"
},
success: function(data) {
// Remove the button if the response returns no items
if (data.length < 1) {
loadMoreButton.remove();
}
// Create a place to store exactly what I need
// Alternatively, the response can be filtered to only return the needed data, which is probably more efficient as the following loop wont be needed
theData = [];
// Get only what I need, and store it
for (i = 0; i < data.length; i++) {
theData[i] = {};
theData[i].id = data[i].id;
theData[i].link = data[i].link;
theData[i].title = data[i].title.rendered;
theData[i].content = data[i].content.rendered;
}
// Grab the container where my data will be inserted
loadMoreContainer = $("#load-more-div");
// For each object in my newly formed array, build a new element to store that data, and insert it into the DOM
$.each(theData, function(i) {
loadMoreContainer.append(
'<li><a href="' +
theData[i].link +
'">' +
theData[i].title +
"</a></li>"
);
});
},
error: function(jqXHR, textStatus, errorThrown) {
errorStatus = jqXHR.status + " " + jqXHR.statusText + "\n";
errorMessage = jqXHR.responseJSON.message;
// Show me what the error was
console.log(errorStatus + errorMessage);
}
});
};
// Since our AJAX query is the same as the original query on the page (page 1), start with page 2
var getPage = 2;
// Actually implement the functionality when the button is clicked
loadMoreButton.on("click", function() {
loadPosts(getPage);
// Increment the page, so on the next click we get the next page of results
getPage++;
});
}
})(jQuery);
This is the trouble part, it doesn't remove the link.
// Remove the button if the response returns no items
if (data.length < 1) {
loadMoreButton.remove();
}
Console errors when click the load more link after reaching the end of posts:
400 Bad Request The page number requested is larger than the number of pages available.
I found two ways to solve it:
###Using data attribute
Get the max number of pages in the template, assign it to a data attribute, and access it in the scripts. Then check current page against total page numbers, and set disabled states to the load more button when it reaches the last page.
PHP/HTML:
<ul id="ajax-content"></ul>
<button type="button" id="ajax-button" data-endpoint="<?php echo get_rest_url(null, 'wp/v2/posts'); ?>" data-ppp="<?php echo get_option('posts_per_page'); ?>" data-pages="<?php echo $wp_query->max_num_pages; ?>">Show more</button>
JavaScripts:
(function($) {
var loadMoreButton = $('#ajax-button');
var loadMoreContainer = $('#ajax-content');
if (loadMoreButton) {
var endpoint = loadMoreButton.data('endpoint');
var ppp = loadMoreButton.data('ppp');
var pages = loadMoreButton.data('pages');
var loadPosts = function(page) {
var theData, errorStatus, errorMessage;
$.ajax({
url: endpoint,
dataType: 'json',
data: {
per_page: ppp,
page: page,
type: 'post',
orderby: 'date'
},
beforeSend: function() {
loadMoreButton.attr('disabled', true);
},
success: function(data) {
theData = [];
for (i = 0; i < data.length; i++) {
theData[i] = {};
theData[i].id = data[i].id;
theData[i].link = data[i].link;
theData[i].title = data[i].title.rendered;
theData[i].content = data[i].content.rendered;
}
$.each(theData, function(i) {
loadMoreContainer.append('<li>' + theData[i].title + '</li>');
});
loadMoreButton.attr('disabled', false);
if (getPage == pages) {
loadMoreButton.attr('disabled', true);
}
getPage++;
},
error: function(jqXHR) {
errorStatus = jqXHR.status + ' ' + jqXHR.statusText + '\n';
errorMessage = jqXHR.responseJSON.message;
console.log(errorStatus + errorMessage);
}
});
};
var getPage = 2;
loadMoreButton.on('click', function() {
loadPosts(getPage);
});
}
})(jQuery);
###Using jQuery complete event
Get the total pages x-wp-totalpages from the HTTP response headers. Then change the button states when reaches last page.
PHP/HTML:
<ul id="ajax-content"></ul>
<button type="button" id="ajax-button" data-endpoint="<?php echo get_rest_url(null, 'wp/v2/posts'); ?>" data-ppp="<?php echo get_option('posts_per_page'); ?>">Show more</button>
JavaScripts:
(function($) {
var loadMoreButton = $('#ajax-button');
var loadMoreContainer = $('#ajax-content');
if (loadMoreButton) {
var endpoint = loadMoreButton.data('endpoint');
var ppp = loadMoreButton.data('ppp');
var pager = 0;
var loadPosts = function(page) {
var theData, errorStatus, errorMessage;
$.ajax({
url: endpoint,
dataType: 'json',
data: {
per_page: ppp,
page: page,
type: 'post',
orderby: 'date'
},
beforeSend: function() {
loadMoreButton.attr('disabled', true);
},
success: function(data) {
theData = [];
for (i = 0; i < data.length; i++) {
theData[i] = {};
theData[i].id = data[i].id;
theData[i].link = data[i].link;
theData[i].title = data[i].title.rendered;
theData[i].content = data[i].content.rendered;
}
$.each(theData, function(i) {
loadMoreContainer.append('<li>' + theData[i].title + '</li>');
});
loadMoreButton.attr('disabled', false);
},
error: function(jqXHR) {
errorStatus = jqXHR.status + ' ' + jqXHR.statusText + '\n';
errorMessage = jqXHR.responseJSON.message;
console.log(errorStatus + errorMessage);
},
complete: function(jqXHR) {
if (pager == 0) {
pager = jqXHR.getResponseHeader('x-wp-totalpages');
}
pager--;
if (pager == 1) {
loadMoreButton.attr('disabled', true);
}
}
});
};
var getPage = 2;
loadMoreButton.on('click', function() {
loadPosts(getPage);
getPage++;
});
}
})(jQuery);
The problem appears to be an invalid query to that endpoint so the success: function() is never being run in this circumstance.
Add to All API Errors
You could add the same functionality for all errors like this...
error: function(jqXHR, textStatus, errorThrown) {
loadMoreButton.remove();
....
}
Though that may not be the desired way of handling of all errors.
Test for Existing Error Message
Another option could be to remove the button if you receive an error with that exact message...
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.statusText === 'The page number requested is larger than the number of pages available.') {
loadMoreButton.remove();
}
....
}
but this would be susceptible to breaking with any changes to that error message.
Return Custom Error Code from API
The recommended way to handle it would be to return specific error code (along with HTTP status code 400) to specify the exact situation in a more reliable format...
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.statusCode === '215') {
loadMoreButton.remove();
}
....
}
Here's an example on how to configure error handling in an API: Best Practices for API Error Handling
Return 200 HTTP Status Code
The last option would be to change the way your API endpoint handles this type of "error"/situation, by returning a 200 level HTTP status code instead, which would invoke the success: instead of the error: callback instead.
I have news-list with 5 news on the screen and when user clicks on Load more button - i need to load 5 more news etc.
I have id of the next page gotten from back-end (ex. 2).
But when i click on the button Load more i got an error - lazyload is not defined (…). How to fix this?
And i'm not sure about var url = "./" + {{$nextPage}};
Any help is appreciated. Thanks
<a id="button-more" class="button button--blue load-more" onClick="lazyload.load()"> -> here its an error
var lazyload = lazyload || {};
(function($, lazyload){
var buttonId = "#buttonId",
loadingId = "#loading-div",
newsContainer = ".news-list__list";
lazyload.load = function() {
var url = "./" + {{$nextPage}};
$(buttonId).hide();
$(loadingId).show();
$.ajax({
url: url,
success: function(response) {
if(!response || response.trim() == "NONE") {
$(buttonId).fadeOut();
$(loadingId).text("No more news to load!");
return;
}
appendContests(response);
},
error: function(response) {
$(loadingId).text("Sorry, there was some error with the request. Please refresh the page");
}
});
};
var appendContests = function(response) {
$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(newsContainer));
};
})(jQuery, lazyload);
I'm trying to add a filtering feature to an HTML table. I've seen some HTML filter libraries out there, but since I load the table's content after an AJAX call, these libraries don't seem to update after the table loads the actual values.
I was wondering if you could direct me on either how to implement my own filter, (the list of values to be filtered of the table can be accessed over AJAX too) or how to "delay" a piece of code of HTML and JS so the table and the libraries load together after the data is appended.
Tell me what part of the code you would like to see. Below is the <script> that loads the table. The libraries I tried to use are this and this.
I'm programming this as a favor for my father, so this is just about good-hearted questions. Thanks everyone!
<script>
$(document).ready(function() {
var populateContadorClienteTable = function(r) {
var ClienteTable = $("#ClientesTable tbody");
if(ClienteTable.length == 0) {
return;
} else {
ClienteTable.children().remove();
var r = JSON.parse(r);
var ger, supe, con;
if(r.length > 0) {
for(var i in r) {
if(r[i].Gerente != null) ger = r[i].Gerente; else ger = "";
if(r[i].Supervisor != null) supe = r[i].Supervisor; else supe = "";
if(r[i].Contador != null) con = r[i].Contador; else con = "";
ClienteTable.append(
$("<tr>")
.append($("<td>").text(r[i].ClaveCliente))
.append($("<a>").text(r[i].Nombre)
.css("width", "100%")
.addClass("pure-button")
.attr("href","reasignar.php?ClaveCliente=" + r[i].ClaveCliente + "&Nombre=" + r[i].Nombre))
.append($("<td>").text(ger))
.append($("<td>").text(supe))
.append($("<td>").text(con))
//.append($("<td>").append($("<a>").attr("href","reasignar.php?ClaveCliente=" + r[i].ClaveCliente + "&Nombre=" + r[i].Nombre)
// .text("Editar asignaciones")))
);
}
} else {
alert("No Cliente data retrieved.");
}
}
};
$.ajax({
type: "GET",
url: "/query/ClienteContadoresFull.php",
success: populateContadorClienteTable,
error: function(jqXHR, textStatus, errorThrown) {
alert("Error on retrieval of Cliente: " + textStatus);
}
});
});
</script>
You could try DataTables. It's very feature-rich with a lot of examples.
Specifically you could search an example for AJAX sources.
Below is an AJAX function I'm trying to use to show a loader gif during the request and hide when successful. Basically I started out with the function inside of the response.success which used to work by itself. It creates short urls and sets it to the value of an input field. And I was shown the rest that wraps that function, but i'm getting a 404 error in the console for failure to load resource. I'm sure this is a straightforward answer, I'm too new to tell but I think I'm close. Any help is much appreciated, thanks.
function getShare(url)
{
$('#loader').show(); // show loading...
$.ajax({
dataType: "jsonp",
jsonpCallback:'apiCallback', // this will be send to api as ?callback=apiCallback because this api do not want to work with default $ callback function name
url: 'http://b1t.co/Site/api/External/MakeUrlWithGet',
data: {'url':url},
success: function(response){
$('#loader').hide(); // hide loading...
//respponse = {success: true, url: "http://sdfsdfs", shortUrl: "http://b1t.co/qz"}
if(response.success){
{
var s = document.createElement('script');
var browserUrl = document.location.href;
//alert(browserUrl);
if (browserUrl.indexOf("?") != -1){
browserUrl = browserUrl.split("?");
browserUrl = browserUrl[0];
}
//alert(browserUrl);
var gifUrl = $('#gif_input').value;
var vidUrl = $('#vid_input').value;
//alert(gifUrl + "|" + vidUrl);
url = encodeURIComponent(browserUrl + "?gifVid=" + gifUrl + "|" + vidUrl);
//alert(encodeURIComponent("&"));
s.id = 'dynScript';
s.type='text/javascript';
s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
document.getElementsByTagName('head')[0].appendChild(s);
}
function resultsCallBack(data)
{
var obj = jQuery.parseJSON(JSON.stringify(data));
$("#input-url").val(obj.shortUrl);
}
}
},
error:function(){
$('#loader').hide();
}
});
}
I'm experiencing a really weird behaviour. I call a function when I change to a page (jQuery Mobile event "pagebeforeshow") like so:
$("#library").on("pagebeforeshow", function(event){
player.loadFiles();
});
The function I call looks like this:
Player.prototype.loadFiles = function(dir) {
dir = dir == undefined ? 'file://~' : dir;
if(dir.indexOf(data.lastDir) != 0){
console.log("fired");
$("li.item").remove();
$.ajax({
url: 'http://' + data.ip + ":" + data.port + '/requests/browse.xml',
data: 'uri=' + encodeURIComponent(dir),
dataType: "xml",
success: function (data, status, jqXHR) {
if(dir.indexOf(data.lastDir) != 0){
var html = "";
$(data).find("element").each(function(){
html += '<li class="item">' + $(this).attr('name') + "</li>";
});
$("#filelist").append(html);
$(".item").addClass("ui-li ui-li-static ui-btn-up-a ui-first-child ui-last-child")
}
},
error: function (jqXHR, status, error) {
alert("fail")
}
});
data.lastDir = dir;
}
}
Now it works fine if I visit the page for the first time. It appends the listitems to the ul #filelist and sets the variables right. Now when I leave the page it adds them again. The "fired" is not shown in the console though. If I visit the page again, they aren't added again, but if I leave it again they are. I can't figure out, why it's behaving like this and would be thankful for any tips!
stiller_leser