AJAX dengan Loadmore

Saya telah mencoba dengan beberapa cara pemanggilan data url json menggunakan javascript, namun beberapa kali mengalami error permasalahan akses. Namun setelah menemukan pluggin load-more, saya jadi terbantukan. Dalam kasus saya, saya menggunakan backend server menggunakan php, sehingga pemanggilan data akan enak menggunakan php juga, namun agar AJAX dapat bekerja dengan baik perlu bantuan pluggin ini agar dapat mempermudah proses script.

Persiapan

Pemanggilan data json di php
Penggunaan Jqueary

1. Pemanggilan Data

Pertama-tama saya perlu memanggil data json yang berupa url.

public function getApi($parameter1, $parameter2)
  {
    $parameter1= preg_replace('/\s/is', '+', $parameter1);
    $url =  API_URL_UMUM . $parameter1 .'&mode=json&version=' . $parameter2;
    $json = file_get_contents($url);
    $ret = json_decode( $json, TRUE );

    return $ret;
  }

2. Pembuatan komponen html

Pembuatannya tentu saja dengan page, misal ajax.html, yang berbeda dari page yang akan memerlukan fitur ini, misal index.html. Berikut adalah html yang akan dihandel js pada index.html.

<span class="dropdown-item load-more link"
      parameter2="tb"
      title-version="Foo Bar" >
Foo Bar
</span>
<div id='version-bible'></div>

Bagian ajax.html saya handel foreach data sesuai ajax.php saya

{foreach $api as $items} 
         <div>{$items.texts.parameter1}:{$item.texts.parameter2} 
{/foreach}

3. Komonen Javascript

Setelah disetting plugin nya pada page utama baik css dan js nya. perlu dilakukan set js sesuai komponen. Dalam kasus saya setiap komponen yang memiliki class load-more akan menghandel ajax dari halaman ajax.html

  $('.load-more').click(function(){
        // replace parameter sesuai keinginan dalam kasus saya spasi saya ganti +, dan parameter sudah didiclare sebelemuny.
    let parameter1 = parameter1.replace(' ', '+');
    let parameter2= $(this).attr('parameter2');
    let title = $(this).attr('title-version');

        // Set url api sesuai parameter
    let url = baseUrl + 'ajax/api-text.php?parameter1=' + passage1 +'&parameter2=' + parameter2 + '&mode=json';

       // handel tindakan yang perlu dalam kasus saya container mau saya bersihkan dan ganti judulnya dengan title 
       $('#version-con').html('');
       $('.title-text').html(title);

     // Jalankan load more js nya
     $(this).loadMore({
      elementId: 'version-con',
      containerSelector: '#version-con',
      requestUrl: url,
      loadingSelector: '#loading-main',
     })

      // test error
    console.log(url);

  });

DONE

Blog

andysaktia

Persiapan

1. Pemanggilan Data

2. Pembuatan komponen html

3. Komonen Javascript

Join Our Newsletter. No Spam, Only the good stuff.

Related