Loading and running js and activate a trigger in Liferay 7 - javascript

I want to load a script and after executing this script launch a trigger. Formerly we did it with jquery and now we go to Alloyui. I'm trying to do this in Liferay 7 with AlloyUI. But I can't find the way, how can I do it?
jQuery.getScript("http://localhost:8082/js/test.js")
.done(function( script, textStatus ) {
work();
$(document).trigger('testEvent');
}
Thank you

Use aui:script to load modules within Liferay DXP (7.x).
The aui:script tag is a JSP tag that loads JavaScript in script tags on the page, while ensuring that certain resources are loaded before executing.
It tag supports the following options:
require: Requires an AMD module that will be loaded with the Liferay AMD Module Loader.
use: Uses an AlloyUI/YUI module that is loaded via the YUI loader.
position: The position the script tag is put on the page. Possible options are inline or auto.
sandbox: Whether to wrap the script tag in an anonymous function. If set to true, in addition to the wrapping, $ and _ are defined for jQuery and underscore.
Example: if you want to load the module foo and use its default function, you can use the following:
<aui:script require="path_to_foo_module as foo">
foo.default('', {
// Your code here;
});
</aui:script>
Here is the real application that is being used at official liferay portal: https://github.com/liferay/liferay-portal/blob/master/modules/apps/commerce/commerce-order-web/src/main/resources/META-INF/resources/commerce_order/general.jsp#L430-L437. Where it calls the JS module at here: https://github.com/liferay/liferay-portal/blob/master/modules/apps/commerce/commerce-frontend-js/src/main/resources/META-INF/resources/components/summary/Summary.js

Related

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
});

Use/install library inside nested iframes

I am trying to use the following library https://github.com/davidjbradshaw/iframe-resizer/ to resize an iFrame which is positioned inside an other iFrame.
What I tried is to:
copy the minified files of the library in a /assets/lib folder of my app.
add a link to the minified files of the library in the header of the first iFrame:
<script src="/assets/lib/iframeResizer.min.js"></script>
<script src="/assets/lib/iframeResizer.content.min.js"></script>
<script src="/assets/lib/index.js">
This last index.js file only exports the 2 previous files (using export and require). -> This creates an error export is not defined, and require is not defined.
Then, when I add an iFrame that needs to be resized, I use jQuery to insert the script that uses the library:
var script = '<script class="iframe-resizer">iFrameResize({checkOrigin: false}, ".content-card")</script>';
$('.fr-iframe').contents().find("body").append(script);
If I don't add the index.js file, I get the following message "iFrameResize is not defined"
Does anyone have an idea how I could find a workaround?
In fact, the library supports nested iframes.
Requesting the iFrameResizer using jQuery was the best solution I found.
Thanks to this I don't have to install the library manually in the header of the iframe, which simplifies the solution.

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.

Use external multi modal JavaScript

I would like to utilize the external multi modal Github script in meteor to run with bootstrap modals taken from a meteor bootstrap package I have installed on my app. There is no meteor package for this. I'm using the $.getScript() jQuery function to get the source JS file. It is set up like such:
Meteor.startup( function () {
$.getScript("https://cdn.rawgit.com/ngzhian/multi-step-modal/master/multi-step-modal.js");
});
Unfortunately when I include this, the file from the URL gets loaded but the modal functionality doesn't work. I believe that all the HTML is correct. Is there an alternative way to include third party libraries? Could the library possibly be broken?
Meteor.startup( function ()
{
$.getScript("https://cdn.rawgit.com/ngzhian/multi-step-modal/master/multi-step-modal.js",function()
{
// Here the script is loaded and you can use it's functions
});
});

How can I load a script in a JavascriptMVC controller

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(...);
});

Categories

Resources