Loading js file for a single page, best practice? #143

New Issue

2018-03-20T04:54:42-05:00

nbl7 commented

2018-03-20 04:54:42 -05:00

(Migrated from github.com)

Hello there,

I cannot find the best solution for loading js files, only for a single page and only once.

I've divided all my js files between global files and single-page files, respectively outside and inside the pjax container that is being replaced.

But of course every time I come back to a single page the js file is loaded again and all the function like on.('click') are fired another time.

What is the best practice here?
I would prefer not to load all js files at once.

Thank you
Best
nbl7

Hello there, I cannot find the best solution for loading js files, only for a single page and only once. I've divided all my js files between global files and single-page files, respectively outside and inside the pjax container that is being replaced. But of course every time I come back to a single page the js file is loaded again and all the function like `on.('click')` are fired another time. What is the best practice here? I would prefer not to load all js files at once. Thank you Best nbl7

BehindTheMath commented

2018-03-20 07:44:41 -05:00

(Migrated from github.com)

Can you explain a bit more what your setup looks like, or show some code? I'm not sure what you mean by single page file.

nbl7 commented

2018-03-20 12:31:04 -05:00

(Migrated from github.com)

Yes, sorry.
For example, this is the map of a website:

Homapage
About us
Contact

All three pages need jquery.js and main.js.
But Homepage needs another script called home.js
and Contact needs contact.js

#main is the container I am replacing with pjax

If I put the script home.js inside the div #main, every time i go to the homepage the home.js is fired, so I don't think is the right way of handling the js.

What would be the best practice to load only once home.js and contact.js?

Thank you
Best
nbl7

Yes, sorry. For example, this is the map of a website: - Homapage - About us - Contact All three pages need `jquery.js` and `main.js`. But _Homepage_ needs another script called `home.js` and _Contact_ needs `contact.js` `#main` is the container I am replacing with `pjax` If I put the script `home.js` inside the div `#main`, every time i go to the homepage the `home.js` is fired, so I don't think is the right way of handling the js. What would be the best practice to load only once `home.js` and `contact.js`? Thank you Best nbl7

BehindTheMath commented

2018-03-20 14:34:22 -05:00

(Migrated from github.com)

I can think of 2 options:

Move the script tags into the <head> of your container page, store any data in global variables, and access them from the corresponding page.
Use a global variable to check if the code was run already.

I can think of 2 options: * Move the script tags into the `<head>` of your container page, store any data in global variables, and access them from the corresponding page. * Use a global variable to check if the code was run already.

nbl7 commented

2018-03-20 14:51:51 -05:00

(Migrated from github.com)

Thanks for the answer.

That is what I did. But I thought there was a way the plugin can automate this process.

The reason I don't wan't to load twice the js is because otherwise I will bind multiple times click events on DOM elements.

Thanks
nbl7

Thanks for the answer. That is what I did. But I thought there was a way the plugin can automate this process. The reason I don't wan't to load twice the js is because otherwise I will bind multiple times click events on DOM elements. Thanks nbl7

👍 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#143