CODEWITHSUNDEEP
javascriptcordovaphonegaphtml-framework-7
user2493235
user2493235

Reputation:

framework7 Page Init Event Not Firing

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>

Upvotes: 2

Views: 4049

Answers (5)

Abbas
Abbas

Reputation: 5044

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

Upvotes: 0

Sedat Kumcu
Sedat Kumcu

Reputation: 2440

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',
    },
    ...
];

Upvotes: 1

Michael Plautz
Michael Plautz

Reputation: 3778

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

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

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

myApp.init();

Upvotes: 0

jeanli
jeanli

Reputation: 71

@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.

Upvotes: 4

Djiggy
Djiggy

Reputation: 602

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)

Upvotes: 1

Related Questions