SOLVED - Click and reload the page

Hi.

I need to reload the current page when I click my button or a href like we easily do with location.reload(); This sounds really simple but I cannot find the exact example for Framework7.

P.S. I am working on html-vanilla js, not with any other js framework.

Result: I solved the problem by fixing my js function and using Pull to Refresh (Official Doc) function.

You just solved but maybe this helps.

$$('#button').on('click', function () {
  mainView.router.navigate(mainView.router.currentRoute.url, {
      reloadCurrent: true,
      ignoreCache: true,
  });
});
1 Like

Hi again,

It says “Uncaught (in promise) TypeError: mainView.router is undefined”.
Why do I get this error?

Maybe your mainView have another name?

Well, if your mainView must be the main div on the page, I have set it so:

<template>
    <div class="page" id="viewMain" data-name="LoginPage"><!--LoginPage-->

      <!-- Top Navbar -->
      <div class="navbar navbar-large">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="link icon-only panel-open" data-panel="left">
        etc.

and then I assign it to a variable:

var mainView = document.getElementById('viewMain');

What might be the wrong?

Why don’t use simple $f7.views.main.router.refreshPage(); ?

Why? Because I didn’t know that option.

Anyway, now it gives $f7.views is undefined error
However, I actually added the import part there

<script>
     import $ from 'dom7';
     var $f7 = 'dom7';
  export default () => {

No you need to use Router component like:

export default (props, {$f7}) => {
   //code for add event to button {
      $f7.views.main.router.refreshPage();
  //}
1 Like

Oh. It worked like a charm. Thank you. I can even use it now for redirecting after login. For example,

$f7.views.main.router.navigate({url:'/about_page/', ignoreCache:true, reload:true });

But I really find documents page a bit difficult to understand. For example, I never understand where to place the code samples I see there. In the routes.js or my .f7 pages under pages folder…

But huge thanks.

All the code from component need to be place into export module, and as you can see from the link i posted, there is much component that help you.

Thanks a lot.
And, I know it is not the right place here but what about Events or others? Where should I put these events? For example

There are loads of events and it depends on what you need, for example:

on global app (so this event will work in all pages):

var app = new Framework7({
  ...
  on: {
    pageInit: function (page) {
       console.log('pageInit'); // in all page will print that on load.
    },
....

Or in the component, for example that:

var smartSelect = app.smartSelect.create({
  ...
  on: {
    opened: function () {
      console.log('Smart select opened') // obv, when smart select is opened print that
    }
  }
})

Or in local component like:

export default (props, {$on}) => {
   $on('pageInit', function (page) {
    // do something on page init
   });
.....

Or use pure js:

export default (props, {$on}) => {
   $on('pageInit', function (page) {
     page.el.querySelector('button').addEventListener('click', () => { 
           console.log('hello'); //print hello on click button
     }
   });
.....

Or you can use inline like:

<template>
  .......
    
   <button @click=${() => console.log('hello')}>click me</button>
  .......
</template>
1 Like

I will practice on them. Very precious informations, thank you so much.

1 Like

Working code

const keyword = e.target.value.toLowerCase();
      if (keyword === '') {
        app.views.main.router.refreshPage();
      }