New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to implement lazy loading / infinite scrolling in Builder's recordList component? #174

Open
scazzy opened this Issue Sep 2, 2017 · 1 comment

Comments

Projects
None yet
3 participants
@scazzy

scazzy commented Sep 2, 2017

I'm using Builder Plugin and it's recordList component to display the data list. While pagination works fine, I wanted to implement load more to implement pagination which would fetch data and partial using october's ajax handler and append below the list.

@Alex360hd

This comment has been minimized.

Show comment
Hide comment
@Alex360hd

Alex360hd Sep 28, 2017

Hello,

I could do this with some javascript :

function formPaginate() {
if($('form[data-request]').length) {
	
	$('.pagination a').off().on('click', function(e) {
		e.preventDefault();
		var form = $('form[data-request!=""]');
		var request = form.attr('data-request');
		var partials = jQuery.parseJSON('{ '+form.attr('data-request-update')+' }');
		var page = $(this).attr('href').split('/').pop().trim();

		// On effectue la requête ajax
		form.request(request, {
			data: { 'page': page },
			update: partials,
		});
		
	});
	
}
}

The idea behind this code is that when you have a form with data-request attribute, it means it's an ajax form, so, when you click on your pagination link, you prevent the url redirection, you extract the page number from that URL, and you trigger the ajax request by passing the page argument.

Hope that help

Alex360hd commented Sep 28, 2017

Hello,

I could do this with some javascript :

function formPaginate() {
if($('form[data-request]').length) {
	
	$('.pagination a').off().on('click', function(e) {
		e.preventDefault();
		var form = $('form[data-request!=""]');
		var request = form.attr('data-request');
		var partials = jQuery.parseJSON('{ '+form.attr('data-request-update')+' }');
		var page = $(this).attr('href').split('/').pop().trim();

		// On effectue la requête ajax
		form.request(request, {
			data: { 'page': page },
			update: partials,
		});
		
	});
	
}
}

The idea behind this code is that when you have a form with data-request attribute, it means it's an ajax form, so, when you click on your pagination link, you prevent the url redirection, you extract the page number from that URL, and you trigger the ajax request by passing the page argument.

Hope that help

@LukeTowers LukeTowers reopened this Oct 13, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment