Learning so please be kind, not a professional coder! Okay with PHP but with Javascript I am complete newbie.
tl;dr How do I retain the last id variable from JSON to stop my AJAX pulling content it already has?
Trying to get a 'pull down to refresh' working, it is coming along but I am stuck. I have the mysql/php/ajax fine. I can pull down and it updates. But it continues to add the existing content.
I have looked into assigning variables in different ways, using let, var, nothing, window.variable.
Using Framework7 if it makes any difference.
today is the page, and the highid is the highest id number returned in JSON. when the get is called, the highid is given to mysql to get anything more recent. The PHP/JSON/AJAX part works. But cannot find a way to set the variable for next time.
var html = '';
// Pull to refresh on Today tab
$$('.ptr-content').on('ptr:refresh', function (e) {
setTimeout(function () {
if (typeof today_highid === 'undefined') {
var today_highid = 5;
}
app.request.json('/__php/json1.php', { article_id: today_highid }, function (data) {
for(var i = 0; i < data['article'].length; i+=1){
html+=
'<div class="title-container">'+
'<span class="title-date">Tuesday 19 March</span>'+
'<h1>' +data['article'][i]['article_title']+ '</h1>'+
'</div>'+
'<a href="/single/">'+
'<div class="card">'+
'<img class="card-image" src="img/thumb-14.jpg" alt="">'+
'<div class="card-infos">'+
'<h2 class="card-title">' +data['article'][i]['article_content']+ '</h2>'+
'<div class="card-bottom">'+
'<div class="card-author">'+
'<img class="card-author-image" src="img/authors/author-1.jpg" alt="">'+
'<div>Camille Aline</div>'+
'</div>'+
'<div class="card-comments"><i class="f7-icons">chat_bubble_fill</i></i>' +today_highid+ '</div>'+
'</div>'+
'</div>'+
'</div>'+
'</a>';
}
//$$('.data-table table').html(tableHtml);
// Prepend new list element
$$('.ptr-content').find('#today-content').prepend(html);
window.today_highid = data['status']['highid'];
});
Any help appreciated, or pointer to a good working tutorial please and thanks!
The issue is that you have window.today_highid = data['status']['highid']; but you're setting it to be var today_highid = 5 inside the function. Which is not the same. today_highid is a property of the window. Also when you're actually using it { article_id: today_highid } you're just referring to var in the function scope. Not the value of the window.today_highid`.
You need to move the initial value out of the function scope. Check below for clarity.
Also let are const are block scoped variables. You should never use var anymore. It's always either let or const. Read up on Javascript gotchas.
let todayHighId = 5; //default
$$('.ptr-content').on('ptr:refresh', function (e) {
setTimeout(function () {
app.request.json('/__php/json1.php', { article_id: todayHighId }, function (data) {
let { article, status } = data; // I assume article is a property of data. So deconstruct the data object to get the properties
let lastArticleId = article[article.length - 1]
for(let i = 0; i < article.length i+=1){
....
}
todayHighId = status.highid;
});
}
on a side note you should avoid declaring variables with _ and accessing properties of objects using []. I understand if API designed that way then have no choice. But it should be avoided unless it's absolutely the only way.