[SOLVED] V2 Equivalent for myApp.onPageInit('index', function (page) {})?


#1

Hello,

I’m trying out V2 and the Tabbed Views layout (which I believe is a multiple-view): https://framework7io.github.io/framework7-template-tabs/ and I would like to know how I can execute JS when the user goes to a different page? In the old version I used this:

//the alert will be displayed only when and every time the user goes to the index page
myApp.onPageInit('index', function (page) {
alert ('Accessed the index page.');
});

//the alert will be displayed only when and every time the user goes to the about page
myApp.onPageInit('about', function (page) {
alert ('Accessed the about page.');
});

I can’t find it anywhere on the docs so I guess it deprecated? I’m guessing below is its replacement?

$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

I tried it but it runs all JavaScript at once when the app get loaded. What I wanted to do was to run that page’s JS only when it’s viewed by the user. Is that still possible? How?

Thanks in advance! :slight_smile:


#2

This is correct way, and it will run only on page about init:

$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

Another way is

app.on('pageInit', function (page) {
  if (page.name === 'about') { ... }
});

#3

Hello again,

My app has 4 tabs as subnav and I noticed that my localForage code inside

$$(document).on('page:init', function (e) {
  // Do something here when page loaded and initialized
localforage.setItem('name', 'timidyo').then(function () {
    return localforage.getItem('name');
  }).then(function (value) {
    // we got our value
    alert("---"+value)
  }).catch(function (err) {
    // we got an error
    alert("error"+err);
  });

});

executes 4 times, probably because of the number of tabs. Is there a way that it will execute only once, and only when the app starts or at least when the index page is loaded? I tried adding it here

$$(document).on('page:init', '.page[data-name="home"]', function (e) {});

but to no avail. If I put it outside the init code, I get an error message that says “localforage is not defined”. Help please?

Thanks, :slight_smile:


#4

localforage => localStorage


#5

Hi @plpl Sorry I wasn’t clear. I’m using Mozilla’s localForage, which works like localStorage but more persistent.


#6

you have this:

<script src="localforage.js"></script>

in your html?

“localforage is not defined” means:
localforage not exist in the obj-tree


#7

Yes I have it in my code. :slight_smile: It’s only when I put it outside the page initialization code that I get the error. But when I do, it executes multiple times.


#8
<script src="localforage.js"></script>
<script src="app.js"></script>

“multiple times” because page:init gets fired forEach page in your 4 tabs


#9

That’s what I thought. Thanks. :slight_smile: So now I have decided to have the code executed only on the index page, which is named home:

$$(document).on('page:init', '.page[data-name="home"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
alert('home page.');
localforage.setItem('name', 'hey').then(function () {
  return localforage.getItem('name');
}).then(function (value) {
  // we got our value
  alert("---"+value)
}).catch(function (err) {
  // we got an error
  alert("error"+err);
});
});

it doesn’t work. :confused: But when I add to other pages, it does. I don’t quite get it why. Here’s my code for it on index.html:

<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        <!-- Page, data-name contains page name which can be used in page callbacks -->
        <div class="page" data-name="home">
          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left">
                <a href="#" class="link icon-only panel-open" data-panel="left">
                  <i class="icon f7-icons ios-only">menu</i>
                  <i class="icon material-icons md-only">menu</i>
                </a>
              </div>
              <div class="title sliding">RateMyFace</div>
              <div class="right">
                <a href="#" class="link icon-only panel-open" data-panel="right">
                  <i class="icon f7-icons ios-only">menu</i>
                  <i class="icon material-icons md-only">menu</i>
                </a>
              </div>
            </div>
          </div>

          <!-- Scrollable page content-->
          <div class="page-content" id="geoloc">
            <div class="block no-hairlines">
              <!-- block content -->
test
            </div>
          </div>
        </div>
      </div>

Any idea what’s wrong with it?

EDIT: I ran this code

// In page events:
$$(document).on(‘page:init’, function (e, page) {
console.log(page);
})

and I noticed that the index age isn’t on the log.

Object { app: {…}, view: {…}, router: {…}, "$el": Object […], el: div.page.page-current, "$pageEl": Object […], pageEl: div.page.page-current, "$navbarEl": {…}, navbarEl: undefined, name: "explore", … }
app.js:88:3
Object { app: {…}, view: {…}, router: {…}, "$el": Object […], el: div.page.page-current, "$pageEl": Object […], pageEl: div.page.page-current, "$navbarEl": {…}, navbarEl: undefined, name: "messages", … }
app.js:88:3
Object { app: {…}, view: {…}, router: {…}, "$el": Object […], el: div.page.page-current, "$pageEl": Object […], pageEl: div.page.page-current, "$navbarEl": {…}, navbarEl: undefined, name: "settings", … }
app.js:88:3

#10

It probably happens (page:init doesn’t work for home) page because you add this event listener AFTER page was initialized. Add this call


#11

One of the options:

var app = new Framework7({
  on: {
    pageInit(page) {
      if (page.name === 'home') {
        // do something for home page
      }
    }
  }
});

Another option:

var app = new Framework7({
  init: false,
})
app.on('pageInit', (page) => {
  if (page.name === 'home') {
    // do something for home page
  }
});
app.init();

#12

Hmmm…

Unfortunately neither one of them worked for me, but this one did. It’s based from what I read in the docs:

on: {
init: function () {
console.log(‘App initialized’);
},
pageInit: function (page) {
console.log(‘Page initialized’);
console.log(page.name);
if(page.name==‘home’){
//do something
}
},
}

Do you see anything wrong that might happen if I continue to use this?

Thanks. :slight_smile:


#13

Nothing wrong with it


#14

Hi. I’m trying to add some functionality specific to the index.html that handles some data requests and a splash screen animation before redirecting to another page, I figured this is should be the best way to do it but it doesn’t work :

// In the new Framework7 call
on: {
  pageInit: function(page) {
    if (page.name === 'home') {
      console.log( 'HOME!' );
    }
  }
}

I’ve tried adding name: 'home' under the index entry in my routes.js but still nothing. Any idea what I’m doing wrong?


#15

The problem is that the name I’m setting in routes.js is not coming through. Why would this be happening? This is what I have :

var routes = [
  {
    path: '/',
    url: './index.html',
    name: 'home',
  },
  {
    path: '/my-location/',
    componentUrl: './pages/my-location.html',
    name: 'my-location',
  }
}

#16

Ok. I’ve worked out that page.name isn’t getting set… but page.route.name is getting set so I’m using that for now. Is this a bug Vladimir? Did you intend for it to be attached to the page object or is what I have the expected behaviour?


#17

Page.name is the data-name attribute on page html element


#18

Does the framework also still support pageAfterAnimation trigger?

I can’t get it to work using this code :

      app.on('pageAfterAnimation', (page) => {
        console.log("You re here.");
      });

#19

It is pageAfterIn now