How to split javascript source code to independent file

[Hùng Trần, modificado hace 6 años.]

Hello everyone,

I want to split javascript source code to .js file, and import it into jsp page, but I could not call js function after broke it, I followed this guide from dev.liferay

My source code in jsp file like this:
<script>
define._amd = define.amd;
define.amd = false;
</script>

<script type="text/javascript" src="<%=request.getContextPath()%>/js/test1.js" />
<script>
define.amd = define._amd;
</script>

and tets1.js file like below:
<script type="text/javascript">
function ajaxCall(){
AUI().use('aui-io-request', function(A){
A.io.request('${testAjaxResourceUrl}', {
method: 'post',
data: {
<portlet:namespace />sampleParam: 'value2',
},
on: {
success: function() {
alert(this.get('responseData'));
}
}
});
});
}
</script>

Please suggest me how to deal with this.

Thank you and regards,

[Massimo Bevilacqua, modificado hace 6 años.]

Hi,

you can't use it

<portlet:namespace />sampleParam..

inside an external file because portlet:namespace is resolved inside jsp page

read this answere for clarification

https://web.liferay.com/it/community/forums/-/message_boards/message/94881870

[Hùng Trần, modificado hace 6 años.]

Hello Massimo,

Thank you very much for reply, but even I delete <portlet:namespace />sampleParam or delete data attribute in AJAX function, it is is not worked as I expected (cannot call javascript function), do you have any other ideal?

Thank you!

[Massimo Bevilacqua, modificado hace 6 años.]

When I added an external javascript file or I made some modify on it sometimes the browser doesn't take the changes.
Try to open the page with another browser or clean the cache(sometimes it is not enough for me, for example I use chrome and if I open firefox I can see the changes but in chrome not).

Did you declared your javascript file inside the portlet? In your component section you must declare:

"com.liferay.portlet.header-portlet-css=/css/style.css", 
"com.liferay.portlet.footer-portlet-javascript=/js/main.js",

In my case I have css and js folder inside "resources", the same folder where view.jsp is

[Hùng Trần, modificado hace 6 años.]

Hello Massimo,

Thank you very much but maybe I missed some configuration steps or something like that.

Best regards,

[Olaf Kock, modificado hace 6 años.]

The same goes for ${testAjaxResourceUrl}, this is also JSP content that won't be processed in a *.js file.

You'll need to pass those values in as parameters from the outside or process/load your JS code from a JSP. If you debug your application, you'll see that the browser tries to reach out to ${testAjaxResourceUrl} (literally), but obviously can't resolve a server with that name

[Hùng Trần, modificado hace 6 años.]

Hello Olaf,

Thank you for response, I tried with .js file like below but liferay could not load ajaxCall() function:

<script type="text/javascript">
function ajaxCall(){
alert("OK");
}
</script>
Can you check that is there any configuration step that I missed?

Thank you and regards,

[Olaf Kock, modificado hace 6 años.]

Can you check that is there any configuration step that I missed?

Is your JS file loaded by the browser? Check the browser's developer tools and watch out for that JS request, make sure that the code is loaded at all. Until then it's useless to change the code at all.

[Hùng Trần, modificado hace 6 años.]

Hello Olaf,

I am very sorry to reply you late, I was too busy with other tasks last week, I checked page loaded source code, I see as the below image but I could not find my implemented javascript function, I am new in web development so I am not sure that is it corrected. Please suggest me.

Best regards,

[Olaf Kock, modificado hace 6 años.]

What result do you get when you request /o/Ajax/js/test1.js ?

[Hùng Trần, modificado hace 6 años.]

Hello Olaf,

Thank you very much for your support, finally we solved it by include command like below:
<script type="text/javascript" charset="UTF-8">
<%@include file="/js/fileNam.js" %>
</script>

Thank you and best regards,
Hung Tran