We Keep Coding

Azure Functions CosmosDb Binding api keeps loading

First of all, the api works as intended locally, when deploying to azure functions app, the api endpoint keeps loading and it will eventually show HTTP.504(Gateway Timeout)
page keeps loading, no response from azure functions
Integration
I'm looking to fetch all data from the collection when I call HttpTrigger
Function.java
#FunctionName("get")
public HttpResponseMessage get(
#HttpTrigger(name = "req",
methods = {HttpMethod.GET, HttpMethod.POST},
authLevel = AuthorizationLevel.ANONYMOUS)
HttpRequestMessage<Optional<String>> request,
#CosmosDBInput(name = "database",
databaseName = "progMobile",
collectionName = "news",
partitionKey = "{Query.id}",
connectionStringSetting = "CosmosDBConnectionString")
Optional<String> item,
final ExecutionContext context) {
// Item list
context.getLogger().info("Parameters are: " + request.getQueryParameters());
context.getLogger().info("String from the database is " + (item.isPresent() ? item.get() : null));
// Convert and display
if (!item.isPresent()) {
return request.createResponseBuilder(HttpStatus.BAD_REQUEST)
.body("Document not found.")
.build();
}
else {
// return JSON from Cosmos. Alternatively, we can parse the JSON string
// and return an enriched JSON object.
return request.createResponseBuilder(HttpStatus.OK)
.header("Content-Type", "application/json")
.body(item.get())
.build();
}
}
Function.json
{
"scriptFile" : "../ProgMobileBackend-1.0-SNAPSHOT.jar",
"entryPoint" : "com.function.Function.get",
"bindings" : [ {
"type" : "httpTrigger",
"direction" : "in",
"name" : "req",
"methods" : [ "GET", "POST" ],
"authLevel" : "ANONYMOUS"
}, {
"type" : "cosmosDB",
"direction" : "in",
"name" : "database",
"databaseName" : "progMobile",
"partitionKey" : "{Query.id}",
"connectionStringSetting" : "CosmosDBConnectionString",
"collectionName" : "news"
}, {
"type" : "http",
"direction" : "out",
"name" : "$return"
} ]
}
Azure Functions monitor log does not show any error
Running the function in the portal(Code + Test menu) does not show any error either
httpTrigger I'm using: https://johnmiguel.azurewebsites.net/api/get?id=id
I added CosmosDBConnectionString value to Azure Functions App configuration(did not check on "Deployment slot" option)
I'm using an instance of CosmosDB for NoSQL
Functions App runtime is set to Java and version set to Java 8

figured it out. Java function was in Java 17 and Function App in Java 8.

Bryntum Calendar recurance Extjs with google icalendar

I'm using Extjs Bryntum Calendar to create events and want to save them as google ics file and load events again into Sch calendar.
Can any body tell how to convert from Cal.model.Event to ical events and vice versa?
data come from api as ical data.
my code IS:
resource store:
Ext.define('my.store.CalendarResource', {
extend: 'Cal.data.ResourceStore',
storeId: 'resource',
// proxy: 'memory',
model:'my.model.CalendarResource',
proxy: {
type: 'rest',
url: 'api/calendars/scheduler'
},
});
resource model:
Ext.define('my.model.CalendarResource', {
extend : 'Cal.model.Resource',
fields: [{
name: 'Id',
type:'string'
}, {
name: 'Name',
type: 'string'
}, {
name: 'Color',
type: 'string'
}, {
name: 'data'
}]
});
calendar view
Ext.define('my.view.RecurrenceCalendar', {
extend : 'Cal.panel.Calendar',
xtype : 'recurrencecalendar',
requires : [
'Sch.data.util.recurrence.Legend',
'my.store.CalendarEvent',
'my.store.CalendarResource'
],
date : new Date(),
eventStore : 'event',
resourceStore : 'resource',
// show the resource filter
resourceFilter : {
dock : 'right'
},
// Uncomment the below line to disable the recurring events feature
// recurringEvents : false,
initComponent : function () {
var me = this;
Ext.apply(me, {
eventRenderer : function (eventRecord, resourceRecord, tplData) {
var legend = '';
if (me.recurringEvents && eventRecord.getRecurrence()) {
legend = Sch.data.util.recurrence.Legend.getLegend(eventRecord.getRecurrence(), eventRecord.getStartDate());
}
return eventRecord.getName() + (legend ? ' | ' + legend : '');
},
beforeeventadd : function (me, eventRecord, resources, eOpts) {
var resourceStore = me.getResourceStore();
alert('aaaaaaa')
}
});
me.on('eventclick', function ( view, record, e ) {
var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);
me.editor.edit(record, el);
});
me.on('eventdbclick', function ( view, record, e ) {
var el = e.getTarget(me.getSchedulingView().eventSelector, 10, true);
me.editor.edit(record, el);
});
me.on('beforeeventadd',function(me, eventRecord, resources, eOpts){
alert('123')
});
Ext.getStore('resource').reload();
me.callParent(arguments);
},
onEventCreated : function (newEventRecord, resources) {
// Overridden to provide some default values
var resourceStore = this.getResourceStore();
if (!newEventRecord.getResourceId()) {
if (!Ext.isEmpty(resources)) {
newEventRecord.assign(resources);
} else if (resourceStore && resourceStore.getCount() > 0) {
newEventRecord.assign(resourceStore.first());
}
}
},
});
event store:
Ext.define('my.store.CalendarEvent', {
extend : 'Cal.data.EventStore',
storeId : 'event',
});

What have you done?
To save records as iCalendar file:
You can serialize records from store to format .ical format (https://www.ietf.org/rfc/rfc2445.txt).
To load file as events:
Ex. you can listen change in file input and decode .ical format to your model parameters.
You can use existing open source library like https://github.com/nwcell/ics.js

how to list the object in angular calling the java api with header and body?

I want to list the student details calling the java api which have below response. I want the values from data which will have multiple values.Below is the method i am calling in component.ts class.
ngOnInit() {
this.loading = true
this.httpService.get('/student').subscribe(
result => {
console.log('received results');
this.loading = false;
this.scouts = result;
},
error => {
console.log('failed');
this.loading = false;
}
``
This is the api response.
``
{
data: [
{
id: 101,
name: "John doe",
status: "enrolled",
}
],
errors: [ ],
warnings: [ ],
meta: { }
}
```
I tried to using this as html code but this won't work and in the component part i have called the httpservice with get request in ngOnInit part.
``
<tr *ngFor="let student of students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.status}}</td>
```
Please can you guide me how can i get the student details from data part and list it in front end. Thank you.

From Best practices:
Use url at the service level (since it's a constant used only inside the service)
Define a StudentResponce model so that you can your json response.
Define the Student model that will be a property of StudentReponse
then your component becomes
ngOnInit() {
this.loading = true;
this.httpService.getStudents().subscribe(
result => {
console.log('received results');
this.loading = false;
this.scouts = result.data;
/*or this.scouts = [...result.data] */
//warning = result.warning
//meta = result.meta
//errors = [...result.errors]
},
error => {
console.log('failed');
this.message = error.message;
this.loading = false;
});
}
and the service
const url = "http://replace_with_service_url";
#Injectable()
export class MyHttpService {
constructor(private client: HttpClient) {
}
getStudents(): Observable<StudentResponse>{
return this.client.get<StudentResponse>(url);
}
}
export class StudentResponse{
data: Student[];
warning: any;
errors: any[];
meta: any;
}
export class Student{
id: number;
name= "";
status: string /*or enum "enrolled"*/;
}
you can replace your service url in this code to test

Just change this assignment:
this.scouts = result;
to
this.scouts = result.data;

How can I call a method/function from other jsp to include in jstree in another jsp

I'm still new with jsTree, JavaScript and jQuery functions.
My problem is that I need to refresh the header so when I click certain nodes in jstree the header will be refreshed.
The jstree is located in applet.jsp and the function for refreshing the header is located in header.jsp.
How can I call the refresh method for refreshing inside jstree?
This is my jstree in applet.jsp:
var selected_folder = "folder_${user.defaultFolder}";
$(document).ready(function() {
jQuery("#folder_tree").jstree({
"xml_data" : {
"ajax" : {
"url" : "<%=request.getContextPath()%>" + "/ListFolder.action"
},
"xsl" : "nest"
},
"ui" : {
"initially_select" : [ "#folder_${user.defaultFolder}" ]
},
"types" : {
"types" : {
"leaf" : {
"icon" : {
"image" : "<%=request.getContextPath()%>/images/icons/leaf.jpg"
}
},
"share" : {
"icon" : {
"image" : "<%=request.getContextPath()%>/images/icons/share.jpg"
}
}
}
},
"themes" : {
"theme" : "msam"
},
"plugins" : [ "themes", "xml_data", "ui", "types" ]
});
jQuery("#folder_tree").bind('loaded.jstree', function() {
jQuery("#folder_tree").jstree('open_all');
});
jQuery("#folder_tree").bind("select_node.jstree", function(e, data) {
var haveContent = data.rslt.obj.attr("haveContent");
if (haveContent === 'false') {
return;
}
var id = data.rslt.obj.attr("id");
id = id.substring("folder_".length);
parent.content.location.href = "<%=request.getContextPath()%>"
+ "/home/Folder.action?folderID="
+ id;
//alert(data.inst.get_text(data.rslt.obj)); // NODE TEXT
$.ajax({
url : "<%=request.getContextPath()%>" + "/WebContent/home/header.jsp",
data :{folderId,id},
cache:false,
success : function(data){
setupTree(data); //put your logic to set tree inside a method called setupTree or whatever you want to call it.
}
});
});
jQuery("#folder_tree").bind("refresh.jstree", function (event, data) {
jQuery("#folder_tree").jstree("select_node", selected_folder);
});
});
var tree_select_node = function(id) {
selected_folder = "#folder_" + id;
jQuery("#folder_tree").jstree("deselect_all");
jQuery("#folder_tree").jstree("refresh");
}
And this is the method/function for refreshing the header in header.jsp:
function selectHeaderLink(selectedLinkID) {
var linkIDArray = new Array('homeLink', 'newFolderLink', 'settingsLink', 'reportsLink');
resetHeaderLinks(linkIDArray, 'tab_link');
if(linkIDArray.length > 0) {
for(var i=0;i<linkIDArray.length;i++) {
if(linkIDArray[i] == selectedLinkID) {
var myLink = document.getElementById(linkIDArray[i]);
var row = myLink.parentNode;
row.style.height = "28";
row.style.backgroundImage = 'url(../images/bg-topmenu.jpg)' ;
myLink.style.color = "white";
break;
} //--end: if-for-if
} //--end: for-if
} //--end: if
}
function windowOnload(){
selectHeaderLink('homeLink');
}
I already tried using an ajax request but I'm still confused where to put this ajax request.
Sorry for my bad English. I hope someone will help me with this problem.

i already find the answer
jQuery("#folder_tree").bind("select_node.jstree", function(e, data) {
var haveContent = data.rslt.obj.attr("haveContent");
if (haveContent === 'false') {
return;
}
selectHeaderLink('homeLink');
var id = data.rslt.obj.attr("id");
id = id.substring("folder_".length);
parent.content.location.href = "<%=request.getContextPath()%>"
+ "/home/Folder.action?folderID="
+ id;
//alert(data.inst.get_text(data.rslt.obj)); // NODE TEXT
});
i just put the function into the jquery n then remove the function to centralize js file..and its work..

JavaScript - how to display error message from backend system based on Spring MVC

I have a web application with HTML / jQuery which ic connected with AJAX / JSON to a backend system with Java EE / Spring MVC.
In the frontend, a Person can be created by fill in the form fields and then it is submitted and this jQuery code executed:
var person = $(this).serializeObject();
$.postJSON("add/", person, function(data) {
alert("Person with ID "+data.person.id+"' added successfully");
});
In the best case, the Person is created and I'll get a Person object and I can access the values with data.person.*.
Now I want to validate the data which is sent to the backend system and in a case of an error, I want to display in the first step an alert error message.
I did this in the backend system:
#RequestMapping(value="add/", method=RequestMethod.POST)
public #ResponseBody Map<String, ? extends Object> addPerson(#RequestBody Person p, HttpServletResponse response) {
Set<ConstraintViolation<Person>> failures = validator.validate(p);
if (!failures.isEmpty()) {
response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
return validationMessages(failures);
} else {
Person person = this.personService.addPerson(p);
return Collections.singletonMap("person", new SerialPerson(person.getId(), person.getName(), ...));
}
}
// internal helpers
private Map<String, String> validationMessages(Set<ConstraintViolation<Person>> failures) {
Map<String, String> failureMessages = new HashMap<String, String>();
for (ConstraintViolation<Person> failure : failures) {
failureMessages.put(failure.getPropertyPath().toString(), failure.getMessage());
System.out.println(failure.getPropertyPath().toString()+" - "+failure.getMessage());
}
return failureMessages;
}
My Person object is annotated, and I get the System.out.println(failure.getPropertyPath().toString()+" - "+failure.getMessage()); on the console, that for example, "name - must be between 1-30 chars"
But how can create an alert message in jQuery in the frontend system?
Thank you in advance for your help & Best Regards.
Update: Link to the Spring MVC AJAX example, where I found the validationMessages method. But there is also no solution how to get the error message.
SOLUTION:
I have to call:
jQuery.ajax({
'type': 'POST',
'url': "add/",
'contentType': 'application/json',
'data': JSON.stringify(person),
'dataType': 'json',
'success': function(data) {alert("success");},
'error': function(xhr) {alert(xhr.responseText);}
});

You can do something like this:
var person = $(this).serializeObject();
$.postJSON("add/", person, function(data) {
if(data.person) {
alert("Person with ID "+data.person.id+"' added successfully");
}
else {
var errors = "";
for(var key in data) if(data.hasOwnProperty(key)) {
errors += data[key] + "\n";
}
alert(errors);
}
});
You shouldn't need to send back a bad request either. Is this what you want?
UPDATE
You can use the code shown in Spring Source, but you'd have to use jQuery.ajax
jQuery.ajax({
type: 'POST',
url: "add/",
data: person,
dataType: "json",
success: function(data) {
alert("Person with ID "+data.person.id+"' added successfully");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var errorJSON = JSON.parse(XMLHttpRequest.responseText); //if this is JSON otherwise just alerting XMLHttpRequest.responseText will do
var errors = "";
for(var key in errorJSON) if(errorJSON.hasOwnProperty(key)) {
errors += errorJSON[key] + "\n";
}
alert(errors);
}
});