[v3][solved] how to update a template

Questions
1

I’m using router to rout from home to a inner page

{
	path: '/mydetailpage/:id/',
	componentUrl: '/pages/mydetailpage.html',
},

inside the page I use jQuery referencing to a specific ID to populate the page
and the side panel with links at the same page but loading different contents

<script>

return {
	on: {

		pageInit() {
  				
  			$('#navbar-tit').html('my page');
  									
			$.getJSON("mypagejsondata.php?id=" + this.$route.params.id, function (jsondata) {
				
				// other code
				$('#page-content').html( jsondata.pagecontent );
				
				// side panel links to other pages
				sidepanel = "";
										
				if ( !$.isEmptyObject(jsondata) ) {
				
					if ( !$.isEmptyObject(jsondata.elements) ) {
					
						$.each( jsondata.elements, function( k, el ) {
							
							// sidepanel pages
							var linkpath = "/mydetailpage/" + el.id +"/";
							
							sidepanel += "<li><a href=\""  + linkpath + "\">link to page " + el.id + "</a></li>";
							
						});
						
						$('#sidepanel-pagelist').html( sidepanel );
														
					}
											
				}
								  
			});
				  
		},

	}
}

the problem is that I see old page swipe to the left and a blank new page coming
what seems to happen is old page been update, because DOM keeps the old page for back ( i guess )
and new page not been populated

I guess the possible solution are:

  • update page when I click on a side panel voice without changing page bunt not sure if is possible and how to do it
  • disable cache for this page, not sure if possible and how to do it
2

pageInit() {
var self = this; //add this
.
.
.
.
$(’#sidepanel-pagelist’).html( sidepanel );
self.$f7router.refreshPage(); //and this

3

while reading the documentation I’m pretty sure that I read something about targeting on links but not sure where I read it and how it works

the code throw an error

VM861:89 Uncaught TypeError: Cannot read property ‘refreshPage’ of undefined
at Framework7Component.pageInit (:89:22)
at HTMLDivElement.l (framework7.js:1081)
at Dom7.trigger (framework7.js:1203)
at e.pageCallback (framework7.js:8796)
at e.forward (framework7.js:6176)
at m (framework7.js:6335)
at framework7.js:8628
at c (framework7.js:8574)
at framework7.js:8598

4

thats because you dont use webpack, change this line:

self.router.refreshPage();

5 
this.$router.refreshPage();

doesn’t throw an error but it doesn’t fix the problem

the page is updated with or without this line but the OLD page not the NEW one

what has been updated is

 <div class="page page-previous" aria-hidden="true">

not

   <div class="page page-current">
6

I got how to fix this
in router I added a new entry for the same page

{
	path: '/mydetailpagereload/:id/',
	componentUrl: '/pages/mydetailpage.html',
	options: {
		reloadCurrent: true,
	}
},

and inside page

var linkpath = "/mydetailpagereload/" + el.id +"/";