Hey,
is there a way to refresh the context of a template without reloading the page? When I do it by .navigate … reloadCurrent … ignoreCache it works, but I want to keep the current focus and scroll position.
Thx!
No chances because page template rendered on page load. But if you use router component (which is better for such cases), then it is possible to just rerender the changed elements only by calling its setState() method and it will keep scrolling and rest of the things correctly http://framework7.io/docs/router-component.html#virtual-dom
1 Like
Thx man! I restructured some parts to use components and it works fine… But I have some issues with $setState. When I have same changes in my data object and call $setState(dataObj[id]), it does not refresh the Dom. If I do a $setState(dataObj[someOtherId]) followed by $setState(dataObj[id]) it works. Is there some kind of caching?
Well when you call setState it renrenders page and compares it to previously rendered page, and if results are the same then it won’t be updated, so your template must have variables from state or refer to something that changed
I’ll check again. thx
Hey… it was a bug in my response script - now everything works like a charm with components… except a little thing… when I set stackPages to true, the back button nor the back(); is broken. Is there an issue with stacking for component pages?
There shouldn’t be any error with stacked pages and components. Would be good to see live example or something to replicate the issue
I can try to set up an example…
but maybe you can see already here what’s wrong…
This is like I set up the view:
var userView = app.views.create('#view-user', {
name: 'userView',
stackPages: true,
xhrCache: false,
routes: [
{
path: '/user/',
componentUrl: '/src_bguide/pages/user.html',
options: {
//animate: false,
//reloadCurrent: true,
},
},
{
path: '/user/:id',
componentUrl: '/src_bguide/pages/user-view.html',
},
{
path: '/user/edit/:id',
componentUrl: '/src_bguide/pages/user-edit.html',
},
],
});
and a component looks like this:
<template>
<div class="page stacked">
...
</div>
</template>
<script>
return {
data() {
return {
id: null,
dataSet: {
user : null,
dMapKnowHow : app.data.map.knowHow
}
}
},
methods: {
refresh: function () {
console.log("refresh User " + this.id);
this.dataSet.user = app.methods.getUserById(this.id);
this.$setState(this.dataSet);
}
},
created(){
this.id = this.$route.params.id;
this.dataSet.user = app.methods.getUserById(this.id);
this.refresh();
app.data.eTgt.addEventListener('userDataChanged', this.refresh);
},
destroyed() {
app.data.eTgt.removeEventListener("userDataChanged", this.refresh);
},
};
</script>See two issues
- remove “stacked” class from pages that loaded from component
- $setState(this.dataSet) to me looks like should be $setState({ dataSet: this.dataSet })
I removed the “stacked” class - same thing. The $setState is working fine this way as I user the full data object. As I said - rendering works well, only when I click on back there is an error:
TypeError: undefined is not an object (evaluating ‘e.$el.parents(".view")[0].f7View’)
With stackPages: false, there are no errors all.
Ok, will try to replicate it on a days
I found it! The problem was that the initial Dom container (#view-user) was filled with some old dummy stuff. I cleaned it up and now it works!
1 Like
I am facing same issue , can u please help us to resolve it by elaborating step by step solution .
Doubt : Dom container (#view-user) was filled with some old dummy stuff which you cleaned
How to clean old dummy stuff
Hello! To be honest… I don’t remember anymore what the problem was these days (2 years ago 
… FW7 has also developed a lot since then. But try to set up a demo on JSFiddle - you can fork this here: https://jsfiddle.net/nolimits4web/o2ejupu1/
Thank you for your reply . anyways i am facing this issue on iphone safari browser , On mac Safari it works like charm but in Iphone safari redirection is not working and giving me this error " Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating ‘e.$el.parents(".view")[0].f7View’)"
Please set up a simple JSFiddle Demo so I can reproduce the error here…
Thanks For Your Reply and Support ,I am able resole the issue by adding route parameter as ignoreCache:true