Framework7 - script not working in another page

Hello everyone,

I am working on a project. but I am stuck with something. I have a main index page and a second page that is accessible by a route by clicking on a button. In that page I link to a .js script. just like this:

But it does not run the script.js. When I put the script in the index page it does not work too. But when I put the css of the second page in the index then it will run the css for the second page. Please can someone help me out?!

I am still a beginner with framework7, so I don’t have any idea anymore how to fix this issue.

I hope someone can help me out. Thanks anyway!

Such pages are loaded via ajax, so script tags can’t work there

Thankyou for your reply!

So what could I do in order to make it work in my second page?
Because in the index page it does work.

1 Like

You need to put your script inside pageinit page-data=your 2ng page

Oke, but how can I do that? I have zero experience with f7

There is a way to use the css or js . If your js file do not contain a framework7 specific syntax , then, you can refer it in your second_page.f7.html like:-

<script src="static/second.js"></script>

Put your js file is static file directory.
If your file contains something which is specific to framework7 like dom library($$) , you will need to use app.js , edit your ‘app.js’ as:-

$$(document).on('.page:init','.page[data-name="second_page"]',function(e,page){
  .import('./second.js').then((u)=>{
     u.default.functions(TestingParameters);
  });
});

for above code to work, your second-js must be in js directory and data-name attribute of your second page must be "second_page"

1 Like

Thankyou all! It is fixed now.

I tried it but it didn’t work out

Can you explain what you tried and paste some code related because it’s still working now for me

Capture I added this to my HTML file

Capture1 and this to my app.js

Use page init in your app.js or my-app.js

Sorry for late reply, but it looks like you are not using webpack build . If this is the case, my solution will simply not work. A simple way for using framework7 features without webpack build is to load them every time when a new page is added or use a webpack build.

Shouldn’t it be ‘page:init’?

Tried to use this solution but it doesn’t seem to be working for me. Also on the “.import” line i get a Parsing error: Unexpected token ‘.’.

Where does one define the data-name attribute on the second page?

Thanks!

1 Like

Add data-name attribute to div with class .page

2 Likes

Thanks! Managed to get it working by placing the script directly inside the page:init, however now the same thing seems to be happening with the css. Any solutions?

This method is only valid for js . For css , do following:-
1)Create .css file inside static/css/ folder, for example first.css.
2)Suppose we want to use this css in second.f7.html. Open this page and write,
<link rel="stylesheet" type="text/css" href="static/css/first.css">.

I’m already using this method, it should work but i advise you to write your css in app.css already present in src/css folder. There is hardly any performance difference i noticed in both approaches while i’m testing on android(which offers worst performance for cordova app).

2 Likes