i want to display tree structure dynamically.i am using angularjs and directives but getting json object only.
popupview.js:
app.directive('treeview', function(TreeService,$http) {
return {
scope: {
griddata:'=',
},
restrict: 'AE',
replace: true,
templateUrl: 'app/partials/treeviewgrid.html',
compile: function(cElem, cAttrs) {
return {
pre:function(scope, iElement, iAttrs) {
},
post:function(scope, iElement, iAttrs) {
scope.roleList = scope.griddata;
controller.js:
(function(){
app.controller('myController', function($scope,$http,TreeService){
$scope.roleList =
[{"roleName":"okm:root","roledId":"okm:root","children":[{"roleName":"my","roledId":"my","children":[{"roleName":"self","roledId":"self","children":[{"roleName":"htmlmenu.html","roledId":"htmlmenu.html","children":[]}]},{"roleName":"100.pdf","roledId":"100.pdf","children":[]},{"roleName":"act.txt","roledId":"act.txt","children":[]}]},{"roleName":"test","roledId":"test","children":[{"roleName":"Administration guide.pdf","roledId":"Administration guide.pdf","children":[]},{"roleName":"Quick Install.pdf","roledId":"Quick Install.pdf","children":[]},{"roleName":"test.docx","roledId":"test.docx","children":[]}]}]}];
});
})();
}
};
}
};
});
tree.html:
<!DOCTYPE html>
<html ng-app="myapp">
<body ng-controller="myController">
<treeview griddata="roleList"></treeview>
</body>
</html>
from the above code the out put is:
[{"roleName":"okm:root","roledId":"okm:root","children":[{"roleName":"my","roledId":"my","children":[{"roleName":"self","roledId":"self","children":[{"roleName":"htmlmenu.html","roledId":"htmlmenu.html","children":[]}]},{"roleName":"100.pdf","roledId":"100.pdf","children":[]},{"roleName":"act.txt","roledId":"act.txt","children":[]}]},{"roleName":"test","roledId":"test","children":[{"roleName":"Administration guide.pdf","roledId":"Administration guide.pdf","children":[]},{"roleName":"Quick Install.pdf","roledId":"Quick Install.pdf","children":[]},{"roleName":"test.docx","roledId":"test.docx","children":[]}]}]}];
but expected out put is:
okm:
root
my
self
htmlmenu.html
100.pdf
act.txt.
so please provide suggestion for how to do this.
Thanks.
I propose to use some of existing components like this
https://github.com/eu81273/angular.treeview
example:
var myApp = angular.module('myApp', ['angularTreeview']);
http://jsfiddle.net/eu81273/8LWUc/
Related
Does Eclipse Orion WebIDE support JSP? I am trying to create a simple application and jsp files are not working.
index.html
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function getInput()
{
$.ajax({
type:"GET",
url: "./test.jsp",
success: function(success) {
console.log(success);
}
});
}
</script>
</head>
<body onload="getInput()">
test.jsp
<%#import="./javaMethod*"%>
<%javaMethod a = new javaMethod();
var value = a.initiate();
%>
<input type="hidden" id="test" value="<%=value%>">
javaMethod.java
public class javaMethod
{
public int initiate()
{
return 1;
}
}
This should add a hidden input field which will hold the value from the java method. However, it is not working and the jsp is just displaying as plain text.
This should add a hidden input field - no, this should log anything comes from test.jsp to the browser console. To add the output of the JSP to the body element, use $(document.body).append(success);.
I have the following Verticle class:
public class SendFileExample extends AbstractVerticle {
public void start(Future<Void> fut) throws Exception {
Router router = Router.router(vertx);
router.route("/hello").handler(StaticHandler.create("client"));
router.route("/hello").handler(routingContext -> {
HttpServerResponse response = routingContext.response();
System.out.println("Hello");
response.sendFile("client/index.html");
});
vertx.createHttpServer().requestHandler(router::accept).listen(3000,
result -> {
if (result.succeeded()) {
fut.complete();
} else {
fut.fail(result.cause());
}
}
);
}
}
My html file is:
<html>
<head>
<title> hello </title>
</heade>
<body>
<h1> Hello World </h1>
<button> Hello </button>
<script src="app.js"></script>
</body>
</html>
I used "StaticHandler.create..." in order to serve all static files inside client folder.
As you can understand, I want that once the server gets a GET request to "localhost:3000/hello", the client will get an HTML page, which will call app.js file.
Unfortunately, I can't do it. index.html is loaded and the browser can't load app.js.
It's important to note that index.html and app.js both are located exactly in the same path which is ${PROJECT_ROOT}/client.
The code, however, is located in:
${PROJECT_ROOT}/src/main/java/com/company.
You simply missed the star sign when you defined your static handler:
router.route("/hello*").handler(StaticHandler.create("client"));
Why don't you try something straight-forward like:
if (req.path().equals("/")) {
res.sendFile("client/index.html");
}else{
res.sendFile( "client" + req.path() );
}
I have a jsp file which is getting data from OSGi configuration in AEM, like below
<c:set var="myParam" value="${myConfig.myParam}" scope="request"/>
Now in my JS file, I am initalising my angular app like below:
var app = angular.module('myapp', []);
app.provider("$provider1", [function () {
// Default configuration
var config = {
key1: 'value'
};
return {
configure: function (params) {
angular.extend(config, params);
},
$get: ['$rootScope', function ($rootScope) {
return {
config: config
};
}]
};
}]);
app.config(['$authProvider', function($authProvider) {
$authProvider.configure({
key1: 'myCustomDataFromJSP'
})
}]);
How can I retrieve this myCustomDataFromJSP from my JSP file? In config phase we can't access scope.
Thanks
I would do it in next way:
Add your variable as a data attribute somewhere on your page, like this:
<div id="config" data-jspvar="${myParam}"> </div>
Now register a constant in your angularjs app
Like this:
app.constant('myCustomDataFromJSP', (function() {
// Define your variable
var myCustomDataFromJSP = ...; //you can use smth like this
//window.document.getElementById('config').dataset.jspvar
return myCustomDataFromJSP;
})());
Now you can inject this constant into your config block.
The above answer is good one, But it is good to have a hidden input there rather than a div in the DOM
<input type='hidden' id="config" data-jspvar="${myParam}"> </input >
app.constant('myCustomDataFromJSP', (function() {
var myCustomDataFromJSP = //get the value here
return myCustomDataFromJSP;
})());
I am using a java based adapter in worklight. I have a method which returns a string value. I am able to call the function and the result is going to success handler in the adapter, but i am not able to find out anything about the return value. I cant see the returned String anywhere in the response JSON. Can anyone help me with this?
Here is my response JSON:
{"status":200,"invocationContext":null,"invocationResult":{"responseID":"16","isSuccessful":true}}
I have seen the following example
http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/docs/Module_05_5_-_Using_Java_in_Adapters.pdf, when i do an "invoke Adapter Procedure" on the code sample, I am getting this result.
{ "isSuccessful": true, "result": -9 }
where result is the return value of the java method in the adapter.
But when i do the same thing for my app, i get the following
{ "isSuccessful": true }
Java-adapter.impl code
function getXML() { return {result:
com.worklight.javaCode.FileIOPlugin.getXML() }; }
Java class method
public class FileIOPlugin{
public static String getXML() {
return "SUCCESS";
}
}
function getXML()
{
var invocationData ={
adapter: 'JavaAdapter',
procedure: 'getXML'
};
WL.Client.invokeProcedure(invocationData,{
onSuccess: successHandler,
onFailure: failureHandler
)};
function successHandler(data) {alert(JSON.stringify(data));}
function failureHandler(data) {alert("Error to get data");}
The return needs to be an object.
I've tried to reproduce your problem in the recently released Worklight 6.0, and I see everything working fine, after a copy&paste of your code.
The only change I did was to add the empty parameters on the invocationData object used to invoke the adapter method.
This is my exact code:
FileIOPlugin.java (under server/conf, in a package com.worklight.javacode)
package com.worklight.javacode;
public class FileIOPlugin {
public static String getXML() {
return "SUCCESS";
}
}
JavaAdapter.xml (HTTP adapter definition, under adapters folder)
<?xml version="1.0" encoding="UTF-8"?>
<wl:adapter name="JavaAdapter"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:wl="http://www.worklight.com/integration"
xmlns:http="http://www.worklight.com/integration/http">
<displayName>JavaAdapter</displayName>
<description>JavaAdapter</description>
<connectivity>
<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
<protocol>http</protocol>
<domain>rss.cnn.com</domain>
<port>80</port>
<!-- Following properties used by adapter's key manager for choosing specific certificate from key store
<sslCertificateAlias></sslCertificateAlias>
<sslCertificatePassword></sslCertificatePassword>
-->
</connectionPolicy>
<loadConstraints maxConcurrentConnectionsPerNode="2" />
</connectivity>
<procedure name="getXML"/>
</wl:adapter>
JavaAdapter-impl.js (next to JavaAdapter.xml)
function getXML() {
return {
result : com.worklight.javacode.FileIOPlugin.getXML()
};
}
I called my app javaAdapterApp, hence these file names:
javaAdapterApp.js (under apps/javaAdapterApp/common/js)
function wlCommonInit(){
}
function getXML() {
var invocationData = {
adapter : 'JavaAdapter',
procedure : 'getXML',
parameters : []
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : successHandler,
onFailure : failureHandler
});
}
function successHandler(data) {
alert(JSON.stringify(data));
}
function failureHandler(data) {
alert("Error to get data");
}
And finally
javaAdapterApp.html (under apps/javaAdapterApp/common)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>javaAdapterApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/javaAdapterApp.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<button onClick="getXML()">GET XML</button>
<script src="js/initOptions.js"></script>
<script src="js/javaAdapterApp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I ran it in the test server, and the result of JSON.stringify(data) in the success handler looks like:
{"status":200,"invocationContext":null,"invocationResult":{"responseID":"9","result":"SUCCESS","isSuccessful":true}}
There is the "SUCCESS" String you are looking for in the invocationResult.result.
Hope this helps
Orlando
I'm trying to make a simple ajax call to a spring REST service I have setup.
My controller is defined as follows:
#Controller
public class SongPlayerController {
....
#RequestMapping(value = { "/ajax", "/ajax/" }, method = RequestMethod.GET)
#ResponseBody
public String ajax() {
return "New Song URL";
}
}
And then I have a simple html page with an ajax request:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function loadAjax() {
$.ajax({
type : "GET",
url : "http://localhost:8080/song-player/ajax",
data : "text",
success : function(response) {
$('#ajax').val(response);
},
error : function(e) {
alert('Error: ' + e);
}
});
}
function getAjax() {
$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
alert('Ajax data' + data);
});
}
</script>
</head>
<body>
<button type="button" onclick="loadAjax()">Ajax Call</button>
<div id="ajax">This will be an ajax call.</div>
</body>
</html>
But, neither using the $.ajax or $.getJSON are returning anything. When using the ajax call, I'm getting the error "Error: [object Object]".
However, I know that my controller is setup properly because I can hit my service and get a response by using the RESTClient Firefox add-on so I assume the problem is with how I'm handling the jQuery calls but this is my first attempt at using jQuery so I don't know what is wrong with it.
The string literal "New Song URL" is not valid JSON. Try returning this:
#Controller
public class SongPlayerController {
#RequestMapping(value = { "/ajax", "/ajax/" }, method = RequestMethod.GET)
#ResponseBody
public String ajax() {
return "{\"url\":\"New Song URL\"}";
}
}
Then access this value as follows:
function getAjax() {
$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
alert('Ajax data' + data.url);
});
}
You could use JSON-js's stringify() function as follows:
$.getJSON('http://localhost:8080/song-player/ajax', function(data) {
alert('Ajax data' + JSON.stringify(data));
});
$('#ajax').val(response);
wont work. this is a div. use
$('#ajax').text(response);
thats why loadAjax doesnt work. getAjax doesnt work because as others pointed out, your response is not valid json, so getJSON will not work.
In addition to what others have pointed out about malfomred json, it seems that my problem stemmed from trying to hit my service needed to be called with JSONP.
I ended up modifying the controller to follow this blog post for wrapping my responses with a callback parameter.
I also changed up my ajax call to expecte JSONP:
function loadAjax() {
$.ajax({
type : "GET",
url : "http://localhost:8080/song-player/ajax.json",
async : false,
dataType: "jsonp",
success : function(response) {
$('#ajax').text(response.streamUrl);
alert('Success: ' + response);
},
error : function(e) {
alert('Error: ' + e);
}
}).done(function(data) {
console.log(data);
console.log(data.streamUrl);
});
}
Thanks for all of the help.