Just starting out in the world of coding, not a pro! I'm comfortable with PHP but a total beginner when it comes to Javascript.
In short, how can I store the last id variable from JSON to prevent my AJAX request from fetching content it already has?
I'm working on implementing a 'pull down to refresh' feature, making progress but I've hit a roadblock. The MySQL/PHP/AJAX part is set up correctly. I can pull down to refresh and see updates, but it keeps appending existing content.
I've tried different ways to assign variables using let, var, nothing, window.variable. Using Framework7 if that makes a difference.
Today represents the page, and highid is the highest id number returned in JSON. When the GET request is made, highid is sent to MySQL to fetch more recent data. The PHP/JSON/AJAX interaction works fine. However, I'm struggling to figure out how to save 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 assistance or recommendation for a helpful tutorial would be greatly appreciated! Thank you!