I am trying to use framework7 and cannot get the page init event to fire. The code I am using is very simple, and I have followed the documentation very carefully. No matter what I do, it never fires (nothing is logged to the console, and no errors).

I created a pen here showing the problem.

I also tried it with the callback myApp.onPageInit. Nada.

Any assistance greatly appreciated.

JS Code

var myApp = new Framework7({});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
$(document).on('page:init', function (e) {
    alert("processing page init");
});

HTML

<div class="views">
  <div class="view view-main navbar-through toolbar-through">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">Framework7</div>        
      </div>
    </div>
    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="#" class="link">Left</a>
        <a href="#" class="link">Right</a>
      </div>
    </div>
    <div class="pages">
      <div class="page" data-page="home">
        <div class="page-content">
          <div class="content-block">
            <p>Hi there!</p>            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I am trying to use framework7 and cannot get the page init event to fire. The code I am using is very simple, and I have followed the documentation very carefully. No matter what I do, it never fires (nothing is logged to the console, and no errors).

I created a pen here showing the problem.

I also tried it with the callback myApp.onPageInit. Nada.

Any assistance greatly appreciated.

JS Code

var myApp = new Framework7({});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
$(document).on('page:init', function (e) {
    alert("processing page init");
});

HTML

<div class="views">
  <div class="view view-main navbar-through toolbar-through">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="center">Framework7</div>        
      </div>
    </div>
    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="#" class="link">Left</a>
        <a href="#" class="link">Right</a>
      </div>
    </div>
    <div class="pages">
      <div class="page" data-page="home">
        <div class="page-content">
          <div class="content-block">
            <p>Hi there!</p>            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

• javascript
• cordova
• phonegap
• html-framework-7

5 Answers 5

@SuperDuperApps, I managed to run the code. Pretty much like what Djiggy suggested if you delay the init it works for me (below). But if you don't want to it to be called on the first page and only subsequent pages, then the code u have works. Just try adding a link (to about.html) similar to what is in the docs and it works

var myApp = new Framework7({
    init: false
});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
    dynamicNavbar: true
});
$(document).on('page:init', function (e) {
    alert("processing page init");
});
myApp.init()

Note: PageInit is not called on back.

It may be solved by init app manually (sometimes event is not fired when content is in the first file loaded)

Or try to trigger your home page callback (third point of link)

There is detailed information on the following page.

https://framework7.io/docs/page.html#page-events

I used it like this: in app.js

var app = new Framework7({
    id: 'io.framework7.testapp',
    root: '#app',
    ...
    on: {
        pageInit: function (e, page) {
            console.log('page init -> route.name=' + e.route.name);

            if(e.route.name === "searchPage") {
                app.methods.searchPageInitMethod(e);
            }
        },
    },
    methods: {
        searchPageInitMethod: function (e) {
            console.log("Page Route Params:" + app.views.main.router.currentRoute.params)
        },
    },
    ...
}

My route table(routes.js) like this:

var routes = [
    ...
    {
        name: "searchPage",
        path: '/search/:keyword/',
        url: './pages/page-search.html',
    },
    ...
];

This has changed as of version 3. Now, doing the exact same thing can be acplished by doing this:

var myApp = new Framework7({
    ...
    init: false
});

myApp.on('init', function(e) {
    alert('app init event fired');
});

myApp.init();

Your initialization is perfect, no issues, however instead of using alert() try myApp.alert() hope that would work.