How can I load a script in a JavascriptMVC controller - javascript

I know how to load scripts using steal however I want to load it before the code in my controller's init method is executed. I need the methods from a script file to be defined before the controller initialization.
How can I do that?
EDIT: Some background info: I've tried loading the script file using the steal function in the controller like so:
steal( 'jquery/controller','jquery/view/ejs', '../js/other.js' )
The result was that the file was loaded via <script> tag in the head section of the file.
Also jQuery was not defined before loading set file.

Are you using then() to define your controller?
steal('jquery/controller','../js/other.js').then(function() {
// other.js is loaded now
$.Controller(...);
});

Related

How to load a script for a specific route in angular 4

I have to load a script that calculates the analytics on a specific route in angular 4. But for other routes the script should not get loaded.
I tried adding the script in index.html but the script will be loaded for all the routes. Any workaround for this?
below is the script
(function(a,b,c,d,e,f){
a.hj=a.hj||function(){(a.hj.q=a.hj.q||[]).push(arguments)};
a._hjSettings={hjid:xx,hjsv:xxx};
e=b.getElementsByTagName('head')[0];
f=b.createElement('script');f.async=1;
f.src=t+a._hjSettings.hjid+d+a._hjSettings.hjsv;
e.appendChild(f);
})(window,document,'https://xx.xx.com/c/xx-','.js?sv=');
If you add it in index.html then the script will be loaded in all components, and this is not your need. So you can try loading the script from the ts file of the component in which you want to load the script. So in the ts file, you can do it as follow.
System.import('https://xx.xx.com/c/xx-','.js?sv='); //or below one
require('https://xx.xx.com/c/xx-','.js?sv=');
Reference: https://stackoverflow.com/a/41402204/10971575

JavaScript file doesn't effect new file imported via jquery load() method

I have a file index.php and there is a main js script in its header.
I'm using Jquery load method to load other php file inside a div element:
$("#formHideinAjax").load('loginpass.php');
And as our friend explained here the main js file which had loaded in the header doesn't work in new imported file so I was forced to add the js file inside the loginpass.php too(Now I have two same js file, one in header and one in div that loads loginpass.php ! )
I know that this method of loading js file is not standard and sends more request to my server.
How can I fix this problem?
Well, it is explicitly said in $.load() documentation. I'm afraid you can't just paste <script></script> code into your DOM for browser to run it.
I'm afraid you have to send JavaScript code from your loginpass.php file (without <script></script> tags) and just eval it in your JavaScript
$("#formHideinAjax").load('loginpass.php', function () {
// eval JavaScript code from php file here
});

Using external js libraries in sapui5

So I'm trying to inlcude an external .js file in my SAPUI5 Controller.
jQuery.sap.includeScript("externalLibrary.min.js",
function() {
//initalizing objects from library
});
However, the callback which should be called once the script is loaded, never gets called. The error message it gives me is:
"externalLibrary.min.js:16 Uncaught TypeError: Cannot read property
'Constructor' of undefined"
Whats another way I could do this? I was looking into jQuery.sap.registerModulePath() and jQuery.sap.registerResourcePath() but couldn't find a good example of the use of these nor an explaination of the difference between the two online.
Thanks a lot!
You can try jQuery.sap.includeScript(vUrl, sId?, fnLoadCallback?, fnErrorCallback?)
https://sapui5.hana.ondemand.com/docs/api/symbols/jQuery.sap.html#.includeScript
in fiori launchpad based app , we use component.js as root , so we don't have index.html to include scripts (if you use XML view instand of HTML view).
try
jQuery.sap.includeScript({
url: "https://maps.googleapis.com...",
id: "IncludeGoogleMapsScript"
}).then(function() { ... })
Not working in portal service , fallback is provided :
UsingjQuery.sap.includeScript().then() in HCP Firori Launchpad
You can use jQuery.sap.registerResourcePath('lib', URL) and then jquery.SAP.require('lib.file'). You can do both one after another or register in the init and later require. Does not matter. I don't have an example at hand as I am on a phone but it works. What you need to keep in mind is that this example would load something like URL/file.js so you need to adjust accordingly. The name you give to the lib does not matter.
You can also inject a script tag into the current page ,however, the require will load the external lib synchronously while if you inject a script tag you need to wait until it is loaded with a callback.
PS: the capitalization on those methods is not right
Got it! For future reference, it works to load the files from the index html like so:
<script src="library.js"></script>
The main problem was that I was trying to include external dependencies which also contained jQuery. So, I had to remove that from the file and now it's working.

Jade: How to include js file in a certain point

i want to include a file that must be used only when a jade file is render client side, this is the .jade file:
button(type="button")#start.flex
p#timer.flex
button(type="button" )#stop.flex
script(src='../public/js/timer.js')
The js file will handle the timer function, i have a console log in the .js file but it is never fired. What i'm doing wrong? I canno't import it in the head because the element won't be ready yet.
Thus i have to find a way to include and use timer.js only when this file is render. Thank you guys
JavaScript inserted as DOM text will not execute.
You must load the script file initially, with the document load. When loading content via AJAX response, execute whatever javascript function or functions you want in the success handler. There are other ways as well, but your current design wont work.
Checkout this link:
http://caih.org/open-source-software/modularjs/loading-javascript-script-vs-ajax-vs-both/

including external javascript file

I am trying to include external javascript to a document. Let's say that external js has the following code.
function myFunction() {
console.log("hello");
}
and I include it from console by
var script = document.createElement('script');
script.src = "http://myjs";
document.getElementsByTagName('head')[0].appendChild(script);
but then I still get myFunction() is undefined error. The function is being called from php file included on the page somehow. Interestingly, appending my external javascript right after the head tag in the document was not enough for it to precede the function call from the loaded php file.
Q: how do I ensure that I include my javascript BEFORE the php file given my situation?
EDIT: this is the hierarchy of all the sources
mysubsite.com
myfolder
mypage.html
mysite.com
myfolder
main.php
problem.php
problem.php is calling function myFunction() but it's not included anywhere yet. So I try to define the function in an outside js file and include it in mypage.html, but problem.php still comes before the included javascript in mypage.html
EDIT:
I think the real problem is that I am dealing with an iframe that's included inside a main document. In this case, is there a way to include my external javascript file inside the main document from console? Including scripts from console only affects the iframe instead of the main document.
What you're doing is fine, but then you have to wait for the file to load. Most browsers will raise the load event on the script element although some older versions of IE use onreadystatechanged instead. But since you're using jQuery (from the tags on the question), you don't have to worry about that, you can just use $.getScript:
$.getScript("http://myjs", function() {
// The script has been loaded, you can call myFunction now
});
PHP is always included before JavaScript. PHP is executed by the server before it's sent to the client, and JavaScript is executed by the client.
Why can't you just put a regular <script type="text/javascript" src="http:/myjs"></script> in your head?

Categories

Resources