Monaca Onsen UI Discord Chat Github Repo

Where to place custom.js file for separate html page?



  • Hello There,

    I think this is a simple question. I have three separate pages. One page needs to reference a custom.js file.

    If I put the js in that page using a <script> tag, the js works, but I’ve tried placing the custom.js file in the index and the needed page. It doesn’t work. Any help would be appreciated. I’m sure I’m missing something simple.

    -R


  • administrators

    If your separate file is just a template to be loaded by, for example, ons-navigator, then you should put the JS file in the index page e.g.:

    // index.html
    <script src="custom.js"></script>
    <body>
      <ons-navigator page="page.html"></ons-navigator>
    </body>
    
    // page.html
    <template>
      <ons-page>
        My page that uses the custom JS.
      </ons-page>
    </template>
    


  • Thank you for your reply, but my pages are not templates. They are separate pages. I don’t like having all of the pages and script in one place. It becomes hard to read. I separated the pages and I’d like to separate the code, but I’m not finding a way to do that. I’ve read the docs but probably missed this. TIA -R

    If I place the actual script in the separate myPage.html, it works.

    <script>
     var canvas = new fabric.Canvas('c');
    var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
     height: 20
    });
    canvas.add(rect);
     </script>
    

    If I use a separate script file:

    <script src="/js/custom.js"></script>
    

    It doesn’t work.


  • administrators

    You can still keep your pages in separate files (without the template tag). You can then put the script files in your main index.html file and when your separate page is loaded into the main file, you should be able to access it.



  • @emccorson

    Thank you for trying to help me. It didn’t work for me. I’ve tried placing the <script> file reference in my index.html. Then I tried placing it in both pages. The only way I can get the script recognized in the page is to write it out there. I guess I’ll just use the <script> tag and actual javascript within the page and deal with it. I’ll probably stumble onto the solution eventually. I tinker with onsen-ui but I’m a LONG way from knowledgeable.

    I appreciate the way your try to help.
    -R


  • administrators

    If you can put a minimal example on GitHub then I can take a look at it. At the moment, I’m not understanding what your code is supposed to do so I can’t fully answer.



  • Hello,

    I came here looking for what I guess is a solution to the same problem.

    ons-navigator supports pushPage(id, options).

    id can be the path and name of a separate (template/)file.

    options can be a JS object passed into that file.

    But how can one specifiy the JS which uses the options in that file? I would use an event like init from https://onsen.io/v2/api/js/ons-page.html#lifecycle (I just remembered the note from https://onsen.io/v2/guide/fundamentals.html#the-ons-object).

    According to the attempts by @LittleOldLady , the JS has to be placed inside the ons-page in that template inline, it cannot be referenced as a separate file from there? I just tested this, referencing a file by src indeed does not work.

    So a solution is to have all code in one or more JS files referenced from index.html and to use a one-liner like
    ons.getScriptPage().onInit = myFunctionCoveringTheCodeForThePageLoadedHere;
    inside the script in that template/file/page inline.
    Or use the

    document.addEventListener('init', function(event) {
      var page = event.target;
      if (page.matches('#id') {    // id as in passed to pushPage()
        myFunctionCoveringTheCodeForThePageLoadedHere();  // Set up page's dynamic content or behavior
      }
    });
    

    way. (Note the listener is bound to document and acts on the bubbled up JS events.)

    Any benefits/tradeoffs you know of you are willing to share?



  • I have tried LoadJS in my projects, it works fine with OnsenUI.

    Best Regards
    Gobi