Using external js libraries in sapui5 - javascript

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.

Related

Strapi custom auth controller

I'm using Strapi for my API and Back office. Everything works fine except one thing: I can't figure out how to override the controller that is used for the forgot password feature. I've tried to follow the documentation, especially this page : https://strapi.io/documentation/3.0.0-beta.x/admin-panel/customization.html#development-mode but no chance.
Here what I've tried :
Create a folder admin at the root of the project, inside which I created controller/Auth.js. In this file I created my custom forgotPassword function but it's not called.
Add the file admin/config/routes.json, my controller got the same name but I thought that maybe I need to repeat the route here to override, still not successful.
I saw on some page that to get what I was searching I needed to put those files (config/routes.json and controller/Auth.js) inside /extensions/user-permissions/admin, but it's still not working.
Whatever I try, it's always the default forgot password controller that is called, from the strapi-admin node modules.
Any help would be greatly appreciated, I don't see what I'm missing here.
It's normal, because your are not writing the file in the right place.
So I will help you with that.
First here is the documentation for the customization - https://strapi.io/documentation/3.0.0-beta.x/concepts/customization.html#plugin-extensions
Then we have to find the file in the code source we want to update.
Here is the function - https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/controllers/Auth.js#L266
Based on the file path and the way to customize in strapi.
You will have to create a file to this path extensions/users-permissions/controllers/Auth.js
Then create a module.exports with source code function and the update it.
this should work

How do I dynamically load third party libraries that only offer a CDN in an Angular 7 App?

I am trying to download the content of a javascript file from a CDN imperatively within a typescript file so that I can make use of it in the correct lifecycle hooks, and so that I can ensure it is only downloaded when it is first needed.
For example the googleCDN to download Jquery:
I do not want to add the library src to my index.html page, and I do not want to add it to my angular.json configuration file because I do not want to use this library in many places in my app, and so I do not want to always force my users to download it.
I have been experimenting with the HttpClient.JsonP method because the CDN server I am trying to request the library from is enforcing CORS, however, I believe that because the response is not JSON, rather a function, it doesn't work.
example code:
load<T = any>(): Observable<T> {
return this.http
.jsonp(
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
'callback'
) as Observable<T>;
}
with the error:
"JSONP injected script did not invoke callback."
That error makes sense I think because the response is not JSON and is not wrapped in a function like a browser expects.
I am now trying a similar technique as here:
https://gist.github.com/zainzafar90/1f58a4a04ac17fcf8e7424a053620822#file-dynamic-script-loader-service-ts
But I really don't like this as I believe I will have to augment a global variable with this, although I don't know how as of yet.

Lazy loading google map api

I want to lazy load all the 3rd party JS/CSS after my home page is displayed since the external plugins etc are used when user navigates away from home page onto some specific module.
So far I have succeeded for normal .js & .css external libraries thanx to http://wonko.com/post/lazyload-200-released
However this fails for a path like this http://maps.google.com/maps/api/js?sensor=true
Code:
LazyLoad.js('http://maps.google.com/maps/api/js?sensor=true', function () {
alert('Your JS has been loaded');
});
I think the solution would be how to lazy-load web url?
I believe you want something like:
$.getScript('http://maps.google.com/maps/api/js?sensor=true');
using jQuery. The API will give details of the call back. Else Google may have some mechanism requiring it to be present from load. Just a guess.
Found a solution:
Check the URL:'http://maps.google.com/maps/api/js?sensor=true'
You would find main.js is being imported by it . A simple getScript for sensor=true will not give whole google object so next import also required.
var t=setTimeout(function(){
jQuery.getScript('http://maps.google.com/maps/api/js?sensor=true');
jQuery.getScript('http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js');
},1000);

jquery not work with local reference but work with google reference

I use jQuery in my web project.
When I use local reference like this;
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
I receive this error:
$ is not a function
but when I use the Google reference in my project like this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Everything works fine.
It is noteworthy I use telerik component in my project.
It looks like the problem is simply that the relative path for the import is incorrect. Hence it's not loading jQuery and the call to $(document).ready is undefined.
You need to correct the path to the Scripts folder.
most probably ur not loading jquery right
Take these steps :
use developper tools in your browser (my favorite is firebug for firefox)
go to the scripts tab and check if jquery.js is there
if its there and its empty, check the url, maybe ur relative path is incorrect. to verify it you can put the url in your browser and fix it until the js file loads

Calling external .js from ASP.NET MVC

I'm JavaScript newbie. What I'd like to be able to do is to call a function from .js file sitting in ASP.NET MVC project's scripts folder.
The function is:
function myfunction() {
alert("HELLO");
}
...and it resides in file brfix.js
On a viewpage I call it like this:
<script src="../../Scripts/brfix.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
myfuntion();
});
</script>
But the code doesn't work. However, if I place js-code directly onto the viewpage, it works, like this:
<script type="text/javascript">
$(document).ready(function() {
alert("HELLO");
});
</script>
How to call a file-based js function? Could some JavaScript-Big-Kahuna help me out? =)
If that code is pasted directly from your source code, you have a typo so that'd be why it doesn't work!
your function is called myfunction(), but you're calling myfuntion()
you should enable js errors in your browser when developing. You don't say which browser you're using. For IE it's in Tools - Options - Advanced. Uncheck the "disable script debugging" options. In firefox I'd use something like FireBug as Dror says, if memory serves there are things that appear in the event of a javascript error. If you are still having problems I would try installing Fiddler2 (in IE) and building a request for the js file and see what comes back.
Another option would be to put a debugger; call just before you call your function, you should then be able to step through the javascript.
It may be that the reference to the external file is wrong:
<script src="../../Scripts/brfix.js" type="text/javascript"></script>
Make sure the reference is correct.
You can try by using view source to see the actual location ../../Scripts/brfix.js gets translated to in the final page.
You can also try with FireBug of FireFox.
If your mvc site is the root site in iis you can start the script src with a slash to get to the scripts. otherwise you can use an asp:ScriptManager to include the scripts
As other posters have mentioned, there is a typo. However...
Check out the Url.Content() method for referencing your site content. (images, scripts, etc...) Using ../.. isn't reliable, especially if you have varying levels of depth in your URLs or your application lives in a subdirectory.
Here's a helper I use in most of my projects, for example:
public static string Script(this HtmlHelper Html, string url)
{
UrlHelper Url = new UrlHelper(new RequestContext(Html.ViewContext.HttpContext, Html.ViewContext.RouteData));
string html = "<script type=\"text/javascript\" src=\"{0}\"></script>";
return string.Format(html, Url.Content(url));
}
And here it is being called:
<%= Html.Script("~/public/js/blah.js") %>
I had the same problem and it turned out that I had a few js files that weren't being found. If your MVC project structure is the default VS setup and your View page is in Home for example, then I think below will find the file:
<script src="../Scripts/brfix.js" type="text/javascript"></script>
But even if that one is found other js files not being found caused my $(document).ready not to work. Check your page in Firefox's Firebug, if a file isn't found you will see html markup with a message saying a resource could not be found, located underneath the offending reference. Once I resolved all the js references then my $(document).ready worked.
Strangely VS was telling me it couldn't find the js files when the references were correct, and wasn't flagging the problem when the references were incorrect.

Categories

Resources