Spring MVC 3 AJAX - java

I'm taking my first steps to explore Spring MVC 3 (annotation driven) and the JSON functionality that it supports.
1) In my JSP page I want to click a link that retrieves JSON
$("a[class=simple2]").click(function() {
$.getJSON("checkName.html", function(contacts) {
alert(contacts);
});
return false;
});
2) The method that gets called that should return the JSON
#RequestMapping(value = "/checkName")
public #ResponseBody Contact checkName() {
List<Contact> contacts = this.userService.retrieveAll();
return contacts.get(0);
}
When this return gets triggered the DispatcherServlet catches an exception:
org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation
After searching some I read that the Jackson jar (http://wiki.fasterxml.com/JacksonDownload
jackson-all-1.6.1.jar) needs to be added to the project (or server? I tried both)
Any ideas? Thanks!

It seems a fresh start this morning (and other posts here) already got the problem fixes!
I only have jackson-all-1.6.1.jar added now to my project and added to my dispatcher xml which seems all that was necessary...
But I'll quickly add another question then! :)
I'm having trouble accessing javascript files (and probably any other files aswell) in my project. From WEB-INF/jsp/home.jsp I wanne to call my javascript file in /WEB-INF/resources/jquery-1.4.3.js
my dispatcher is defined like:
< servlet-name>dispatcher< /servlet-name >
< url-pattern>/< /url-pattern>
and I've added
script type="text/javascript" src="/resources/jquery-1.4.3.js">
script type="text/javascript" src="/jquery-1.4.3.js">
script type="text/javascript" src="/WEB-INF/resources/jquery-1.4.3.js">
script type="text/javascript" src="SpringMVC/WEB-INF/resources/jquery-1.4.3.js">
< script type="text/javascript"
src="${pageContext.request.contextPath}/resources/jquery-1.4.3.js">< /script>
etc all do not seem to work.

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

Reading in text from a text file using java / jquery without a webserver

I have used the jQuery.Get() as well as the $.Get() methods to do this but this does not seem to work.
<head>
<script type="text/javascript" src="jquery-2.1.3.min.js" > </script>
<script language="javascript">
function Read()
{
alert("start");
jQuery.get('/spec.txt', function(result)
{
alert("get");
if (result == 1)
{
alert("1");
$("body").html("<p>Specials</p>");
document.getElementById("specials").innerHTML = "<H1>Specials</H1>";
}
else if(result == 0)
{
alert("2");
$("body").html("<p>No Specials</p>");
document.getElementById("specials").innerHTML = "<H1>No Specials</H1>";
}
});
}
</script>
</head>
<body>
<button onclick="Read()">Specials</button>
<div id="specials">
</div>
</body>
</html>
I want to have a text file in my webroot folder that will only contain the values of 1 or 0. This will be used to determine if there are specials or not (this text file will be altered from another page). The value of this text file is to be read into the webpage and that will determine the course of action the if statements are programmed to. I have attached the code I am currently using to do this but I can't seem to get the $.get() / jQuery.get() to execute. You will notice I am using the alert() method to check the steps through the code but it does not execute the alert("get") immediately after the jQuery.get().
I am not using a webserver which I am assuming is the issue. I am simply running the index.html off my hard disk in the webroot folder. The IF statements are to fire depending on the value of read in from the text file named spec.txt
Please bare in mind I am new to web coding with jQuery and Java but I'm adept at simple HTML / CSS coding. This is my first attempt at dynamic web content like this instead of a static site. The site will eventually be hosted on a webserver if that helps with your answer.
You can't make ajax requests from file:// protocol. It's a security restriction.
Files loaded with file:// are always considered as coming from different domains, you can't bypass this feature.
But... If you are using chrome and just want to test it locally to put in a webserver later, you can disable this feature by running chrome in a unsafe mode
path/to/chrome.exe --disable-web-security
If you are using firefox. You can type in your URL about:config an then go to
security.fileuri.strict_origin_policy -> false
It's ok for local testing only. Don't expect the users of your application to disable that as well or you will be creating a big security problem. Be aware you are disabling all browser security and it will be open for malicious program
Just install a simple web server and have fun!

Converting local JSP page into global web page without modifying the source code?

I have designed a product recommendation hub using Java and JavaScript in Eclipse. Basic functionality is, if the person enters the product name, it will retrieve the relevant product reviews from the local XAMPP database, perform sentiment analysis on it and dispalys whether the product is recommended or not based on the number of positive or negative sentiments. My questions:
Is it possible to convert this local JSP UI page into a globally accessible web page without modifying my java code?
If Yes, please guide me. If No, please justify to get a clear understanding.
Is it possible using Amazon AWS?
You could load the page via ajax/jquery.
In the target page, create a div tag that will be your placeholder:
<div id="myPlaceholder"></div>
and add some javascript like:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.get("/theurlofthecurrentpage?some=thing", function(data) {
$("#myPlaceholder").html(data);
});
});
</script>
If the JSP control does full postbacks, you may have to update it to handle it clientside. hopefully this helps.

Inserting a JavaScript resource into a Liferay Portlet

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>

Sitemesh custom javascript per page

I am using sitemesh for a spring based site. The problem is that I have some javascript that I want it to run on the onload event of only one specific page using jquery $(function() { ... }) and not on every page.
I have included the jquery.js in the bottom of my decorator, after the body. So, if I try to include a <script> tag in the body of my decorated page the script won't be executed because jquery will be loaded after that! I know that I could include the jquery.js in the header of my decorator so it will be before the custom script in the decorated page however I don't really like that solution since it will contain javascritp in the head of my page.
So I would like to have something like a placeholder in my sitemesh decorator in where the custom from my decorated page will be placed (as you can understand I come from the django world :p). Is this possible ? Do you propose anything else or should I just put my jquery.js in the header and be done with it ?
To answer my question, after some search I found the following solution:
I Added the following to the end of my decorator page (after including jquery.js)
<decorator:getProperty property="page.local_script"></decorator:getProperty>
I also added the following
<content tag="local_script">
<script>
$(function() {
alert("Starting");
});
</script>
</content>
The decorated result page contained the contents of the local_script tag exactly where I wanted them and everything worked fine :)
I don't know why this feature of sitemesh is not properly documented - using this you can have a great templating behaviour (like django).

Categories

Resources