I am very much impressed with handsontable functionality. I tried to implement this in Oracle ADF. This functionality working fine with .jsp file but the data is not rendering in .jspx file.
Can we integrate this handsontable functionality Oracle ADF framework? Could you please suggest how to achieve the same in ADF?
I have created the Adf application in Jdeveloper 11.1.1.7 version
I have created the .jspx file with the following code
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:resource type="javascript" source="jquery.min.js"/>
<af:resource type="javascript" source="jquery.handsontable.full.js"/>
<link href="jquery.handsontable.full.css" rel="stylesheet" type="text/css"/>
<div id="dataTable"/>
<af:resource type="javascript">
var data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
$("#dataTable").handsontable({
data: data,
minSpareRows: 1,
startRows: 6,
startCols: 8
});
</af:resource>
</af:form>
</af:document>
</f:view>
</jsp:root>
when I try run the .jspx file data is not rendering.
Please add a script tag.
<script>
var data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
$("#dataTable").handsontable({
data: data,
minSpareRows: 1,
startRows: 6,
startCols: 8
});
</script>
Related
I'm using mongo 3.6. I have a DB with a field named date of type Date, and I want to return all my documents ($find) between two specific dates.
The problem is that I have to compose these queries in Flutter/Dart, so I cannot use ISODATE() to parse my dates because (to my knowledge) there's no such function, although I do have tried .toIso8601String with no luck.
Everything I try leads to and empty response (no documents returned, but no error also).
Things that I've tried:
{"date": {"$gte": "2018-08-23T09:34:32.000Z"}}
{"date": {"$gte": [{ "$dateFromString": { "dateString": "$date" }}, "2018-08-23T09:34:32.000Z"]}}
{"date": {"$gte": {"$date":"2018-08-23T09:34:32.000Z"}}}
{"date": {"$gte": {"$date":"2018-08-23 09:34:32.000"}}}
And many more.
Please, does anyone know how to solve this?
Thanks in advance
You might using mongo_dart package and see its repository (specially the method testDateTime). Then you could do something as:
var collectionName = 'users';
var collection = db.collection(collectionName);
await collection.insertAll([
{ 'name': 'John', 'birthday_date': DateTime.utc(2018, 8, 23, 12, 00, 00) },
{ 'name': 'Alice', 'birthday_date': DateTime.utc(2018, 8, 23, 10, 43, 24) },
{ 'name': 'Jim', 'birthday_date': DateTime.utc(2018, 8, 23, 8, 30, 0) }
]);
var result = await collection
.find(where.gte('birthday_date', DateTime.utc(2018, 8, 23, 9, 34, 32)))
.toList();
<html>
<head>
<script src="../../../../Scripts/angular.min.js"></script>
<script src="../../../../Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="http://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body ng-app="myApp">
<div style="height:500px; width:800px" ng-controller="BarChartCtrl">
<h2>BarChart example</h2>
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</div>
<script>
var app=angular.module('myApp', ['chart.js']);
app.controller('BarChartCtrl', function ($scope) {
$scope.labels = ['2014','2015','2016'];
$scope.series = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
$scope.data = [
[65, 59, 80],
[28, 48, 40],
[30, 0, 0],
[44, 10, 0],
[50, 0, 40],
[66, 50, 0],
[70, 0, 0],
[88, 0, 70],
[90, 30, 0],
[10, 0, 60],
[11, 20, 0],
[12, 0, 90]
];
});
In the above code Y-axis values are Numbers and I want to change it to some string in arranged manner so that I can pass the "range" string from $scope.data
You can map your array to a desired string array, like this:
$scope.rangeArray = $scope.data.map(function(item) {
return {
Item.join(",") // join the nested array values to a string separated with a comma for example
}
});
Each item in the map function is a nested array in your data array. In our example you get a rangeArray with nested string arrays.
In AngularJs-Charts we can't able to change Y-axis Integer Values to String Values for Range but in other charts we can able to modify by just appending $ or any such kind of symbols.
I am building an application where it gets the data from facebook api and the graph is generated using the HighCharts.
The graph is generated successfuly, but the date i get is in the time stamp format. How can i convert it to the actual date format.
Here is the code:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
Data:
series: [{"data": [["2015-11-15T08:00:00+0000", 55], ["2015-11-16T08:00:00+0000", 45], ["2015-11-17T08:00:00+0000", 32], ["2015-11-18T08:00:00+0000", 54], ["2015-11-19T08:00:00+0000", 34], ["2015-11-20T08:00:00+0000", 1]], "name": "page_views"}, {"data": [["2015-11-15T08:00:00+0000", 23], ["2015-11-16T08:00:00+0000", 67], ["2015-11-17T08:00:00+0000", 54], ["2015-11-18T08:00:00+0000", 23], ["2015-11-19T08:00:00+0000", 64], ["2015-11-20T08:00:00+0000", 23]], "name": "page_stories"}, {"data": [["2015-11-15T08:00:00+0000", 23], ["2015-11-16T08:00:00+0000", 64], ["2015-11-17T08:00:00+0000", 34], ["2015-11-18T08:00:00+0000", 32], ["2015-11-19T08:00:00+0000", 43], ["2015-11-20T08:00:00+0000", 43]], "name": "page_fan_adds"}]
Here is the application in JSFiddle
I am not sure if we can fetch the date in any format from facebook API.
I had in the past converted the date in my code once i retrieve the same.
Below is what i had implemented with VB.NET.
DateVariable.ToString().Substring(0, 10)).ToString("dd MMM yyyy")
Hope this helps you.
" I'm new in angularjs "
1- Scenario Description:
- We are Making Something like Survey ,
- Many Questions , every Question contains many Answers ,
- The Questions and it's answers rendered automatically from database using angularjs
- When user finish the Survey just click Save to post selected choices to the server
2- The problem :
- Using "angularjs" How can i Collect the user choices in array or post the selected choices to the server.
Code : https://jsfiddle.net/6kxx2vLu/
Result Image
===================== angularjs And HTML =====================
<div ng-app="massApp" ng-controller="massCtrl">
<ul>
<li ng-repeat="question in Questions">
<h1>{{question.questionAR}}</h1>
<ul>
<li ng-repeat="answerChoice in question.answerChoices">
<div ng-if="answerChoice.answerChoiceTypeId == '1' ">
<label for="elmnt{{question.questionId}}">
{{answerChoice.answerChoiceAr}}
</label>
<input type="radio" name="elmnt{{question.questionId}}" value="{{answerChoice.answerChoiceId}}" />
</div>
</li>
</ul>
</li>
</ul>
<input ng-click="saveAnswers()" type="button" value="Save" />
</div>
<script type="text/javascript">
(function () {
//------
var moCdataForTest = [{
"questionId": 20,
"questionAR": "How you Know Our Services?",
"surveyId": 12,
"qyestionAnswersTypeId": 1,
"answerChoices": [
{
"answerChoiceId": 1,
"questionId": 20,
"answerChoiceAr": "From web or Google Serach",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 2,
"questionId": 20,
"answerChoiceAr": "From Frind",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 3,
"questionId": 20,
"answerChoiceAr": "Newspaper ads",
"answerChoiceTypeId": 1,
}
]
},
{
"questionId": 21,
"questionAR": "What is your satisfaction level?",
"surveyId": 12,
"qyestionAnswersTypeId": 1,
"answerChoices": [
{
"answerChoiceId": 4,
"questionId": 21,
"answerChoiceAr": "Good",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 5,
"questionId": 21,
"answerChoiceAr": "Very Good",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 6,
"questionId": 21,
"answerChoiceAr": "Excellent",
"answerChoiceTypeId": 1,
}
]
},
{
"questionId": 23,
"questionAR": "What is Visit Rate?",
"surveyId": 12,
"qyestionAnswersTypeId": 1,
"answerChoices": [
{
"answerChoiceId": 4,
"questionId": 23,
"answerChoiceAr": "1Star",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 5,
"questionId": 23,
"answerChoiceAr": "2Star",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 6,
"questionId": 23,
"answerChoiceAr": "3Star",
"answerChoiceTypeId": 1,
}
]
}]
//-------
var massApp = angular.module("massApp", []);
//-------
massApp.controller("massCtrl", function ($scope) {
$scope.Questions = moCdataForTest;
$scope.saveAnswers = function () {
alert('Data Saved');
}
});
//-------
})();
</script>
You just need to use ng-model.
I see you are using Angular 1.2. In this version ng-model does not support getter/setter feature so it cannot add/remove from array.
So, you'll need to change userAnswers to be an object instead of an array.
$scope.userAnswers = {};
Of course you can $watch the object to sync it to an array, or you can do it only on submit click for example.
This will allow you to set ng-model="userAnswers[question.questionId]", like:
<input type="radio"
ng-model="userAnswers[question.questionId]"
ng-value="answerChoice.answerChoiceId"
name="elmnt{{question.questionId}}" />
Working example:
https://jsfiddle.net/Meligy/6kxx2vLu/8/
See the shape of userAnswers just after the save button.
Also click on the save button and scroll to the end to see an example of converting it to an array.
Update:
You don't even need the name when you use ng-model. Angular will handle grouping the inputs for you based on similar ng-model. It wasn't working with the label anyway because Angular doesn't support interpolation (expressions) in the name of form controls.
The easiest way to get the label to work is to make it wrap the input as well, like:
<label>
{{answerChoice.answerChoiceAr}}
<input type="radio"
ng-model="userAnswers[question.questionId]"
ng-value="answerChoice.answerChoiceId" />
</label>
Example: https://jsfiddle.net/xqc284xt/
Another approach is to use ng-change. However in this case you'll need to check the array if it has an object with given question ID or not, to add or update based on that. I wouldn't bother, but comment if you want a code sample showing it.
You an use form input arrays <input name="foo[]" ... >
so in your case it will be something like this:
<input type="radio" name="answers[{{question.questionId}}]" value="{{answerChoice.answerChoiceId}}" />
I think, you wanna to handle the onclick event in the radio buttons to collect all selected answers for related questions,
<input type="radio" name="elmnt{{question.questionId}}" value="{{answerChoice.answerChoiceId}}" onclick="setValue(event)" />
and in js your code :
var answer= function(name,value){
this.name=name;
this.value=value;
};
var questionsAnswers=[];
function setValue(event){
var evSrc = event.target;
var arrLength = questionsAnswers.length;
questionsAnswers[arrLength]=new answer(evSrc.name,evSrc.value);
}
By trying this you get the selected answers and questions in this array questionsAnswers
So you can handle it in saveAnswers function , like that:
$scope.saveAnswers = function () {
for (var i = 0; i < questionsAnswers.length; i++) {
alert(questionsAnswers[i].name +' = ' +questionsAnswers[i].value);
}
}
wish this will help.
Try this one,
I changed data format which seems to be more logical.
you need to handle ng-click for radio input and set the appropriate option as I have set it in each question.
In save function I collected all questionIds and their respective selected answer in an array.
please see this fiddle, I created for you.
Hope it will help you!
simply you need a little changes in your code :
To use Radio button you need a model property of field to hold your choice value and to do that use the ng-model directive at the radio button which will be the same value in each group of radio buttons
The steps:
1- add new property to your array named AnswerNumber at the first level of your array out side the nested array answerChoices
var moCdataForTest = [{
"questionId": 20,
"questionAR": "How you Know Our Services?",
"surveyId": 12,
"qyestionAnswersTypeId": 1,
"AnswerNumber" :"",
"answerChoices": [
{
"answerChoiceId": 1,
"questionId": 20,
"answerChoiceAr": "From web or Google Serach",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 2,
"questionId": 20,
"answerChoiceAr": "From Frind",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 3,
"questionId": 20,
"answerChoiceAr": "Newspaper ads",
"answerChoiceTypeId": 1,
}
]
},
{
"questionId": 21,
"questionAR": "What is your satisfaction level?",
"surveyId": 12,
"qyestionAnswersTypeId": 1,
"AnswerNumber" :"",
"answerChoices": [
{
"answerChoiceId": 4,
"questionId": 21,
"answerChoiceAr": "Good",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 5,
"questionId": 21,
"answerChoiceAr": "Very Good",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 6,
"questionId": 21,
"answerChoiceAr": "Excellent",
"answerChoiceTypeId": 1,
}
]
},
{
"questionId": 23,
"questionAR": "What is Visit Rate?",
"surveyId": 12,
"qyestionAnswersTypeId": 1,
"AnswerNumber" :"",
"answerChoices": [
{
"answerChoiceId": 4,
"questionId": 23,
"answerChoiceAr": "1Star",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 5,
"questionId": 23,
"answerChoiceAr": "2Star",
"answerChoiceTypeId": 1,
},
{
"answerChoiceId": 6,
"questionId": 23,
"answerChoiceAr": "3Star",
"answerChoiceTypeId": 1,
}
]
}]
2- add the ng-model directive to the radio button and set it's value with the name of the new property AnswerNumber
<input type="radio" ng-value="answerChoice.answerChoiceId" name="elmnt{{question.questionId}}"
ng-model="question.AnswerNumber" />
3- finally at your scope function saveAnswers iterate over the the scope array variable Questions to display or add the answers to $scope.userAnswers variable
$scope.saveAnswers = function () {
var values = "";
for (i = 0; i < $scope.Questions.length; i++) {
values += $scope.Questions[i].AnswerNumber + "\n";
$scope.userAnswers[i] = $scope.Questions[i].AnswerNumber;
}
alert($scope.userAnswers);
//alert(values);
alert('Data Saved');
};
I already updated you online code with the answer
I've update your jsfiddle
https://jsfiddle.net/6kxx2vLu/7/
I've added ng-model to the input[radio] and bound it to the question.answer
<input type="radio" ng-value="answerChoice.answerChoiceId"
name="elmnt{{question.questionId}}" ng-model="question.answer" />
and on save I map the questions array like this
$scope.answers = $scope.Questions.map(function(q){return q.answer;});
When I tried to use the angular-chart framework I can see the series I've defined, but not the labels and data. I've included following three files to my index.html
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
These are the variables I define in my $scope
$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
[12, 13, 8, 4, 29],
[6, 12, 9, 8, 25]
];
And it only displays this:
What am I doing wrong?
EDIT: After further investigation I noticed that the graph is showing when I did a back -> forward when on the page. So by refreshing you lose the chart...
I can manage to draw the chart after refresh by deferring the scope variables like this:
setTimeout(function (){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}, 0);
This implies a timing issue, which I'm unable to resolve.
Is your chart in an element / hierarchy that is hidden / shown (like ng-show or a class that is swapped out, a bootstrap panel...)?
What seems to be happening is that Chart.js is getting the height of the canvas (when it is initializes by angular-chart, which in turn happens when the scope data is changed) as near 0.
For the same reason, a deferred variable change works - because whatever parent / style is causing the canvas to have a small height is now at it's full height.