Yet another Javascript question

G. Dugan asked on February 25, 2016 21:25

I have searched and followed several posts/tutorials on how to properly add/link javascript to a certain pages.

Kentico 8.2.42 install currently

What I have done successfully was add the .js script/file

Application List >> Javascript (added my code, saved)

However.. I have tried and tried and can NOT get this .js file linked to my target/intended page.

I have tried following this article: https://docs.kentico.com/display/K82/Managing+JavaScript+files

Neither have worked outside of adding the .js script to Kentico itself.

The "Linking JavaScript files through the Head HTML code web part" part doesnt even tell you HOW to get to that page/section..

These steps: (adding the link to the header/template) also have not worked

==================================================

Linking JavaScript files in page templates:

Open the Page templates application.

Edit a page template.

    You can for example edit a Master page template to include the JavaScript file on all pages of the website.

Switch to the Header tab.

Add a reference to a JavaScript file using a HTML tag.

    For example <script src="/myscript.js></script>.

Click Save.

==================================================

I can save as much as I want.. when I go to the page in question.. I look at source code.. and no script/function is there/added.

What is the proper way to link a .js file since these steps do not work?

Its QUITE frustration thats is so difficult to do such a normal/easy task,.... in Kentico.

Recent Answers

Zach Perry answered on February 25, 2016 23:20

The "Linking JavaScript files through the Head HTML code web part" part doesnt even tell you HOW to get to that page/section..

Head HTML Code is a web part you add to whichever template you want the javascript on. The screen shot in the article is of the settings of the web part.

1 votesVote for this answer Mark as a Correct answer

G. Dugan answered on February 25, 2016 23:45

Sorry.. but that is not making sense to me..

So your saying to go to:

Application List >> Web Parts >> Find my entry in the tree/left col

(which is All Web Parts >> ParentNodeName >> AskExpert)

At top it shows this: Web parts >> Ask Expert Search (Web part)

I see nothing labeled 'settings'??

Once that Ask Expert Search node is selected..

I have several links/items at top: General Properties System Properties Layout CSS Theme Documentation

but nothing called settings

thanks.

0 votesVote for this answer Mark as a Correct answer

Trevor Fayas answered on February 26, 2016 14:54

The instructions to add the header depend on if the templates allow inheritance of other headers.

I would do what the other said, use the HTML Head code web part, it just adds whatever you put in the section.

The only thing i would warn is don't put all your Site-wide javascript in the header, it slows page loads, i put only jQuery / jQuery UI in the header and the rest of the site used javascript on the bottom of the page, but that's more HTML best practices.

0 votesVote for this answer Mark as a Correct answer

Joshua Adams answered on February 26, 2016 15:14

Why not use the javascript webpart? You can easily move that around, plus you can manage all of it from the design view. On top of that, you can set visibility conditions on it.

0 votesVote for this answer Mark as a Correct answer

G. Dugan answered on February 26, 2016 16:14 (last edited on February 26, 2016 16:27)

Thanks guys..

while I appreciate the responses..

If you can not give the steps to get to these pages.. (its not very useful unfortunately) either its not working.. or Im in the wrong place? lol

I have tried to add to head. I tried add to a 'page'. I have tried to add to template.

Nothing has worked.

when I go to page.. and check source code.. (there is no function declared anywhere)..

and clicking on the 'link' that is supposed to call this js function still gives an error (not defined, cause its NOT in the header)

At this point I am still in the same state. I have added the .js script the Kentico.. but can NOT link it anywhere/add it to any pages.

when I go to this tutorial: https://docs.kentico.com/display/K82/Managing+JavaScript+files

and this section: Linking JavaScript files through the Head HTML code web part..

it only shows an image.. not HOW to get to that page/section. (Web Part Properties (Head HTML code))..

how to navigate to there? I posted my steps above.. (nobody commented on them.. so they are right? wrong? what?)

thanks.

0 votesVote for this answer Mark as a Correct answer

G. Dugan answered on February 26, 2016 16:47 (last edited on February 26, 2016 16:53)

update: thanks for the help/responses guys. I finally got it figured out. It was my own error I guess.

I added it to the 'template' >> header tab section:

What I didnt realize/understand was that there was another 'template' (prefix: portal)

Ask the Expert Search

Portal Ask the Expert Search

One must be the 'page' and the other the search box/field itself?

Anyways.. its now working.

Thanks again!

0 votesVote for this answer Mark as a Correct answer

emma zelewsky answered on February 26, 2016 17:36

Instead of using the HeadHTML webpart, I'd recommend going with the Javascript webpart on your templates. As Joshua mentioned, it gives you more flexibility on placement in the DOM and with loading the js itself, and it seems to play nicer with fetching js from the custom dir.

Don't use the tilde (~) path, which I've found can be janky. The Javascript webpart will enter a path like this -- Custom/myJsFile.min.js without the leading tilde and slash. Dots in the file name are OK.

Another handy feature of the Javascript webpart is that you can add script directly to the template, which is useful for init js. But be careful about loading a file and adding an init in a single Javascript webpart. I've run into problems that way and usually use a separate webpart for each.

As for the files themselves, instead of copying your js file to the custom dir on the server, go to Apps --> Dev --> Javascript files. Then, create a new one and copy-paste the js into the popup or upload the file. If you upload, make sure .js files are allowed. You can check at Settings --> System --> Files --> Security --> Upload extensions.

One more gotcha I've discovered, syncing doesn't work for the js files, at least in our environment. So if you're staging content, be sure the js gets to the custom dir on your production servers.

0 votesVote for this answer Mark as a Correct answer