Post Detail

Sebelumnya saya punya fungsi ajax untuk pengambilan data dengan event onScroll, nah ketika dicoba di Chrome Desktop berjalan normal dengan contoh codingan seperti ini.

var page = 1;
	$(window).scroll(function() {
	    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
	    	page++;
        	loadMoreData(page);
	    }
	});


	function loadMoreData(page){
	  $.ajax(
	        {
	            url: '?page=' + page,
	            type: "get",
	            beforeSend: function()
	            {
	                $('.ajax-load').show();
	            }
	        })
	        .done(function(data)
	        {
	            if(data.html == ""){
	                $('.ajax-load').html("No more records found");
	                return;
	            }
	            $('.ajax-load').hide();
	            $("#post-data").append(data.html);
	        })
	        .fail(function(jqXHR, ajaxOptions, thrownError)
	        {
	              alert('server not responding...');
	        });
	}

Tapi codingan tersebut setelah di testing di Mobile Device tepatnya di HP Android menggunakan Browser Google Chrome juga, ketika saya scroll tidak berjalan. Setelah baca - baca dan di pikir - pikir lagi ternyata itu beda Event kalo menurut pikir saya yak. Kalo Di Desktop kita scroll mouse nah kalo di Mobile Device itu kita touch lalu di geser. Dan nemu lah solusinya ada di STACKOVERFLOW Dengan menambahkan fungsi seperti berikut ini.

$(document.body).on('touchmove', onScroll); // for mobile
	$(window).on('scroll', onScroll); 

	// callback
	function onScroll(){ 
	    if( $(window).scrollTop() + window.innerHeight >= document.body.scrollHeight ) {		
			page++;
	    	loadMoreData(page);
	    }
	}

Lalu saya testing di Mobile Device, Alhamdulillah scroll Ajax berjalan dengan Baik, demikianlah artikel yang saya buat. Semoga bermanfaat.