I have a requirement and I am hoping Google Maps API will have a solution. I have never used Google Maps API - so I am very new to this.
On the website homepage there is a form, when a user comes, I want the following things to happen:
1) The city field should be populated with users city based on IP
2) There is a second field called store name - when the user starts typing the store name - I want to fetch all business listings with that name in that city and show it as a drop down from which the user can select the appropriate branch. There is no need for anything to be shown on the map.
Egs - If a user in houston starts typing McDonalds, the following business listings should start showing up
McDonalds, 12 Pearland Ave, Houston TX
McDonalds, 2600 Bary Area Blvd, Houston TX
McDonalds, 262 Clearlake Blvd, Houston TX
Also when we get the address for a business listing from Google API - do we get it as one String and we need to parse it or do we get it different fields Street Name, City, State, Zip code etc
Any information or examples will be really appreciated
Thanks
I don't think you want Google Maps. First of all the terms of use do not allow any use other than displaying things on a Google Map on a publicly accessible webpage, second, there is another Google API that does exactly what you need: the Client location API: http://code.google.com/apis/ajax/documentation/#ClientLocation
Concerning the "businesses": You're going to have to source that data from somewhere - I do not believe google has a service for that. Perhaps you could simply use the Google Search API and some logic to find only businesses (http://code.google.com/apis/ajaxsearch/)
EDIT: I for the businesses, perhaps you could take a look at this sample: http://code.google.com/apis/ajaxsearch/samples.html#local-search
updated: here is an example of using the google clientlocation api and localsearch using jsonp.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAALDWeTDQHOJCbCf0JnUqL8BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQA7AE8xB9MyWgHECPY2qimOp7BUQ"></script>
<script src="scripts/clientLocation.js" type="text/javascript"></script>
<script src="scripts/localSearch.js" type="text/javascript"></script>
<script type="text/javascript">
function $g(id) {
return document.getElementById(id);
}
function displayLocation(latitudeEl, longitudeEl, cityEl, regionEl, countryEl, country_codeEl) {
var cloc = new ClientLocation.Location(google.loader.ClientLocation);
if (latitudeEl) latitudeEl.innerHTML = cloc.latitude;
if (longitudeEl) longitudeEl.innerHTML = cloc.longitude;
if (cityEl) cityEl.innerHTML = cloc.address.city;
if (regionEl) regionEl.innerHTML = cloc.address.region;
if (country) country.innerHTML = cloc.address.country;
if (country_codeEl) country_codeEl.innerHTML = cloc.address.country_code;
}
function localSearch(term, callback, context) {
var cloc = new ClientLocation.Location(google.loader.ClientLocation);
var searchUrl = 'http://www.google.com/uds/GlocalSearch?callback=' + callback + '&context=' + context + '&hl=en&q=' + encodeURIComponent(term) + '&sll=' + cloc.latitude + ',' + cloc.longitude + '&key=ABQIAAAALDWeTDQHOJCbCf0JnUqL8BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQA7AE8xB9MyWgHECPY2qimOp7BUQ&v=1.0';
// http://jaybyjayfresh.com/2007/09/17/using-script-tags-to-do-remote-http-calls-in-javascript/
scriptLoaded = function() {
removeNode(newScript);
};
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload = scriptLoaded;
newScript.src = searchUrl;
headID.appendChild(newScript);
}
function search() {
var term = $g("txtSearch").value;
localSearch(term, "displayResults", "0");
}
function displayResults(context, results, status, details, unused) {
var titles = [];
for (var i = 0; i < results.results.length; i++) {
// this cast is not necessary, just here to illustrate
// vs intellisense and reduce coding errors.
var result = new LocalSearch.Result(results.results[i]);
titles.push(result.title);
}
$g("searchResults").innerHTML = titles.join("</br>");
}
function init() {
displayLocation($g("latitude"), $g("longitude"), $g("city"), $g("region"), $g("country"), $g("country_code"));
}
</script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<div>
latitude : <span id="latitude"></span>
<br />
longitude : <span id="longitude"></span>
<br />
city : <span id="city"></span>
<br />
region : <span id="region"></span>
<br />
country : <span id="country"></span>
<br />
country_code : <span id="country_code"></span>
<br />
</div>
<input type="text" id="txtSearch" /><input type="button" id="btnSearch" value="get results"
onclick="search();" /><br />
<div id="searchResults">
</div>
</form>
</body>
</html>
// <copyright file="clientLocation.js" company="Sky Sanders">
// This source is placed in the Public Domain.
// http://skysanders.net/subtext
// Attribution is appreciated.
// </copyright>
/*
object literal format for google.loader.clientlocation
{
"latitude": 33.324,
"longitude": -111.867,
"address": {
"city": "Chandler",
"region": "AZ",
"country": "USA",
"country_code": "US"
}
}
*/
var ClientLocation = {};
ClientLocation.Address = function() {
/// <field name="city" type="String" />
/// <field name="region" type="String" />
/// <field name="country" type="String" />
/// <field name="country_code" type="String" />
/// <returns type="ClientLocation.Address"/>
if (arguments.length > 0) {
this.city = arguments[0].city;
this.region = arguments[0].region;
this.country = arguments[0].country;
this.country_code = arguments[0].country_code;
return;
}
else {
this.city = "";
this.region = "";
this.country = "";
this.country_code = "";
}
}
ClientLocation.Location = function() {
/// <field name="latitude" type="Number" />
/// <field name="longitude" type="Number" />
/// <field name="address" type="ClientLocation.Address" />
if (arguments.length > 0) {
this.latitude = arguments[0].latitude;
this.longitude = arguments[0].longitude;
this.address = arguments[0].address;
}
else {
this.latitude = 0;
this.longitude = 0;
this.address = undefined;
}
}
// <copyright file="localSearc.js" company="Sky Sanders">
// This source is placed in the Public Domain.
// http://skysanders.net/subtext
// Attribution is appreciated.
// </copyright>
/*
GlocalSearch result
{
"GsearchResultClass": "GlocalSearch",
"viewportmode": "computed",
"listingType": "local",
"lat": "33.389689",
"lng": "-111.853909",
"accuracy": "8",
"title": "Best \u003cb\u003eBuy\u003c/b\u003e",
"titleNoFormatting": "Best Buy",
"ddUrl": "http://www.google.com/maps....",
"ddUrlToHere": "http://www.google.com/maps?....",
"ddUrlFromHere": "http://www.google.com/maps?....",
"streetAddress": "1337 South Alma School Road",
"city": "Mesa",
"region": "AZ",
"country": "United States",
"staticMapUrl": "http://mt.google.com/mapdata?....",
"url": "http://www.google.com/maps/place?source....",
"content": "",
"maxAge": 604800,
"phoneNumbers": [{
"type": "",
"number": "(480) 644-7139"
},
{
"type": "",
"number": "(480) 464-0444"
}],
"addressLines": ["1337 South Alma School Road", "Mesa, AZ"]
}
*/
var LocalSearch = {};
LocalSearch.PhoneNumber = function() {
/// <field name="type" type="String"/>
/// <field name="number" type="String"/>
/// <returns type="LocalSearch.PhoneNumber"/>
if (arguments.length > 0) {
this.type = arguments[0].type;
this.number = arguments[0].number;
}
else {
this.type = "";
this.number = "";
}
}
LocalSearch.Result = function() {
/// <field name="GsearchResultClass" type="String"/>
/// <field name="viewportmode" type="String"/>
/// <field name="listingType" type="String"/>
/// <field name="lat" type="String"/>
/// <field name="lng" type="String"/>
/// <field name="accuracy" type="String"/>
/// <field name="title" type="String"/>
/// <field name="titleNoFormatting" type="String"/>
/// <field name="ddUrl" type="String"/>
/// <field name="ddUrlToHere" type="String"/>
/// <field name="ddUrlFromHere" type="String"/>
/// <field name="streetAddress" type="String"/>
/// <field name="city" type="String"/>
/// <field name="region" type="String"/>
/// <field name="country" type="String"/>
/// <field name="staticMapUrl" type="String"/>
/// <field name="url" type="String"/>
/// <field name="content" type="String"/>
/// <field name="maxAge" type="Number"/>
/// <field name="phoneNumbers" type="Array"/>
/// <field name="addressLines" type="Array"/>
// <returns type="LocalSearch.Result"/>
if (arguments.length > 0) {
this.GsearchResultClass = arguments[0].GsearchResultClass;
this.viewportmode = arguments[0].viewportmode;
this.listingType = arguments[0].listingType;
this.lat = arguments[0].lat;
this.lng = arguments[0].lng;
this.accuracy = arguments[0].accuracy;
this.title = arguments[0].title;
this.titleNoFormatting = arguments[0].titleNoFormatting;
this.ddUrl = arguments[0].ddUrl;
this.ddUrlToHere = arguments[0].ddUrlToHere;
this.ddUrlFromHere = arguments[0].ddUrlFromHere;
this.streetAddress = arguments[0].streetAddress;
this.city = arguments[0].city;
this.region = arguments[0].region;
this.country = arguments[0].country;
this.staticMapUrl = arguments[0].staticMapUrl;
this.url = arguments[0].url;
this.content = arguments[0].content;
this.maxAge = arguments[0].maxAge;
this.phoneNumbers = arguments[0].phoneNumbers;
this.addressLines = arguments[0].addressLines;
}
else {
this.GsearchResultClass = "";
this.viewportmode = "";
this.listingType = "";
this.lat = "";
this.lng = "";
this.accuracy = "";
this.title = "";
this.titleNoFormatting = "";
this.ddUrl = "";
this.ddUrlToHere = "";
this.ddUrlFromHere = "";
this.streetAddress = "";
this.city = "";
this.region = "";
this.country = "";
this.staticMapUrl = "";
this.url = "";
this.content = "";
this.maxAge = 0;
this.phoneNumbers = [];
this.addressLines = [];
}
}
If you're only looking up restaurants, try using Yelp's API. You can search for a business by its name within a search radius. Their API is also simpler and easier to use than google's.
http://www.yelp.com/developers/documentation/search_api
Related
I have a web application that is supposed to send verification emails to users upon signing up. I am using email templates that reside in a folder(EmailTemplate) under the root directory like so.
The problem is when I deploy the release on Google Cloud Platform I get this error when signing up
The templates are working fine in localhost debug testing but not in cloud testing.
.csproj file
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
<UserSecretsId>removed intentionally</UserSecretsId>
</PropertyGroup>
<ItemGroup>
<None Include="app.yaml" CopyToOutputDirectory="Always" />
</ItemGroup>
<ItemGroup>
<Compile Remove="Repos\**" />
<Content Remove="Repos\**" />
<EmbeddedResource Remove="Repos\**" />
<None Remove="Repos\**" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.21" />
<PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="3.1.21" />
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.21" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="3.1.21">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.Extensions.Http.Polly" Version="3.1.15" />
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.5" />
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.5" />
</ItemGroup>
</Project>
Email service that is using the templates
public class EmailService : IEmailService
{
private const string templatePath = #"EmailTemplate/{0}.html";
private readonly SMTPConfigModel _smtpConfig;
public EmailService(IOptions<SMTPConfigModel> smtpConfig)
{
_smtpConfig = smtpConfig.Value;
}
public async Task SendTestEmail(EmailDataModel testEmailModel)
{
testEmailModel.Subject = FillPlaceholders("Hello {{UserName}} this test subject", testEmailModel.PlaceHolders);
testEmailModel.Body = FillPlaceholders(EmailBodyTemplateGetter("TestEmail"), testEmailModel.PlaceHolders);
await SendEmail(testEmailModel);
}
public async Task SendVerificationEmail(EmailDataModel emailVerifyModel)
{
emailVerifyModel.Subject = FillPlaceholders("Please verify your email", emailVerifyModel.PlaceHolders);
emailVerifyModel.Body = FillPlaceholders(EmailBodyTemplateGetter("EmailVerification"), emailVerifyModel.PlaceHolders);
await SendEmail(emailVerifyModel);
}
private async Task SendEmail(EmailDataModel email)
{
MailMessage mail = new MailMessage
{
Subject = email.Subject,
Body = email.Body,
From = new MailAddress(_smtpConfig.SenderAddress, _smtpConfig.SenderDisplayName),
IsBodyHtml = _smtpConfig.IsBodyHTML
};
foreach (var item in email.ToEmails)
mail.To.Add(item);
NetworkCredential networkCredential = new NetworkCredential(_smtpConfig.UserName, _smtpConfig.Password);
SmtpClient smtpClient = new SmtpClient
{
Host = _smtpConfig.Host,
Port = _smtpConfig.Port,
EnableSsl = _smtpConfig.EnableSSL,
UseDefaultCredentials = _smtpConfig.UseDefaultCredentials,
Credentials = networkCredential
};
mail.BodyEncoding = Encoding.Default;
await smtpClient.SendMailAsync(mail);
}
private string EmailBodyTemplateGetter(string templateName)
{
=========> string filepath = string.Format(templatePath, templateName); <==========
var body = File.ReadAllText(filepath);
return body;
}
private string FillPlaceholders(string text, List<KeyValuePair<string, string>> keyValuePairs)
{
if (!string.IsNullOrEmpty(text) && keyValuePairs != null)
foreach (var placeholder in keyValuePairs)
if (text.Contains(placeholder.Key))
text = text.Replace(placeholder.Key, placeholder.Value);
return text;
}
}
Calling method in class Register.cs
public async Task<IActionResult> OnPostAsync(string returnUrl = null)
{
returnUrl = returnUrl ?? Url.Content("~/");
ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();
if (ModelState.IsValid)
{
var user = new PtUser { UserName = Input.Email, Email = Input.Email, FirstName = Input.FirstName, LastName = Input.LastName };
var result = await _userManager.CreateAsync(user, Input.Password);
if (result.Succeeded)
{
_logger.LogInformation("User created a new account with password.");
var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
code = WebEncoders.Base64UrlEncode(Encoding.UTF8.GetBytes(code));
var callbackUrl = Url.Page(
"/Account/ConfirmEmail",
pageHandler: null,
values: new { area = "Identity", userId = user.Id, code = code, returnUrl = returnUrl },
protocol: Request.Scheme);
EmailDataModel emailDataModel = new EmailDataModel()
{
ToEmails = new List<string>() { Input.Email },
PlaceHolders = new List<KeyValuePair<string, string>>()
{
new KeyValuePair<string, string>("{{UserName}}", user.FirstName),
new KeyValuePair<string, string>("{{Link}}", callbackUrl)
}
};
=======> await _emailService.SendVerificationEmail(emailDataModel); <============
if (_userManager.Options.SignIn.RequireConfirmedAccount)
{
return RedirectToPage("RegisterConfirmation", new { email = Input.Email, returnUrl = returnUrl });
}
else
{
await _signInManager.SignInAsync(user, isPersistent: false);
return LocalRedirect(returnUrl);
}
}
foreach (var error in result.Errors)
{
ModelState.AddModelError(string.Empty, error.Description);
}
}
// If we got this far, something failed, redisplay form
return Page();
}
As per asp.net core 3.1 static files are accessible via a path relative to the web root. So any files outside of the wwwroot cannot be accessed in production. In that case you have to move your EmailTemplate folder inside the wwwroot as you can see the picture below:
And then in Startup.Configure you have to add reference of this
middleware app.UseStaticFiles(); while you would browse the directory you have to modify code like this way
Note: In that case your path would be like
wwwroot/EmailTemplate/EmailTemplate.html and your code should be like
: private const string templatePath = #"wwwroot/EmailTemplate/{0}.html";
Hope above steps guided you accordingly.
i have a soap response with this format
<soap:Envelope xmlns:soap="somelink">
<soap:Body>
<ns1:queryDataResponse xmlns:ns1="somelink">
<WindowTabData NumRows="3" TotalRows="3" StartRow="0" xmlns="somelink">
<DataSet>
<DataRow>
<field column="Value">
<val>JoeBlock</val>
</field>
<field column="Name">
<val>Joe Block</val>
</field>
</DataRow>
<DataRow>
<field column="Value">
<val>GardenUser</val>
</field>
<field column="Name">
<val>GardenUser BP</val>
</field>
</DataRow>
<DataRow>
<field column="Value">
<val>SeedFarm</val>
</field>
<field column="Name">
<val>Seed Farm Inc.</val>
</field>
</DataRow>
</DataSet>
<RowCount>3</RowCount>
<Success>true</Success>
</WindowTabData>
</ns1:queryDataResponse>
</soap:Body>
</soap:Envelope>
and i need to parse it into json with something like
[
{"value": "JoeBlock", "Name":"Joe Block"},
{"Value": "GardenUser", "Name": "GardenUser BP"},
{"Value": "SeedFarm", "Name": "Seed Farm Inc."},
...
]
anyone can give me an example to parse it?
i tried using domparser like
let parser = new DOMParser()
let doc = parser.parseFromString(xmls, 'application/xml')
doc.querySelectorAll('DataRow').forEach(cap => {
console.log('parser', cap.textContent)
})
but all i got was
["JoeBlockJoe Block", "GardenUserGardenUser BP", "SeedFarmSeed Farm Inc."]
please help how to extract field column as key and separate the value
this is what i ended up doing
xmlparser(xmls) {
let convert = require('xml-js')
let parser = new DOMParser()
let doc = parser.parseFromString(xmls, 'application/xml')
let x = doc.getElementsByTagName('DataSet')
let out = convert.xml2json(x[0].outerHTML, {
compact: true,
spaces: 4
})
let outp = JSON.parse(out)
this.CreateJson(outp.DataSet.DataRow)
},
CreateJson(data) {
let json = []
for (let i = 0; i < data.length; i++) {
let array = {}
for (let j = 0; j < data[i].field.length; j++) {
array[data[i].field[j]._attributes.column] =
data[i].field[j].val._text
}
json[i] = array
}
console.log('json created : ', JSON.stringify(json, null, 4))
}
not that elegant solution yeah, so im open to suggestion to make it more elegant
Have problem to read data from json. My login.json file
{
"Users": [
{
"login" : "admin",
"password" : "admin"
}
]
}
Here is my login.xml.view
<core:View
controllerName="sap.ui.demo.myFiori.view.login"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core" >
<Page
title="{i18n>LoginIn}">
<VBox
class="marginBoxContent" >
<items>
<Label text="User" />
<Input
id="nameInput"
type="Text"
placeholder="..." />
<Label text="password" />
<Input
id="passwInput"
type="Password"
placeholder=" ..." />
<Text id="description" class="marginOnlyTop" />
<Button text="Login" press="handleContinue" />
</items>
</VBox>
</Page>
</core:View>
and login.controller.js
jQuery.sap.require("sap.ui.demo.myFiori.util.Formatter");
sap.ui.controller("sap.ui.demo.myFiori.view.login", {
handleContinue : function (evt) {
var name = this.getView().byId("nameInput").getValue();
var paswd = this.getView().byId("passwInput").getValue();
if (name == "log" && paswd == "pass") {
var context = evt.getSource().getBindingContext();
this.nav.to("Master", context);
}
else {
jQuery.sap.require("sap.m.MessageToast");
sap.m.MessageToast.show("Wrong login");
}
}
});
This login screen works, but I can't get login and password from json file and currently these data are taken from if sentence, which is not good. Any suggestions?
First, I am assuming that this is just a test app, as having the correct plain text auth credentials actually in the client app is rather bad practice ...
The crux of your question seems to be: "How can I access JSON data from a file?"
There is a Q&A already on SO with that theme: How to get data from a json file? but if you want to use a model, which is a common practice in UI5 apps, then you could:
1) Create a JSON model, specifying the name of the JSON file; the JSONModel mechanism will take care of the loading; assign this to the view
this.getView().setModel(new sap.ui.model.json.JSONModel('login.json'), "login");
2) Access the data in the JSON model when you need to check, using the getData() method
// Note - extremely bad practice - don't do this for real!
var authinfo = this.getView().getModel("login").getData().Users[0];
if (name == authinfo.login && paswd == authinfo.password) {
....
(I'm indexing 0 of Users as you seem to have your authinfo inside an array)
Maybe I defined something wrong before but now it works. I changed login.controller.js. Now it looks like this:
jQuery.sap.require("sap.ui.demo.myFiori.util.Formatter");
sap.ui.controller("sap.ui.demo.myFiori.view.login", {
onInit: function () {
var oModels = new sap.ui.model.json.JSONModel("login.json");
sap.ui.getCore().setModel(oModels);
},
handleContinue : function (evt) {
var authinfo = this.getView().getModel().getData().Users[0];
var name = this.getView().byId("nameInput").getValue();
var paswd = this.getView().byId("passwInput").getValue();
if (name == authinfo.login && paswd == authinfo.passw) {
var context = evt.getSource().getBindingContext();
this.nav.to("Master", context);
}
else {
jQuery.sap.require("sap.m.MessageToast");
sap.m.MessageToast.show("Wrong login");
}
}
});
Hi I've been strugling with this for hours, I want to send my POJO in JSON format using Primefaces Request Context to a Highchart inside my JSF to update its value.
Basically I am following this solution of #Bhesh Gurung from his own stackoverflow question
but I cant seem to make it work. Right now it is throwing a:
Cannot find component with identifier "pieData" referenced from "j_idt31".
I want to sucessfully create a highchart using the JSON data through the Primefaces Request Context. Please help Thanks in advance.
This are my codes below
#ManagedBean
#ViewScoped
public class PieDataProvider {
public void retrievePieData() {
List<String> categories = new ArrayList<String>();
categories.add("Electronic");
categories.add("Food");
categories.add("Liguor");
categories.add("Stationary");
categories.add("Mechanical");
List<Integer> itemCounts = new ArrayList<Integer>();
itemCounts.add(5);
itemCounts.add(20);
itemCounts.add(1);
itemCounts.add(50);
itemCounts.add(10);
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("categories", new Gson().toJson(categories));
reqCtx.addCallbackParam("itemCounts", new Gson().toJson(itemCounts));
System.out.println(categories);
}
}
My xhtml page5.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<h:head>
<script type="text/javascript">
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
src="http://code.highcharts.com/highcharts.js"
src="http://code.highcharts.com/modules/exporting.js"
</script>
<script type="text/javascript">
function feedPieData(xhr, status, args) {
var categories = eval('(' + args.categories + ')');
var itemCounts = eval('(' + args.itemCounts + ')');
options.xAxis.categories = categories;
var series = {
data : []
};
series.name = new Date().toString();
series.data = itemCounts;
options.series = [ series ];
chart = new Highcharts.Chart(options);
}
</script>
</h:head>
<h:body>
<p:commandLink action="#{pieDataProvider.retrievePieData}"
oncomplete="feedPieData(xhr, status, args);" value="Pie chart demo"
update="pieData" />
</h:body>
</ui:define>
<ui:define name="footer">
<h2>This is page5 Footer</h2>
</ui:define>
</ui:composition>
UPDATE: MODIFIED XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:body>
<ui:composition template="/template/common/commonLayout.xhtml">
<ui:define name="content">
<h:head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#container')
.highcharts(
{
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : 'Most used words, 2010'
},
tooltip : {
pointFormat : '{series.name}: {point.percentage}',
percentageDecimals : 1
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
formatter : function() {
return '<b>'
+ this.point.name
+ '</b>: '
+ this.percentage
//+ ' %'
;
}
}
}
},
series : [ {
type : 'pie',
name : 'Browser share',
data : [ [ 'Red', 45.0 ],
[ 'Orange', 26.8 ], {
name : 'Yellow',
y : 12.8,
sliced : true,
selected : true
}, [ 'Green', 8.5 ],
[ 'Blue', 6.2 ],
[ 'Violet', 0.7 ] ]
} ]
});
});
</script>
<script type="text/javascript">
function feedPieData(xhr, status, args) {
var categories = JSON.parse(args.categories);
var itemCounts = JSON.parse(args.itemCounts);
var series = {
data : []
};
options.series[0].data.length = 0;
series.data = categories;
series.data = itemCounts;
options.series = [ series ];
chart = new Highcharts.Chart(options);
}
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</h:head>
<h:body>
<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<h:form>
<p:commandLink action="#{pieDataProvider.retrievePieData}"
oncomplete="feedPieData(xhr, status, args);"
value="Pie chart demo" />
</h:form>
</h:body>
</ui:define>
<ui:define name="footer">
<h2>This is page5 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
You seem to fail to understand that Highcharts is a JavasScript environment that runs solely on the client, while PrimeFaces/JSF is on the server side and they act in this context simply as HTML, CSS and JavaScript code generator.
In your particular case, PrimeFaces is simply used to send data from the server to the client via RequestContext. After AJAX call completes and effectively, serialized data is received by the client, you call a JavaScript function that creates a Highcharts JS component entirely on the client from the received data.
All in all, it yields us with the following setup.
** The view elements **
<h:form>
<p:commandLink action="#{pieDataProvider.retrievePieData}"
oncomplete="feedPieData(xhr, status, args);"
value="Generate pie chart" />
</h:form>
** The JavaScript **
<script type="text/javascript">
function feedPieData(xhr, status, args) {
var categories = JSON.parse(args.categories);//serialized data from server
var itemCounts = JSON.parse(args.itemCounts);//serialized data from server
//next you create the chart and show it
}
</script>
** The action method **
public void retrievePieData() {
List<String> categories = generateCategories();
List<Integer> itemCounts = generateItems();
RequestContext reqCtx = RequestContext.getCurrentInstance();
reqCtx.addCallbackParam("categories", new Gson().toJson(categories));//additional serialized data to be sent
reqCtx.addCallbackParam("itemCounts", new Gson().toJson(itemCounts));//additional serialized data to be sent
}
Hy, I'm stuck with this error message and I can not find an solution.
I get this message error in the Knockout JavaScript library v2.2.0:
Unhandled exception at line 1053, column 5 in
localhost:port/Scripts/knockout-2.2.0.debug.js 0x800a138f -
Microsoft JScript runtime error: Invalid operand to 'in': Object
expected If there is a handler for this exception, the program may be
safely continued.
It stops at this line of code in knockout-2.2.0.debug.js
if ((initialValues !== null) && (initialValues !== undefined) && !('length' in initialValues))
I use this WebApi:
public class ProductsController : ApiController
{
IEnumerable<Product> products = new List<Product>()
{
new Product { Id = 1, Name = "Tomato_Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> GetAllProducts(){
return products.AsEnumerable(); }
The scripts that I use are in a header section
#section Testscripts
{
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.debug.js"></script>
}
And the Knockout code in the footer default script section
#section scripts
{
<script type="text/javascript">
var apiUrl = '#Url.RouteUrl("DefaultApi", new { httproute = "", controller = "products" })';
function Product(data) {
this.Id = ko.observable(data.Id);
this.Name = ko.observable(data.Name);
this.Price = ko.observableArray(data.Price);
this.Category = ko.observable(data.Category);
}
function ProductViewModel() {
var self = this;
self.myproducts = ko.observableArray([]);
$.getJSON(apiUrl, function (allData) {
var mappedProducts = $.map(allData, function (item) { return new Product(item) });
self.myproducts(mappedProducts);
});
};
ko.applyBindings(new ProductViewModel);
}
and show the data in body:
<ul data-bind="foreach: myproducts">
<li>
<input data-bind="value: Id" />
<input data-bind="value: Name" />
<input data-bind="value: Category" />
<input data-bind="value: Price" />
</li>
</ul>
The bug is in your Product function.
You want to create an ko.observableArray from data.Price which is a decimal value and not an array of values, which results in this not so nice exception.
Change to ko.observable and it should work:
function Product(data) {
this.Id = ko.observable(data.Id);
this.Name = ko.observable(data.Name);
this.Price = ko.observable(data.Price);
this.Category = ko.observable(data.Category);
}