Autoload in the Post - php

Question

I want to autoload like this web: https://www.thejakartapost.com/news/2019/04/09/woman-decapitated-in-traffic-accident-in-depok.html
But after I implemented it, the results looped the same data like this: https://staging.casaindonesia.com/article/read/12/2016/79/Lantai-Motif-Kayu-dengan-Low-Maintance
Is there something wrong with my program? ( Sorry, my english isn't good enough)
Controller.php
public function more(){
$data['asset'] = $this->asset;
$data['gallery'] = $this->gallery;
$page_number = $this->input->post('page');
$this->martikel->idartikel = $this->input->post('idartikel');
$this->martikel->idkanal = $this->input->post('idkanal');
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$data['content'] = $this->martikel->getMore(1,0);
$data['count_item'] = count($data['content']);
$data['page'] = $page_number;
$this->load->view('morearticle',$data);
}
Model.php
public function getMore($per_page,$row, $justOnce = TRUE) {
$this->db->select($this->queryArtikel);
$this->db->from('artikel_content');
$this->db->join('artikel_kategori','artikel_kategori.id = artikel_content.idkategori');
$this->db->join('artikel_kanal', 'artikel_kanal.id = artikel_kategori.idkanal');
$this->db->join('sys_user', 'artikel_content.uid = sys_user.id');
$this->db->join('contributor', 'artikel_content.idcontributor = contributor.id');
$where = array(
'artikel_content.isdel' => 0,
'artikel_content.ispub' => 1,
'artikel_content.idkanal' => $this->idkanal
);
$this->db->where($where);
$this->db->where_not_in('artikel_content.id',$this->idartikel);
$this->db->order_by('artikel_content.cdate','desc');
$this->db->limit($per_page,$row);
$query = $this->db->get();
if($query->num_rows() > 0) {
if ($justOnce == TRUE) {
return $query->row_array();
}
else {
return $query->result_array();
}
}
else {
return FALSE;
}
}
Javascript in View.php
<script type="text/javascript">
var track_page = 1;
var loading = false;
var idarticle = <?php echo $content['idartikel']?>;
var idkanal = <?php echo $content['idkanal']?>;
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
track_page++;
load_contents(track_page,idarticle,idkanal);
}
});
function load_contents(track_page,idarticle,idkanal){
if(loading == false){
loading = true;
$('.loading-info').show();
$.post( "http://localhost/staging-casa/article/more/",
{page:track_page,idkanal:idkanal,idartikel:idarticle},
function(data){
loading = false;
if(data.trim().length == 0 || track_page >= 10){
$('.loading-info').html("");
return;
}
$('.loading-info').hide();
$("#more_article").append(data);
//var url = 'https://' + window.location.hostname + ;
//window.history.pushState("object or string", "Title", url);
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
})
}
}
</script>

Answer 1

You are using the initial value of idkanal and idartikel over and over again because of it's not getting the updated value from the ajax request.
One solution is to modify the response from the Controller to include the updated value of idkanal and idartikel as parameters, and include it in the next following requests.
The steps I take is :
Create elements containing idkanal and idartikel initial value
Make the initial ajax call
Return data & update the idkanal and idartikel element value
Make the ajax call with the updated idkanal and idartikel value
Controller.php
public function more(){
$data['asset'] = $this->asset;
$data['gallery'] = $this->gallery;
$page_number = $this->input->post('page');
$this->martikel->idartikel = $this->input->post('idartikel');
$this->martikel->idkanal = $this->input->post('idkanal');
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$data['content'] = $this->martikel->getMore(1,0);
$data['count_item'] = count($data['content']);
$data['page'] = $page_number;
// instead of directly showing the view, separate article view with the newly retrieved article ids data with json_encode
echo json_encode( array(
'article_view' => $this->load->view('morearticle',$data,true),
'article_data' => array(
'idartikel' => $data['content']['idartikel'],
'idkanal' => $data['content']['idkanal']
)
));
}
Javascript in View.php
<script type="text/javascript">
var track_page = 1;
var loading = false;
var idarticle = <?php echo $content['idartikel']?>;
var idkanal = <?php echo $content['idkanal']?>;
// create html element to hold the idarticle and idkanal values
$('#more_article').append('<input type="hidden" id="idarticle" value="'+idarticle+'" /><input type="hidden" id="idkanal" value="'+idkanal+'" />');
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
track_page++;
idarticle = $('#idarticle').val();
idkanal = $('#idkanal').val();
load_contents(track_page,idarticle,idkanal);
}
});
function load_contents(track_page,idarticle,idkanal){
if(loading == false){
loading = true;
$('.loading-info').show();
$.post( "http://localhost/staging-casa/article/more/",
{page:track_page,idkanal:idkanal,idartikel:idarticle},
function(data){
loading = false;
if(data.article_view.trim().length == 0 || track_page >= 10){
$('.loading-info').html("");
return;
}
$('.loading-info').hide();
$("#more_article").append(data.article_view);
$('#idarticle').val(data.article_data.idartikel);
$('#idkanal').val(data.article_data.idkanal);
//var url = 'https://' + window.location.hostname + ;
//window.history.pushState("object or string", "Title", url);
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError);
})
}
}
</script>
I've added some comments within the codes to show you the information about each related code changes.