eZ Community » Forums » Setup & design » Load Javascript
expandshrink

Load Javascript

Load Javascript

Saturday 16 June 2012 5:21:40 pm - 6 replies

Hi guys,

I'm trying to understand how I add javascript files to my page with the ezscript_load.

I have the template page_head_script.tpl with the following code:

 {ezscript_load( array( ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ), ezini( 'JavaScriptSettings', 'FrontendJavaScriptList', 'design.ini' ) ) )}

My questions are:

  - Witch design.ini file does this refers to?

  - Where can I add js files to the list ? I supose it exists a file with an attribute JavaScriptSettings were I can add JavaScriptList elements. I tried the design.ini.append.php under my siteaccess file and nothing appens.

 

Any help would be appreciate.

Regards,

Ricardo

Sunday 17 June 2012 4:04:11 am

Hi Ricardo,

I'm not sure exactly what you're trying to do but there are 2 ways you can attach js to your pages.

If you are needing to have the file attached on every page in the site you can use the design.ini.append.php to do this. In the current versions of eZ you will find the following in the design.ini.append.php should attached a specified file for every page.

The system will look in '/design/<foo>/javascript' where <foo> is either the default site design folder or one of the fall backs (I go into more detail about that below)

I assume you are placing you .js file into the following setting in design.ini.append.php

[JavaScriptSettings]
JavaScriptList[]=foo.js

The other way is to use ezscript_require. This will attach the files specific to the template you are loading. An example is below.

{ezscript_require( 'foo.js' )}

Depending on the requirements I would generally suggest using ezscript_require to keep js code that isn't required out of the cache files for that view.

You've mentioned that the files don't seem to be working when you use the design.ini.append.php for your siteacess. I would usually try the following to work out what's going on.

  • Verify you are loading the correct site access. When you load your site from the default index.php it will load the default site access as set in /settings/override/site.ini.append.php this is usually 'eng' on a default install.

    When I was starting out I would put things in the wrong siteaccess and find they don't work and be wondering why.

  • Check that the .js file you're trying to load is in the correct site design for the siteaccess. This means either in the design folder you specifiied in the site.ini.append.php for that siteaccess. Or one of that fall back design folders as outlined in the same file. They should be placed into '/design/<your_site_access>/javascript/' Example below

    [DesignSettings]
    SiteDesign=<your_site_access>
    AdditionalSiteDesignList[]
    AdditionalSiteDesignList[]=ezdemo
    AdditionalSiteDesignList[]=ezflow
    AdditionalSiteDesignList[]=base
    AdditionalSiteDesignList[]=standard

    I do find that on a default install if you don't change it the design settings are usually.

    [DesignSettings]
    SiteDesign=ezdemo
    AdditionalSiteDesignList[]
    AdditionalSiteDesignList[]=ezflow
    AdditionalSiteDesignList[]=base
    AdditionalSiteDesignList[]=standard

  • Check the debug output to see if an error has occurred during attachment of the files and also check the cache list to make sure the file has been attached.

    If you haven't already, turn on debug with "list of used templates" enabled. You should be able to see a list of the .css and .js files eZ has used to create the cache files it serves up to the browser on page load.

    eZjscore will also output an error into the debug log if it cannot find the file specified. 9 times out of 10 for me I find I've made a mistake when referencing the file.

I hope this helps. If you're still having issues let me know and I'll try to help as much as I can.

Cheers,

Sunday 17 June 2012 2:16:03 pm

Thank you for your help but I can't understand why it doesen't work. I've tried everything you sugest but without any success.

Now I have change the page_head_script.tpl to the following code:

 {ezscript_load( array( ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) ))}

And strangely it loads the following JS file:

  /var/ezdemo_site/cache/public/javascript/e9d653e9b1406e58bc0cdb16a8d522ca.js

Where is this file specified?

And if  change the page_head_script.tpl to the following:

 {ezscript_load( array( ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) )|ezroot() )}

I get the following file load:

    /extension/myownxtension/design/myowndesign/javascript/video.js

But I haven't specified the video.js anywhere.

Could anyone help me?

BTW: How can I program my template to only load the JS files in the pages needed. For example I have a carousel of images in the home page but not on the other pages, so I only want the home page to load the carousel. And in the gallery page I have a JS gallery, and like before, I just want that the gallery.js to be loaded in the gallery page.

Modified on Sunday 17 June 2012 2:28:59 pm by Ricardo Ferreira

Sunday 17 June 2012 7:04:24 pm

You seem to have some issues with several concepts at once here, some doc that might helps:

http://doc.ez.no/eZ-Publish/Technical-manual/4.7/Concepts-and-basics/Configuration
http://doc.ez.no/eZ-Publish/Technical-manual/4.7/Concepts-and-basics/Designs
http://doc.ez.no/eZ-Publish/Technical-manual/4.x/Reference/Template-operators/Data-and-information-extraction/ezini
http://share.ez.no/learn/ez-publish/ezjscore-ez-publish-javascript-and-ajax-framework

(last link describes ezscript_* functions on page 4)

 

Basically you shouldn't change the ezscript_load() line, it makes sure you can use ezscript_requrie() on any page to load scripts pr page (which is what you seem to want), and it also takes array of scripts using ezini() that should be loaded on all pages (so this is where you get video.js from). It also makes sure all this scripts are "compressed" together to improve performance of you web site (the result is placed in your /public/ cache folder).

RE: " - Witch design.ini file does this refers to?"
All files in eZ Publish settings/ folder including override and current siteaccess, and in all activated extensions. See first link above for how the configuration system work.

But as hinted above, you should look into using ezscript_requrie() which is described in link number 4 on page 4.

Monday 18 June 2012 1:46:58 am

Could you please give me an example of how to use the ezscript_require(), pointing out the files were I have to make changes.

 

Thank you.

Monday 18 June 2012 2:48:52 pm

Anyone could please give me an example of how to use the ezscript_require(), pointing out the files were I have to make changes.

 I really need some help on how this work to improve my website performance.

Thank you.

Thursday 21 June 2012 11:08:03 am

Hi Ricardo,

Have a read of the ezjscore article Andre suggested, in particular the page on template operators.

Basically:

  1. Specify JS to load
    • Site-wide files => design.ini.append.php (see Daniel's post)
    • Page-specific files => ezscript_require() in your templates
  2. Output JS (in header/footer)
    • Site-wide files => ezscript()
    • Page-specific files => ezscript_load()

Hope this helps.

Geoff

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from