Framework7 - script not working in another page

Questions
1

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!

2

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

3

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
4

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

5

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

6

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
7

Thankyou all! It is fixed now.

8

I tried it but it didn’t work out

9

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

10

Capture I added this to my HTML file

11

Capture1 and this to my app.js

12

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

14

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.

15

Shouldn’t it be ‘page:init’?

16

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
17

Add data-name attribute to div with class .page

2 Likes
18

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?

19

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
20

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>';
            $$('#select_ciudades').append(html);
        }
    }, 500);

    setTimeout(function (){
        // AquĂ­ estĂĄ la magia
        getCiudad();
    }, 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;
}