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}");
}
Related
I have a JSP home page with a menu. I want that menu to be on multiple pages so I created a menu.jsp template. I imported, all static source code appears but the <c:forEach /> tag is not picking it up. When I print (just put it plainly in the html) out my ${allCategories} variable I get all the data correctly.
In a controller, I set model.addAttribute("allCategories", categoryService.getPrimaryCategories());
home.jsp where the categories were before is importing <jsp:include page="menu.jsp"/>
in menu.jsp I am unable to get <c:forEach items="${allCategories}" var="category"> to work but when I just put <p>${allCategories}</p> at the beginning of the file it shows stuff like [Category(id=1281, name=Bundles, image=https://images...
How do I get the data correctly in the sub-template so it works like directly on the page?
You could try using the JSP include directive. It is used to include a file during the translation phase. For example,
<%# include file = "menu.jsp" >
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>
I have two different divisions in a JSP page. One contains a menu of links, when clicked the div2 (id-content) loads different pages accordingly. I am doing something like -
<div id="menu">
<ul class="navbar">
<li><a name="login" href="Login.jsp" onclick="changeContent()">Login</a>
</li></div>
and in the script I have something as -
<script language="JavaScript">
function changeContent() {
document.getElementById('content').load('Login.jsp');
}
</script>
I also tried -
document.getElementById('content').innerHTML=
"<jsp:include page="Login.jsp">";
None of the ways worked. Please suggest how should I
Try jquery..
function changeContent() {
$('#content').load('Login.jsp');
}
The solution is to use Ajax, which will asynchronously retrieve your page content that can be pasted in with the innerHTML method. See my answer to a similar question of how an Ajax call works and some introductory links.
As to why your examples in your answer don't work, in the first case there is no load() method on an Element object (unless you've defined one yourself and not shown it). In the second example, as one of the question comments says, there is probably something causing a syntax error in the javascript.
As an FYI, when there is a syntax error in some javascript in a web page, the current expression being parsed and the rest of the <script></script> block will be ignored. Since this is inside a function declaration, that function will never get defined.
For instance, an embedded quote in the included page will end the string for the innerHTML assignment. Then the javascript parser will try to parse the remainder of the HTML causing a syntax error as the HTML will not be valid javascript.
We use jquery. Add a click event handler to the anchor elements. In the click handler call $('#content').load(your_url);. You might want to use the load(url, function() { ...}) version. More info here http://api.jquery.com/load/
Your initial page comes down from the server. It's displayed by the browser. When you click on a link (or a button) in the browser, you want to fill the second div with new HTML. This is is a perfect job for an AJAX request. What the AJAX object in the browser does, is to send a POST (or whatever) string to the server. And then the Ajax object receives the HTML response back from the server. And then you can display that response data which the AJAX object contains, anywhere you want.
Is this possible? I want to be able to pass java bean data into javascript objects, but I'd really prefer not to muck up my jsp pages with a bunch of inline script tags. I like to keep my javascript separate in external files, but how do you accomplish something like this without using inline js?
<script type="text/javascript">
var variableFromServer = '${someBean.someProperty}';
</script>
You can create a JSON file with all the data and either include it inline or fetch the JSON through Ajax - that way you don't clutter the markup with data. See http://json-taglib.sourceforge.net/ for an example of a JSP-JSON template.
I'm not sure if this is worth it but one alternative will be to set the desired value in an input filed with type="hidden" and get it's in js. But this will also pass this parameter in GET and POST request from the form.
You can either do what you're doing in the snippet (do you consider that "inline JS"?), create a div of JSON with data in it (exposed as a single string) and process it, pass JS files through the JSP process (or use a different templating system for dynamic JS pages), etc.
I'm not a huge fan of processing JS files through JSP; I'll often create an object containing all the info my JS needs in a <script> tag at the bottom of the body before including my real JS. It's kind of lazy, but it's straight-forward.
One option that I've used in the past is to configure the servlet container to run the JSP interpreter on *.js files. How to set this up will depend upon what server you are running.
Note that if you want to access any request attributes this way you will need to set them up as part of the request that fetches the JavaScript file(s) (i.e. you will have to have a servlet in front of your JavaScript...or as an alternative you can use an include directive to bring in the scripts instead of a <script src='...'> tag). Session attributes you can access without needing to have a custom servlet in front of your JavaScript files.
I'm a fan of doing it the simple and easy way, so I'd create a single script element that has a minimal number of JS variables set from Java - ideally a single JS variable that is set to an object with different properties for all the different bits of data you need to pass through. Your Java code basically just outputs JSON that will be interpreted as an object literal in the JS. Immediately after that include any external scripts - because they're included afterwards they can use the variables already created.
You can put the above in the head or at the end of the body. (Or in the middle, but that doesn't really make sense.)
<html>
<head>
</head>
<body>
<!-- actual HTML markup here -->
<script>
var variableFromServer = '${someBean.someProperty}',
objectFromServer = /* jsp to spit out JSON here as appropriate */ ;
</script>
<!-- external files included after the above will be able to access
those variables -->
<script src="external1.js" type="text/javascript"></script>
<script src="external2.js" type="text/javascript"></script>
<script src="etc.js" type="text/javascript"></script>
</body>
</html>
You certainly don't need "a bunch of inline script tags" - even if it doesn't make sense to put all the values in a single object at least create all the variables in a single script element, and then all of your other JS can be in an external file.
(Add namespacing as required.)
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.