Im using pull to refresh in 2 pages, in my start page “shop” and in my subpage “produkter” page.
The one in my “shop” page is working as it should. And Im using Framework V3.
If I load the “produkter” page and then pull to refresh it loads the page as it should and everything is good!
But if I load the “produkter” page and from that page, load another subpage and then go back to the “produkter” page and THEN pull to refresh, then it removes the “produkter” page from the DOM completely and replaces it with the “shop” page!
So when I have loaded the “produkter” page it looks like this.
<div data-name="shop" class="page no-swipeback page-previous" aria-hidden="true"></div> <div data-name="produkter" class="page page-current"></div>
And then it removes the “produkter” page and sets “shop” as the current page?
> <div data-name="shop" class="page no-swipeback page-previous"></div> > <div data-name="shop" class="page no-swipeback page-current"></div>
This is the pull to refresh code for the “produkter” page.
$$(document).on('page:init', '.page[data-name="produkter"]', function (e) {
var page = e.detail;
var $ptrContent = $$(page.el).find('.ptr-content');
// Add 'refresh' listener on it
$ptrContent.on('ptr:refresh', function (e) {
console.log("pull to refresh")
setTimeout(function () {
$$(document).find(".instamodal").css('display','none!important')
var soktexten =$.cookie('soktexten');
var lancookie = $.cookie('lan');
var kategoricookie = $.cookie('kategori');
var ortcookie = $.cookie('ort');
if(soktexten==null){
soktexten=''
//console.log('soktexten'+soktexten)
}
if(lancookie==null){
lancookie=''
//console.log('läncookie'+lancookie)
}
if(kategoricookie==null){
kategoricookie=''
//console.log('kategoricookie'+kategoricookie)
}
if(ortcookie==null){
ortcookie=''
//console.log('ortcookie'+ortcookie)
}
mainView.router.navigate("/produkter/?kategori="+kategoricookie+'&lan='+lancookie+'&ort='+ortcookie+'&soktexten='+soktexten, {ignoreCache: true,force:true, reloadCurrent:true});
setTimeout(function () {
$$(document).find('.propreloader').hide();
}, 300);
// When loading done, we need to reset it
app.ptr.done(); // or e.detail();
}, 300);
});
});
Any input really appreciated, thanks.
SOLVED - So the problem was that on the pull to refresh for my “shop” page I had set
var $ptrContent = $$('.ptr-content');
so it looked for all .ptr-content classes and when I changed it to look for the ptr-content class on the “shop” page element it works.
var $ptrContent = $$(page.el).find('.ptr-content');
So if you have more than one pull to refresh page use:
var $ptrContent = $$(page.el).find('.ptr-content');