On page scroll Down load data dynamically using php jquery ajax

14
02On page scroll Down load data dynamically using php jquery ajax

Learn here to load data from database and display in the website dynamically. When I say dynamically, it means that there is no need to reload the page every time you try to access data from the database. This would be nice, since it will take lesser time for the user to actually see the results of his query.When you perform the scroll operation in your webpage. Ajax requested is initiated and return the response data. we are then append the response data to the existing data.Each time when ajax request is fired it automatically append to the existing data.

load-data-dynamically-using-jquery-ajax-php

To implement the load on scroll functionality, we will require very few lines of code. A WebMethod that will be called from the client side which returns the content to append while scrolling, and a client side function (document.ready) where we will bind the scroll event to load data from the server. Let us see these server and client side methods in detail.

Jquery

function getresult(url) {
		$.ajax({
			url: url,
			type: "GET",
			data:  {rowcount:$("#rowcount").val()},
			beforeSend: function(){
			ajaxloading();
			},
			complete: function(){
			closeajax();
			},
			success: function(data){
			$("#result").append(data);
			},
			error: function(){} 	        
	   });
	}
	$(window).scroll(function(){
		if ($(window).scrollTop() == $(document).height() - $(window).height()){
			if($(".pagenum:last").val() < $(".total-page").val()) {
				var pagenum = parseInt($(".pagenum:last").val()) + 1;
				getresult('fetchdata.php?page='+pagenum);
			}
		}
	}); 
});

This method is used to get data from the database or any source and prepares an HTML string depending on the control you are using for appending data to.

PHP - fetchdata.php

';
    foreach ($faq as $k => $v) {
        
        $output .= '
                
                   
                    ' . $faq[$k]["productName"] . '
                   
                    
                        
								$' . $faq[$k]["productPrice"] . '
                        
                        
                    
                    
                        ' . substr($faq[$k]["productDescription"], 0, 50) . '
                       
                    
                    
                
                
            ';
        
        
    }
}

print $output;
?>

By Thirumani Raj posted on - 14th Feb 2016