[SOLVED] Pull to refresh on Index

Hello there,

What is the best way to use the PRT on the index?

<div class="page-content ptr-content" data-ptr-distance="55">
		<div class="ptr-preloader">
		  <div class="preloader"></div>
		  <div class="ptr-arrow"></div>
</div>

I already added the divs as per documentation but I have the following issue:

It works well as soon the app is launched but if I’m navigating to the pages and coming back to index, the PRT is not trigered.

Structure
Index - VL - Page detail.

See below a real demo (try in Chrome only please)

https://gefisa.ardi-tech.com/

Thanks!

You need to all Pull to refresh logic for home page in its page:init handler. Otherwise as soon it will be loaded again, all your previous code that is specified in global scope will not work

Thanks Vladimir. All sorted after move the logic to the init function.

Vladimir, one more question:

How can I have different ptr content in 2 different pages? Example:

  1. On index page I would like to refresd the localstorage data
  2. On virtual list I would like to refresh data and the VL.

Thanks!

In same way, put ptr logic for each page in its page:init handler

Thanks Vladimir.

For some reason, init in index is not triggering.

$$(document).on('page:init', '.page[data-name="indice"]',function (e) {  
	console.log("indice");
	var $ptrContent = $$('.ptr-content');
		// Add 'refresh' listener on it
	$ptrContent.on('ptr:refresh', function (e) {
			// Emulate 2s loading
		setTimeout(function () {
			myRefresh_data();
			console.log("refresh! Index");
			app.ptr.done(); // or e.detail();
		}, 2000);
	});

	
});


$$(document).on('page:init', '.page[data-name="ver_obras"]', function (e) {
	console.log("ver_obras");
	var $ptrContent = $$('.ptr-content');
		// Add 'refresh' listener on it
	$ptrContent.on('ptr:refresh', function (e) {
			// Emulate 2s loading
		setTimeout(function () {
			myRefresh_data();
			console.log("refresh! VL");
			app.ptr.done(); // or e.detail();
		}, 2000);
	});

	
})

Index

I have updated the demo:

https://gefisa.ardi-tech.com

Thanks

Because you add handler AFTER page:init event happend for home page. Add this handlers BEFORE you do new Framework7 or pass it in app events handlers in on parameters or in home page route parameters

Thanks Vladimir. I followed your advice and now is triggering correctly.

I still don´t understand how to refer to the ptr-content properly as I´m referring to it in the same way for the index and the VL page:

var $ptrContent = $$(’.ptr-content’);

Is possible to refer to the page-content div by id?

Sorry and many thanks.

Apparently, this $$(’.ptr-content’); targets all divs with ptr-content class. If you do it in page:init event than you need to target it correctly, e.g.:

$$(document).on('page:inti', '.page[...]', function (e, page) {
  var $ptrContent = page.$el.find('.ptr-content');
  ...
});

Thanks @nolimits4web. I just tested with page.$el.find and now works as I need.

Thanks again.

i am facing the same problem. i have to implement this on multiple pages. on home page. it works fine but if navigate to another page and then come back, it refreshes infinite while on other pages it refreshes infinite. i mean preloader becomes visible. kindly correct me where i am going wrong.

$$(document).on("page:init", function (e, page) {

  if (
app.views.main.router.url == "/homepage/" ||
app.views.main.router.url == "/newssummary/" ||
app.views.main.router.url == "/expenses/" ||
app.views.main.router.url == "/ordersunits/" ||
app.views.main.router.url == "/products/"
) {
//pull to refresh
var $ptrContent = page.$el.find('.ptr-content');
// Add 'refresh' listener on it
$ptrContent.on("ptr:refresh", function (e) {
  // Emulate 2s loading
  setTimeout(function () {
    console.log("refresh data here");
    app.ptr.done(); // or e.detail();
  }, 2000);
});
}

it is resolved by just changing app.ptr.done() to e.detail()