Unable to pass my functions to other pages

Hello,

I am kind of lost on this one.

I have created multiple pages in my route.js as:

routes = [
{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/create/’,
url: ‘./pages/createreport.html’,
},
{
path: ‘/view/’,
url: ‘./pages/viewreports.html’,
},

];

My problem is that I have included my js code in the index.html footer as:

    <!-- Path to your custom app scripts -->
    <script type="text/javascript" src="js/app.js"></script>
    <!-- db -->
    <script type="text/javascript" src="js/db.js"></script>
    <!-- Custom Functions -->
    <script type="text/javascript" src="js/functions.js"></script>

I have notcied that this code is not accessible on the other pages, any idea how I can pass the js files back to each individual html files?
IDo I need to manually re include each js files? I find this strange.

Thanks.

Simply put, what I need to do is be able to load function.js and jquery.js on app init and have these 2 files working on all my subsequent pages.

Thank you.

1 Like

No idea who has changed this as “solved” but it is not.

What is the best way to add JS files to a sub page and have all your AJAX calls working correctly, this is still mystery to me.

It is not usually a good practise to load the scripts on demand for specific pages, but if you really need it you need to do it using async route:

{
  path: '/somepage/',
  async(to, from, resolve, reject) {
    // scriptIsLoaded - some condition to determine whether the required script is already loaded
    if (scriptIsLoaded) {
      // resolve with page
      resolve({url: './somepage.html'});
      
    } else {
      // if script was not loaded then load it and then resolve it to page
      loadScript('somescript').then(function () {
        // now when page loaded, the requested scripts will be accessible there
        resolve({url: './somepage.html'});
      });
    }
  }
}

Thank you for the reply.
I cannot load my ajax calls on the js file that reside in the index.html. I would have loved to have all my ajax calls in one single file on the main index.html but the calls do not work when I try to call them from other pages(called via the router), no idea why.

Would you have a solution for this please?

Thank you.

No matter where do you call it from if you reference all correctly, show examples of how do you do it

It seems that the issue is caused by app.router.navigate(’’);

Each time i navigate to page using this, all the js which is in the fotter of the index.html is not accessible anymore.

Is there a way to navigate to other pages using a different method that would allow the index.html js to still be accessible please?

Here is my ajax call

   $.ajax({
      url: SERVER_URL + '/api/test',
      method: 'POST',
      dataType: "json",

      beforeSend: function (xhr) {
      xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    //   app.dialog.progress('Synching app<br>please wait...');
      },
      statusCode: {
        //If status is 200

        200: function (response) {
          isLoggedIn();
          console.log("Access Token OK - Access Granted");
          app.router.navigate('/select/');
          app.dialog.close();
        },

        500: function (response) { //error
          console.log("error 500");
          app.router.navigate('/login/');
          app.dialog.close();
        },
        404: function (response) { //Not found
          console.log("error 404 Not found");
          app.router.navigate('/login/');
          app.dialog.close();
        },
      }
    });

My routes.js which is in the index.html footer:

routes = [
  {
    name: 'login',
    path: '/login/',
    url: './index.html',
  },
  {
    name: 'select',
    path: '/select/',
    url: './pages/select.html',
  }
];

I forgot to add, when the app starts and lands on the index.html, my ajax calls works but as soon I go to the same page via

app.router.navigate('/login/');

The ajax is not reachable at all.

Thank you.