Init - Question on loading a function

Questions
1

I am still confused on how to load a function once so it will be available for the entire App and not reload every time I go to a page.
I’m using the Cordova Sqlite plugin and load a function that checks to see if a db has been created:

function CreateDB() {
myDB.transaction(function(transaction) {
  transaction.executeSql("CREATE TABLE IF NOT EXISTS vetDrugs (Id integer primary key, title text, desc text, notes text, drugradio text, conc integer, conc1 integer, conc2 integer, conc3 integer, dose integer, minimum integer , maximum integer )", [], function(tx, result) {
    //console.log(("vetDrugs Table created successfully");
  }, function(error) {
    console.log("Error occurred while creating the table.");
  });
});
}

It works as it should but I see it reload every time I go to a page.
I’ve tried loading the function several different places but it either fails to load or loads with each page click.
My question is, how and where is the best place to load a function that loads once and is available for the entire App, not reloading with each new page. I realize this may be a simple thing to do but i am lost at this point on the answer.

2

Hello @macsupport.

You should call the “createDB” function in the “init” event of your App.

If you have created the App from the FWK7-CLI, look at the cordova-app.js file, function ‘init’.

Alternatively, you can add a listener to Cordova’s “deviceready” event and call your function from there (https://cordova.apache.org/docs/es/latest/cordova/events/events.deviceready.html)

3

Thanks. Tried it on deviceready a number of times and the App loads with a white screen with no specific error, so I abandoned trying it there.
Unfortunately, a FWK7-CLI Core Cordova App does not generate a cordova-app.js file, just app.js and routes.js. I have one in a svelte project I have but this one is plain vanilla core.

4

Could you share more information about your implementation? Code?

5

My App is a framework7 core App using v5. It is a drug dose calculator App which requires a number of functions to facilitate the calculations (especially on change and keyup in inputs) as well as uses Sqlite Cordova plugin to allow users to add drugs to the App themselves.
What I am seeing with mu current method of loading functions, is that they reload with each page loaded, which is inefficient and slows the app considerably. I don’t quite understand how each method of loading JS on init of app or Page differs.

The way I understand loading JS in Framework7 (core) is that it is in the following possible ways:

In app.js:

function onDeviceReady()

  var app = new Framework7({
  on: {
  init: function () {
  console.log('App initialized');
 },
 pageInit: function () {
  console.log('Page initialized');
 },
 }
})

var mainView = app.views.create(".view-main", {
on: {
pageInit: function () {
  console.log('mainView init')
}
}
});

$$(document).on("page:init", '.page[data-name="misc"]', function(e) {
 //load your function here 
 });

or in router.js, using:

on: {
    pageBeforeIn: function (event, page) {
      // do something before page gets into the view
    },
    pageAfterIn: function (event, page) {
      // do something after page gets into the view
    },
    pageInit: function (event, page) {
      // do something when page initialized
    },
    pageBeforeRemove: function (event, page) {
      // do something before page gets removed from DOM
    },
  }

So I need to try to understand how each method differs and the best way to load JS that is universally needed vs only needed on a specific page.
Hope my explantation makes some sense!!

6

Are you add a listener for this function? You shuld do it, in this way:

document.addEventListener("deviceready", onDeviceReady, false);

About f7 evets, read this: https://framework7.io/docs/events.html

7

Yes I use document.addEventListener("deviceready", onDeviceReady, false);

8

Sorry but I understand what’s happening.

If you create a F7-Cli App, and select Cordova option, you should have a “cordova-app.js” with all Cordova plugins handlers.

9

It doesn’t seem to produce one if you select no bundler. I don’t use a bundler in my App.

10

There is a method I use that works for me .
When building cordova apps, I create a function.js file where I store all my function.
When creating functions I make sure they are global functions , so they can be accessed from practically any where.

I create functions like this (I have copied and wrapped your function into a "global function ")