I'm implementing an autocomplete input box using the Google place API. I understand that the API URL requires a callback function for initializing the map.
I'm referencing the place API URL in index.html header:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />>
<script async src="https://maps.googleapis.com/maps/api/js?key=[KEY]&libraries=places"></script>
<title>DocBay</title>
</head>
and initializing the API in the component onMount Hook
onMounted(() => {
autocomplete.value = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
componentRestrictions: { country: ['us'] },
fields: ['address_components'],
types: ['address']
})
autocomplete.value.addListener('place_changed', fillInAddress)
})
This results in this error:
Loading the Google Maps JavaScript API without a callback is not supported
since I've to include the Google Maps Places API in the of my HTML and can't define the callback function in there, how do I get rid of this error?
According to the docs including a callback is mandatory - you can change your script tag to have the global function name like this:
<script>
window.initMap = function () {
...
};
</script>
<script async src=".../api/js?key=[KEY]&libraries=places&callback=initMap"></script> –
Related
We are currently exploring the possibility of grabbing selected values when users click on marks using Tableau Embedding API V3.
However, Whenever I click on the event, the event is triggered but, the promise is showing as pending.
Can you please check the following and let me know if there is any mistake from my side in resolving the promise.
<html>
<head>
<meta charset="utf-8">
<title>Tableau 8 Javascrip API</title>
<script type="text/javascript">
function getSelectedMarks(marksEvent) {
alert('Triggered');
console.log(marksEvent.detail.getMarksAsync().then(reportSelectedMarks));
// const marksSelected = await marksEvent.detail.getMarksAsync();
// const numMarks = marksSelected.data[0].data.length;
// alert(`${numMarks} marks Selected`);
}
function reportSelectedMarks(marks) {
console.log(marks);
}
</script>
</head>
<body>
<tableau-viz
id="tableauViz"
src='http://public.tableau.com/views/WorldIndicators/GDPpercapita?Region='
device="phone" toolbar="bottom" hide-tabs
>
</tableau-viz>
<script type='module'>
import {TableauEventType} from 'https://uatdataviz.hruk.pri/javascripts/api/tableau.embedding.3.latest.min.js';
let viz = document.getElementById('tableauViz');
viz.addEventListener(TableauEventType.FirstInteractive, async (event) => {
viz.addEventListener(TableauEventType.MarkSelectionChanged, getSelectedMarks);
});
</script>
</body>
</html>
For example Tableau Embedding API reference for Event Listeners
Any assistance would be appreciated.
Issue resolved. I have to use https instead of http for viz URL.
I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
The google PageSpeed Tools give it a high score which is i expected:
But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... )
I'm not using js and css bundling feature in nopcommerce.
Can you guys please tell me what is the best solution in my scenarior now ?
Any helps are very appriciated.
Thank you so much.
Here is my code of _Root.head.cshtml:
#using Nop.Core.Domain.Common;
#using Nop.Core.Domain.Seo
#using Nop.Core.Infrastructure;
#{
var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
if (commonSettings.RenderXuaCompatible)
{
Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
}
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
{
Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
}
}
<!DOCTYPE html>
<html#(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) #Html.NopPageCssClasses()>
<head>
<title>#Html.NopTitle()</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
<meta name="generator" content="nopCommerce" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Html.NopHeadCustom()
#Html.Partial("Head")
#Html.Widget("head_html_tag")
#Html.NopCssFiles(this.Url, ResourceLocation.Head)
#Html.NopScripts(this.Url, ResourceLocation.Head)
#Html.NopCanonicalUrls()
#Html.Action("RssHeaderLink", "News")
#Html.Action("RssHeaderLink", "Blog")
#Html.Action("Favicon", "Common")
#if (displayMiniProfiler)
{
#StackExchange.Profiling.MiniProfiler.RenderIncludes()
}
</head>
<body>
#RenderBody()
#Html.NopCssFiles(this.Url, ResourceLocation.Foot)
#Html.NopScripts(this.Url, ResourceLocation.Foot)
</body>
</html>
First, it's not related to Seven Spikes plugins. This issue is because of async behavior. When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. But other js file are depended on first main file, and that's way you're getting errors.
Let's understand it with current scenario, the default code is:
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
In this case the order of js files are:
Now load jquery min js file asynchronously.
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);
And check console:
With this change you will get an error(s).
To resolve this issue, you have to load js min file in one particular order on basis of dependency.
Side Note: this issue is with default code too!! I've tested with nopCommerce 3.80 and 3.90
Esri ArcGis Javascript API 3.18
I'm issuing a new Portal("myUrl") command and getting back an error.
It's a dojo error, "CancelError" "All requests canceled."
It's a new https installation of the api on a new federated portal.
I have code that works when calling the esri portal so I think my code is probably correct. That would leave a installation configuration problem.
So far, I'm stumped.
My test web site is on the same webserver as the portal.
Here's a link to the plunkr with working code:
https://plnkr.co/edit/RFlStZbHA5axAD3J2KQt?p=preview
Any ideas?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>New Portal</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
</head>
<body>
<div id='mainContent'>
<input id='message' value='initial value' />
</div>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
dojo.require('esri.arcgis.Portal');
dojo.require("esri.IdentityManager");
dojo.require("dojox.lang.aspect");
var portalUrl = 'https://www.arcgis.com';
var portal = null;
var message = document.getElementById('message');
var init = function() {
message.setAttribute('value', 'pre new portal');
portal = new esri.arcgis.Portal(portalUrl);
message.setAttribute('value', 'past new portal');
portal.on("error", function(errorMsg) {
message.setAttribute('value', 'error=' | errorMsg.message);
});
portal.on("load", function (data) {
message.setAttribute('value', 'success');
});
};
message.setAttribute('value', 'pre init');
dojo.ready(init);
</script>
</body>
</html>
Changing the portal settings per this document made the api work for maps.
All the examples online show using this:
var portal = new Portal('www.myurl.com');
I found that using this worked:
var portal = new Portal('www.myurl.com/arcgis');
Basically, since some of this may be due to configuration settings I haven't seen, I would recommend determining what url gets called by the Portal object's internal code, and then trying increasingly long fragments of the initial url until you get success.
I am working on a project to provide facebook autentication to an existing captive portal. This captive portal has one option to customize the template so... I can edit the html code to show one of my own.
The problem is that for some reason every time I import a script on the template like this
<script src="external http or https script"></script>
it fails and the result is a blank page with nothing loaded from the template...
I had found a solution by importing the script after the page has loaded like this....
var script=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);
It is working ... I can confirm on console that calling $('body') for example return the body element of html.. so jquery is ready...
My problem:
If, after loading jquery ussing the workaraound I load other scripts (angular and socket.io in this case) those scripts fail with jquery issues
Uncaught ReferenceError: $ is not defined
My question:
How can i do to load those scripts after the jquery has finish loaded...
Do I need to initialize jquery some how to use it?
Thanks in advance
FULL CODE
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="expires" content="-1"/>
</head>
<body onload="initialFunction()">
<script>
function initialFunction(){
document.getElementsByName('username')[0].placeholder="Nombre de Usuario"
document.getElementsByName('password')[0].placeholder="Contraseña"
var script=document.createElement('script');
var angularScript=document.createElement('script');
var socketScript=document.createElement('script');
var angularFacebookScript=document.createElement('script');
var appScript=document.createElement('script');
var materializeScript=document.createElement('script');
script.src="http://code.jquery.com/jquery-latest.min.js";
angularScript.src="http://192.168.1.5/js/angular.js";
socketScript.src="http://192.168.1.5:8080/socket.io/socket.io.js"
angularFacebookScript.src="http://192.168.1.5/angular-facebook-master/lib/angular-facebook.js"
appScript.src="http://192.168.1.5/js/app.js"
materializeScript.src="http://192.168.1.5/js/materialize.min.js"
var head=document.getElementsByTagName('head')[0]
var body=document.getElementsByTagName('body')[0]
head.appendChild(script);
body.appendChild(angularScript);
body.appendChild(socketScript);
body.appendChild(angularFacebookScript);
body.appendChild(appScript);
body.appendChild(materializeScript);
}
</script>
<center>
<style>
body {
background-color:#298eea;
}
....some other stuff...
</style>
<div>
<h3>{company_logo}</h3>
<h2>Captive Portal</h2>
<div id="__loginbox"></div>
//here I want to insert the facebook button with an angular controller to pass info to a backend via socket io.... I have already do that before ussing the "normal way"
</div>
</center>
</body></html>
Try using onload event at script variables
script.onload = function() {
console.log(jQuery().jquery);
// do stuff with jQuery script
}
angularScript.onload = function() {
// do stuff with angular script
}
similarly with socketScript, angularFacebookScript, appScript, materializeScript
I'm using google sign in js in my web application, I was using these 3 statements in meta data
<meta name="google-signin-clientid" content="1111111111111111111.apps.googleusercontent.com" />
<meta name="google-signin-scope" content=https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
suddenly It stopped working and give me this error cookiepolicy is a required field
The idea that the site was working without problems!
The solution that google no more recognize cookiepolicy in meta data. you must put it in the params of the gapi.auth.signIn
var additionalParams = {
'callback': signinCallback,
'cookiepolicy' : 'single_host_origin'
};
gapi.auth.signIn(additionalParams);