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:-


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?


1 Like

Add data-name attribute to div with class .page


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


Yo lo resolví de la siguiente manera.

En mi segunda página le puse un setTimeout que llama a una función.

Dentro de la etiqueta script

export default (props) => {
    const departamento = props.departamento;
    var ciudades = departamento.ciudades;
    var html;

    setTimeout(function (){
        for (let i = 0; i < ciudades.length; i++) {
            html = '<option value="'+ciudades[i].id+'">'+ciudades[i].nombre+'</option>';
    }, 500);

    setTimeout(function (){
        // Aquí está la magia
    }, 600);

    function getCiudad(){
        // Todo el código JS que quieras
        var smartSelect = app.smartSelect.get('.ciudades-smart-select');
        smartSelect.on('close', function (el) {
            console.log('Valor: ' + el.selectEl.selectedOptions[0].value + ', Texto: ' + el.selectEl.selectedOptions[0].text);

    return $render;