在帖子中自动加载

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 :

1. Create elements containing idkanal and idartikel initial value
2. Make the initial ajax call
3. Return data & update the idkanal and idartikel element value
4. 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.