Routed Page with JS

1

I have a index.html file with link to a route page called about.

I need to execute some javascript (get data as JSON from external source) and append as content of the about page.

The about page is a HTML file and is opening correctly

By the Docs of Framework7 I’ve added the attribute data-name=“about” to <div class="page"> (<div class="page" data-name="about">)

On the index.html file I’ve added <script src="js/my-about.js"></script> with the following code.

$$(document).on('page:init', '.page[data-name="about"]', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
  console.log("My About Page");
  app.dialog.alert("My About Page");
});

No console.log or alert is produced.

Any Ideas Why?

Thanks
R.C.G.C

2

Hi!

You see warning at console?

Also you can use class name, try this.

$$(document).on('page:init', '.page.page-about', function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
  console.log("My About Page");
  app.dialog.alert("My About Page");
});

So, add “about” class to page

<div class="page page-about">

Regards

3

It works!!!

Thanks @DanielRiera

4

Can I do the samething on index.html?

What I meen is using a js file to append data to a div using

$$(document).on(‘page:init’, ‘.page.page-index’, function (e) {
console.log(“My Index Page”);
app.dialog.alert(“My Index Page”);
});