Inserting a JavaScript resource into a Liferay Portlet - java

I would like to use jsTree inside of my Liferay portlet, but everytime the script gets executed I get an error:
TypeError: treeContainer.jstree is not a function # localhost:8080/web/guest/home:14
I understand that it doesn't have the JS file available for use, so I've tried these two approaches, but niether of them works.
First: Include it directly by adding
<script type="text/javascript" src="jquery.jstree.js"></script>
into the JSP. Although I can see it being "linked" in my IDE, after building and deploying it's unavailable (duh).
Second: Editing it in the liferay-portlet.xml like this:
<portlet>
<portlet-name>myPortlet</portlet-name>
<instanceable>false</instanceable>
<!-- other mappings here -->
<header-portlet-javascript>my/resource/folder/myPortlet/jquery.jstree.js
</header-portlet-javascript>
</portlet>
But even if I edit it in like this I get an 404 in the browser console.
Function used in the JSP:
<script type="text/javascript">
$(".tree-search").click(function(){
treeContainer = $(this).siblings('.tree-container');
// correct data is taken from ${jsonFake}
treeContainer.jstree({
"plugins":["themes","html_data","ui"], "json_data": { data: ${jsonFake}}
});
treeContainer.show();
treeContainer.animate({
opacity: "1"
}, 750);
});
</script>
What am I doing wrong, please?

This seems like path issue:
Create a folder named js inside docroot and put this file there.
Add script src like:
<script type='text/javascript' src='/js/jquery.jstree.js'></script>

add the js file in portal_normal.vm file in your current theme .like
<script type="text/javascript" src="jquery.jstree.js"></script>

Related

d3-wordcloud in GWT

I am trying to use d3-wordcloud(https://github.com/jasondavies/d3-cloud) in my GWT project. I included this in my .html file:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" language="javascript" src="d3.layout.cloud.js"></script>
<script type="text/javascript" language="javascript" src="main.js"></script>
Where 'main.js' has a method which contains this code:
d3.layout.cloud().size([width, height])
.timeInterval(20)
.words(word_entries)
.fontSize(function(d) { return xScale(+d.value); })
.text(function(d) { return d.key; })
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.on("end", draw)
.start();
When I try to call the method from the .html file, the word cloud is generated fine. But when I do it from a java file (with $wnd), I get this error:
Uncaught TypeError: d3.layout.cloud is not a function' error
I think this might be because the d3.layout.cloud.js is written in node js and GWT doesn't know how to work with it.
Is that the reason? Is there a workaround?
Additional info: I use GWT 2.7. Good with java. Zero node js skills!
Feels like you need to simply use cloud()... instead of d3.layout.cloud()...
See line 10: https://github.com/jasondavies/d3-cloud/blob/master/examples/node.js

Struts Action property can't be accessed from external javaScript

I am working on a project using struts2. In my Action class I have a String testString with setter/getter and I can access it
from my jsp file using ${testString}. Works fine.
Now I need to access it form javascript and tried an internal script inside my jsp file like this:
<script >
function testJs() {
alert("${testString}");
}
</script>
I used the testJs() method in an button onclick
<input type="button" value="click me " onclick="testJs()" >
This also works fine, means when i click the button is shows me the value of the string(Hello World) of my Action class in an alert.
But the problem is when i added this method in a external (test.js) file and added the .js file in jsp file like this
<script src="resource/js/test.js" ></script>
The alert message don't show the String value. its just show ${testString}
The method testJs() get and parse the String value from an internal script but cant from an external script!!!
Any possible reason or explanation for this.?
If any body want some additional information please let me know.
When you write EL(Expression Language) in your .jsp file, that .jsp file is parse by its JSP container and EL are processed. Consider the following code :
anyfile.jsp
<script type="text/javascript">
function testJs() {
alert("${testString}"); // JSP Container will replace '${testString}' with its value
}
</script>
JSP container did not processed any of the above code Except EL, and therefore only ${testingString} is replaced. I mean, container do not know about <script> or function testJs().
JSP container will only process the files with .jsp (or .jspx, or some other files) extension. In the above code your javascript was inside .jsp file.
But on the other hand, when you replaced above code with this -
<script src="resource/js/test.js" ></script>
Now the previous code is inside test.js file. But how container can know about that!
You are expecting JSP container to understand this code i.e. to understand that test.js is added as javascript in the .jsp file by using <script> element and src attribute. But it didn't.
Container actually not have to do anything with this code. And your code will be sent to client without any changes.
But if you stills want to use your javascript code to work from other file, you can use following code :
anyfile.jsp
<script type="text/javascript">
<jsp:include page="test.jsp" />
</script>
And
test.jsp
<%#page contentType="text/javascript" pageEncoding="UTF-8"%>
function go() {
alert("${testString}");
}

Java/Scala: understanding Play framework custom tag or helper

I've been using Play 2.0 framework for a couple of days now for a proof of concept application at my job. One of the first things I wanted to check out was the custom tag functionality, since it reminded me of HtmlHelpers in ASP.Net MVC. The thing is that I can't seem to make them work and was wondering if I'm misusing the feature or misunderstanding something.
Here's a simple example of what I want to do: I want to be able to use #script("scriptname.js") anywhere in the templates and have that subsitute the entire tags.
Here's what I got so far:
main.scala.html
#(title: String, scripts: Html = Html(""))(content: Html)
#import tags._
<!DOCTYPE html>
<html>
<head>
<!-- this is how I would like to use the helper/tag -->
#script("jquery.js")
#script("jquery-ui.js")
<!-- let views add their own scripts. this part is working OK -->
#scripts
</head>
<body>
#content
</body>
</html>
I created a subdirectory called "tags" under the app/views directory. There I created my script.scala.html tag/helper file:
#(name: String)
<script src="#routes.Assets.at("javascripts/#name")" type="text/javascript"></script>
The problem I'm having is that whenever I use #script() the output includes the #name parameter in it. For example #script("x.js") actually outputs
<script src="assets/javascripts/#name" type="text/javascript"></script>
What am I doing wrong?
For the record, I did read the documentation and search here, but neither of these links have helped me figure this out:
http://www.playframework.org/documentation/2.0.3/JavaTemplateUseCases
How to define a tag with Play 2.0?
#routes.Assets.at(...) evaluates the Scala expression routes.Assets.at(...) and substitutes the result into your output. There is no recursive evaluation that would allow you to have evaluate an expression textually to get that expression, which seems to be what you're expecting.
What you intend to do is achieved using
#routes.Assets.at("javascripts/" + name)

JSP not detecting the javascript file

From a servlet, I'm forwarding the request to a JSP page which renders a FusionChart.
But I've a problem in loading the chart. The JSP file is not detecting the JavaScript file. The folder structure is:
axis
|
WebContent
|
WEB-INF
|
classes
|_ com
|_FusionCharts.js
|_MyChartJsp.jsp
|_Line.swf
And the JSP code:
<html>
<head>
<script language="text/javascript" src="/WEB-INF/classes/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="left">The chart will appear within
this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var foo = //value fetched from DAO
var myChart = new FusionCharts("/WEB-INF/classes/Line.swf",
"myChartId", "1000", "500");
myChart
.setDataXML("<graph caption='aCaption' xAxisName='xAxis' yAxisName='yAxis' showNames='1' decimalPrecision='0' formatNumberScale='0'>"+foo+"</graph>");
myChart.render("chartdiv");
</script>
</body>
</html>
The Servlet code to forward the request:
final RequestDispatcher requestDispatcher = request.getRequestDispatcher("/WEB-INF/classes/MyChartJsp.jsp");
requestDispatcher.forward(request, response);
The request is getting forwarded to the JSP. But the chart is not getting displayed because it is unable to figure out what FusionCharts is in the line
var myChart = new FusionCharts("/WEB-INF/classes/Line.swf",
"myChartId", "1000", "500");
I tried
src="/FusionCharts.js"
src="FusionCharts.js"
but no luck.
Has it something to do with the request being forwarded??
You cannot have .js (or .swf, .jpg, etc.) files in WEB-INF - they are not publically accessible.
Move it to /js/
There is no reason to hide static resources (like scripts and css) in WEB-INF. If you insist on that, you should make a servlet that, given the name of the js/css, would read it from its location and will serve it as a response. This is what the default servlet does when you access static resources.
The flow of the page loading is as follows: the browser sends a request to the servlet; the servlet forwards internally to the JSP, and the JSP is rendered as a response; then the browser parses the <script> tag and fires another request to the script. If the script is not accessible via URL, it's not loaded.
Then, to make the script url fixed to the servlet context root, use
src="<c:url value="/js/script.js" />"
This will work regardless of what is the current url
Not the cause of your problem, but also note that your <script> element is incorrect. It should be <script type="text/javascript"....
(I tried to post this as a comment, but for some reason it wouldn't let me.)
I was facing same issue. In my case when I calling the myFile.jsp directly its reading the myFile.js;
But when calling through login-> myFile.jsp, its not reading the myFile.js;
After analyzing the path through the Developer tools :=> console, I found that its inserting the uri, so final path was incorrect.
Final Solution:
I'd used the absolute path for all .js and .css. Now its called from everywhere.
My Project Structure is:
In my servlet-context.xml
i) <context:component-scan base-package="com.SBP.SHWeb" />
ii) <resources mapping="/resources/**" location="/resources/" />
My old path for including .js was: /resources/MyJs/myfile.js ===> Its not get called sometimes.
My Absolute path, which get called from all places is like this:
/SHweb/resources/MyJs/myfile.js ==> Its get called from everywhere.
Hope it help you.

Uploadify and JSP/Java servlet

I just started working with Uploadify with our Java/JSP Applications and for that I use a servlet instead of the upload.php to do the upload to the server.
I was wondering if there is any servlet example ?? or anyone has additional info for those of us that use JSP instead of PHP?
I follow the example but it doesn't seem to do anything. i changed the script attribute to a JSP file and it doesn't get called.
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload1").fileUpload({
'uploader': 'mypath/uploader.swf',
'cancelImg': 'mypath/cancel.png',
'script': 'mypath/upload.php', // a jsp file???
'folder': 'files',
'multi' : false
});
});
</script>
You'd better be using commons file-upload. In the link provided there are details on how exactly to us it in a servlet of yours.

Categories

Resources