Modernizr detecting geolocation api not working - modernizr

I'm trying to get simple code for modernizr js to say whether or not a browser can support geolocation api. Here's my code.
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- check if geolocation works on browser -->
<script>
if(Modernizr.geolocation)
{
document.getElementById("geoConfirm").innerHTML = "This will work on this browser!";
}
else{
document.getElementById("geoConfirm").innerHTML = "This will not work on this browser";
}
</script>
<p id="geoConfirm">Test</p>
It's such simple code but it's not working, and it's bugging me because there's barely anything to go over. Thoughts?

Related

I'm trying to display Tableau workbooks on my webpage, but the result is blank page

My web is Laravel-VueJs App, I managed to sign in to Tableau server automatically in the background, (but without getting Auth tickets (I'm not sure if I need tickets for Javascript API yet), I'm trying to show my workbooks on my web page but getting blank page without any error, however this is my code
first added Javascript API in my app.blade.php
<script type="text/javascript" src="https://my-server-url/javascripts/api/tableau-2.8.0.min.js"></script>
and this is the Vue component where I need to show workbooks
<template>
<div>
<div
ref="tableau"
style="width:800px; height:700px;"
/>
</div>
</template>
<script>
export default {
name: "TableauWorkbookShow",
props: {
url: {
type: String,
required: true,
},
},
mounted(){
this.initViz();
},
methods: {
initViz() {
// url looks something like this: https://my-server-url/#/site/my-site-name/views/workbook-name/view-name
var viz = new tableau.Viz(this.$refs.tableau, this.url);
}
}
};
</script>
no errors, neither info on the page, anything else i need to consider here ? and should I add Auth tickets to the url to get workbooks or the url as it is now is fine to work?
One way to test would be to use the Embed code directly from the workbook on Server.
Click Share
Then click Copy Embed Code.
Paste this code directly into your html/view. It should have everything included to populate your dashboard into a webpage.
If this works, you know that your overall auth is working and you can troubleshoot the differences of your js to the embed code.
If auth doesn't work you should still see this screen if your js/html is working correctly.

Error: No reCAPTCHA clients exist (reCAPTCHA v3)

I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.
Here is the sample code:
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
It doesn't produce any "g-recaptcha-response" when the form is submitted.
I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.
Can anybody please tell me where might be the problem and what is the possible solution?
I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.
Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):
grecaptcha.ready(function() {
grecaptcha.render("recaptcha-container", {
"sitekey": "your-site-key"
});
});
Have you tried loading the script before trying to send the request?
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.
This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:
try {
data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
data["reCaptcha"] = "";
}
The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.
I had this problem because I was calling grecaptcha.reset(); when there wasn't any Recaptcha active on the site
grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
at MX (recaptcha__en.js:507)
at Object.Zn [as reset] (recaptcha__en.js:514)
at <anonymous>:1:13
I was using React and only rendering my captcha container sometimes. Fixed by hiding the captcha button instead of not rendering it.
In my case grecaptcha.reset(); was present from previous code snippet, and I was programmatically invoking it.
As the captcha verification is going on the fly every time. Resetting wasn't required.
After eliminating this grecaptcha.reset(); my code works perfectly fine.
Maybe this hint can help someone.
We received this because we have a second environment with another domain and forgot to add this domain to the reCaptcha admin site. The solution was to add the new domain to the settings.
The steps are
Open www.google/recaptcha/admin/site
Select the site you're working on
Click on the settings gear
Add the domain in its respective section

how to console.log using the cordova.js file in phonegap

I keep reading that the console.log needs to come after the onDeviceReady function, but I don't see any onDeviceReady functions in the cordova.js. Do I need to write my own? Does anybody know what the function would look like? What if I just wanted to console log "hello"?
Also, I noticed that cordova.js is not included as a script in the index.html. I'm assuming it needs to be if I want to see anything logged in the xcode console?
If you create the phonegap project by command line interface as described in their site
You should include cordova-3.x.x.js in your html head.
<head>
<script type="text/javascript" src="cordova-3.x.x.js"></script>
<script>
function onLoad() {
document.addEventListener(
'deviceready', onDeviceReady, false);
}
function onDeviceReady() {
// do Something!
// example: display a Cordova Console
// see docs.phonegap.com for full details
console.log("HELLO...");
}
</script>
</head>
<body onload="onLoad();">
Inorder to use the debug console in phonegap, you should add the plugin to the project by CLI
Type this command in Terminal
$ cordova plugin add org.apache.cordova.console

in IE8 setInterval method not working

When i tried the setInterval method in IE8 its not wokring
<body>
<script type="text/javascript">
function msg()
{
alert("hello world ");
document.writeln("hello world <br>");
}
//setInterval("msg();", 3000);
//setInterval(msg(), 3000);
//setInterval(msg, 3000);
setInterval(function(){msg()}, 3000);
</script>
</body>
when google i got several answers
window.setInterval jQuery function does not work on IE8
setinterval method not working
http://social.msdn.microsoft.com/Forums/nl-NL/netfxjscript/thread/ff7447f0-3c18-484b-a037-eaf9f60574a8
but when i tried those things on ie8 its not working
setInterval is working fine in your code. The problem is with what you're doing with it. Executing document.writeln is wiping out your document, which includes your JavaScript. To see this in action, just add <p>foo</p> somewhere in the body and you'll see that it disappears once document.writeln is executed. Remove the document.writeln line and you'll see that the alert occurs over and over again, as expected.
I believe the JavaScript will continue to run in WebKit browsers even though it's been wiped out, but not in non-WebKit browsers like Internet Explorer, Firefox, and Opera. Have a look at this question for some ideas on what to do.

Facebook Apps Performance - Insights

How to i know my apps perfomance and page loding ratings in Insights.
i referred App on Facebook tutorial,
through that i used following methods in my code,
FB.Canvas.setDoneLoading , FB.Canvas.Prefetcher.addStaticResource and
FB.Canvas.Prefetcher.setCollectionMode.
My Code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({ appId: '*****', cookie: true, xfbml: true, oauth: true });
FB.Canvas.Prefetcher.setCollectionMode(FB.Canvas.Prefetcher.COLLECT_AUTOMATIC);
FB.Canvas.Prefetcher.addStaticResource("http://example.com/fb/js/fb.js");
FB.Canvas.Prefetcher.addStaticResource("http://example.com/fb/css/fb.css");
FB.Canvas.Prefetcher.addStaticResource("http://example.com/fb/css/style.css");
FB.Canvas.setDoneLoading();
};
</script>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
when i see in insight dashboard it showing like,
is there any wrong.. why its not showing... have i call that methods in correct place..?
thanks in advance..
Have you tried the Graph API Explorer to ensure that they're working in that respect?
http://developers.facebook.com/tools/explorer/?method=GET&path=2439131959%2Fstaticresources
Use the dropdown at the top right to select your application (you should be logged in as the owner of the app you want to test); your selection will replace the &path=nnn in the input field to the right of the GET request in the explorer.
Make sure that you're not getting an error response from Facebook. This is how I've checked my prefetch methods; I haven't used the insights dashboard yet.

Resources