Search…

X3 Photo Gallery Support Forums

Search…
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Custom JS for each page?

25 Nov 2018, 14:33

After some search I feel I am getting there, so just to want to check...

In the Settings-custom-custom Javascript I can add global custom JS code, for the entire website.

For certain page which I want to custom respectively, is it the 'content' the place I add <script></script> containing the custom JS codes?

Thanks!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom JS for each page?

26 Nov 2018, 01:50

littlelio wrote:For certain page which I want to custom respectively, is it the 'content' the place I add <script></script> containing the custom JS codes?
Yes you can normally add <script>...</script> at the bottom of your page 'content'. Some precautions:

Since X3 is an 'ajax' application, code you add here will execute each time the page is navigated to. Not usually a problem, but if you are loading external javascripts, the javascript will re-load each time (even if already loaded), and if you are defining functions, functions will be redefined each time (even if already defined). You may want to predefine functions globally in Settings > Custom > Custom Javascript, and if you load external scripts, you may want to add them globally to Settings > Custom > Head, OR include some logic to make sure the external script only loads once. It is however normally harmless to reload external scripts or redefine functions.

Another thing to consider, if you are trying to use jQuery in your JS (included in X3), jQuery will not yet be loaded once the browser sees your custom <script> on page load. You would either need to add some logic to check if jQuery is loaded, or add your JS into Settings > Custom > Custom Javascript. For example:
Code
myFunction(){
  // do your stuff
}
function x3_load_page(){
  if(x3_page.permalink === '/path/to/page/'){
    // do your stuff, jQuery is loaded
    myFunction();
  }
}
If you want to run jQuery from inside content using jQuery, you could use something like this:
Code
if(typeof $ != 'undefined'){
  myFunction();
} else {
  document.addEventListener("DOMContentLoaded", function(event) {
     myFunction();
  });
}
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

26 Nov 2018, 08:05

Thanks for the hint.

The script here will work as a call-back function, when someone quotes the web page. So the page will not be loaded at all.

Anyway, I am glad X3 has such flexibility!
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

26 Nov 2018, 16:07

By the way, can I add <?php xxx ?> codes in the custom part, or content part of each page?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom JS for each page?

27 Nov 2018, 00:15

littlelio wrote:By the way, can I add <?php xxx ?> codes in the custom part, or content part of each page?
Sorry, no. Data is simply injected into pages, which are rendered from templates. Besides, once a page gets cached, it will not process any PHP, which is the major point of caching for faster performance.
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

27 Nov 2018, 03:47

mjau-mjau wrote:
littlelio wrote:By the way, can I add <?php xxx ?> codes in the custom part, or content part of each page?
Sorry, no. Data is simply injected into pages, which are rendered from templates. Besides, once a page gets cached, it will not process any PHP, which is the major point of caching for faster performance.
Sure, understand.

I have some custom js code, which need some algorithm generating some kinds of signature (given a token and calcuate the signature, they can be hard-coded). This part can be either php, python, node or java. Is it possible to find a way to plant the javascript + php/node/java/phython into the page?

I think this is the point between fullly-customized website and template-powered-ready-to-use website... It will be only used by me so some hacking is all right, as long as it is safe (I don't want to pass the token/signature undecrypted).

Any comment is highly appreciated...
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom JS for each page?

27 Nov 2018, 05:42

Now, as mentioned in another post, you can easily add javascript into X3. It is not entirely clear to me what you are trying to achieve, or if it can be done with Javascript alone. If not, you can include PHP into X3 by communicating with your PHP script via Ajax / Javascript. Just as an example:
Code
function x3_load_page(){
  $.post('your_PHP_script.php', {data1: true, data2: false}).done(function(response) {
   // do your stuff here from the "response" sent from PHP
 })
}
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

27 Nov 2018, 07:25

cool. Yes, I was able to pass data between ajax and php, exactly as you said. works well.

by the way, here in your example, your_PHP_script.php, where should I put it? or in other words, if I put js codes in the global custom js field, what is the folder relative to the server? And if I put into each page content field, is the position of the file will be the same?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom JS for each page?

27 Nov 2018, 08:06

littlelio wrote:by the way, here in your example, your_PHP_script.php, where should I put it? or in other words, if I put js codes in the global custom js field, what is the folder relative to the server? And if I put into each page content field, is the position of the file will be the same?
Since this is called from Javascript, the load path will work just like HTML links and paths. It doesn't matter if you put the javascript in global settings or page settings, JS load paths will always be relative to the current URL. That's why you should use root-relative paths for example /myfolder/myscript.php.

Starting the path with / means JS will look from the root of your website directory, thus the url is consistent regardless of the page it is loaded from. There is no specific rules about where you should place your own PHP scripts. You can place them in your own non-X3 folders ... Or if you want to keep things in neat X3 context, upload your PHP files into /content/custom/php/, and then load from /content/custom/php/myscript.php.
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

27 Nov 2018, 08:36

thanks.

since the album may in different depth of the folders, I choose to use absolute path given my host. In my case, X3 is in the /x3/xxxxx.
I will put the php api files in /x3/phpapi, then load page-specific content in the content area manually.

in the custom js part, what is the difference between x3 load and x3 page load? I tried to read, but really still confused... :P
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom JS for each page?

27 Nov 2018, 08:45

littlelio wrote:in the custom js part, what is the difference between x3 load and x3 page load? I tried to read, but really still confused... :P
When you first open a X3 page, the X3 application loads. It only loads ONCE, even after navigating to other pages, which loads data via Ajax / Javascript.

x3_load()
Will ONLY trigger on initial page load, once the X3 application is loaded and ready. jQuery, document and various data is ready to be used. Will not trigger when navigating to different pages via the menu.

x3_load_page()
Will trigger for every page you navigate to from X3 menu, in addition to the initial page load (same as above).
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

27 Nov 2018, 09:51

I see.

For example, i have 300 images in a single gallery, in grid layout. So once it is opened, only those thumbnails (say 10 ) in the view will be loaded - lazy loading I guess? Of course if you scroll down, more thumbs will be loaded.

So, if I don't scroll down to show the rest of the 290 images, is the page considered loaded?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Custom JS for each page?

27 Nov 2018, 11:39

littlelio wrote:For example, i have 300 images in a single gallery, in grid layout. So once it is opened, only those thumbnails (say 10 ) in the view will be loaded - lazy loading I guess? Of course if you scroll down, more thumbs will be loaded.

So, if I don't scroll down to show the rest of the 290 images, is the page considered loaded?
The functions have nothing to do with images loading or loaded. Both events x3_load() and x3_load_page() will trigger before, and independently from any images or other assets loading. You can still use the functions above to manipulate images in the page, as they are already there in the document, although the source may not be loaded yet ... However, these events are not meant to be some kinda tracking to see if a visitor loads all images or not ... It's for triggering custom javascripts when page is ready to accept them.

x3_load() is basically a replacement for jQuerys $(document).ready(function(){/*do your stuff*/}) event, which is used in many coding patterns to trigger a function once the document and all javascripts are ready ... because most often, you need to make sure the document is loaded and scripts are available before you can run your JS code. The x3_load function is just a wrapper for this event, but also makes sure X3 is ready and has made it's initial build of the X3 page on load.

Since X3 is an ajax application, which will not fire the above event on additional page loads when navigated from the menu, we created the x3_load_page function, where you would place scripts that need to be triggered on a per-page basis. This is a necessary recipe for ALL website applications that work like X3 where pages load dynamically via Ajax.
 
littlelio
Experienced
Topic Author
Posts: 25
Joined: 20 Nov 2018, 21:21

Re: Custom JS for each page?

28 Nov 2018, 01:15

Well understood. Thanks.

So for my need, I put codes in settings - custom js. I use ajax post to communicate between php. The meta tags of each page are cool, they will feed my PHP server side some data, which may be different from page to page. So I can leave the chunk of codes in one place (global setting), and fill in meta info for each page.

So far I think this way  to put custom js codes should be able to fix most of the needs. Thanks a lot.