How to properly load all required javascript in a Web Part in SharePoint online

Question

In a Web Part how to load all required javascript? In which order?

I've tried various combinations, but there is often some problems.

I stress one more time that I am using SharePoint Online.

At the moment I have:

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script type="text/javascript" src="../Scripts/App.js"></script>

In App.js I want to call my function after that all is properly loaded.

Answer 1

<script type="text/javascript" src="../Scripts/App.js"></script>

in src give full path e.g https://mysharepoint.com/sitename/SiteAssets/App.js BUT beware that all users who are to view/interact which the webpart you're applying the scripts on, must have at least read permissions on the Site Assets folder of the site.

This you can by pass by adding the script/css files in root folders through SP designer. Just open up the main site i.e https://mysharepoint.com in SP designer then from left menu All files -> _catalogs -> create new folders like css/js and put your files there. Now this way https://mysharepoint.com/_catalogs/App.js will be available publicly (wouldn't even require authentication i guess)

If you're trying add more than one JS link to a webpart use pipe | between these links like https://mysharepoint.com/.../App.js|https://mysharepoint.com/.../App2.js but it doesn't necessarily mean these JS files will only be acting on this webpart alone. These scripts will get loaded on page load no matter what and may affect rest of the webparts/elements in the page. Make it simple add a Script editor webpart and load your scripts there inside <script></script> tags ofcourse!

Answer 2

You can do similar actions explained in this post. Load your required scripts in document ready function and then call your main method.