What is the best way to detect if a reCaptcha v2 does not load? I would like to alert users when they need to use the captcha to continue, but it was unable to load.
You can pass a callback function when you make the request for the captcha
Add this to the url:
?onload=myfunction
for example:
<script src="https://www.google.com/recaptcha/api.js?onload=loadedCallback&render=explicit"
async defer>
</script>
Js:
function loadedCallback(){
//Recaptcha its loaded
}
Related
I have an API url http://api.openchargemap.io/v2/poi/?output=json&countrycode=NL&maxresults=10
and I want to display this data in a webpage in a list format. But I have no idea where to start. Can I use JS? Can anyone help?
you can use js but jquery is better and angularjs is the best, i made you an example in jquery
$(document).ready(function(){
$.ajax({
type:"get",
url:"http://api.openchargemap.io/v2/poi/?output=json&countrycode=NL&maxresults=10",
success: function(data){
result="";
for(i in data){
result+="ID: "+data[i].ID+" // UUID: "+data[i].UUID+"<br>";
}
$("#list").html(result);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list">
</div>
Yes of course you can use Javascript but you need or localhost or some hosting for AJAX . You must use GET to get that information on your webpage . After AJAX you can use innerHTML function or console.log to see your result in console .
Why is google reCaptcha2 (gReCaptcha) not showing after a page refresh, but showing if page is reopened by the link?
See this video for explanation: http://take.ms/I2a9Z
Page url: https://orlov.io/signup
Page first open: captcha exists.
Navigate by link: captcha exists.
Open new browser tab: captcha exists.
Refreshing page by refresh icon, ctrl+R, ctrl+F5: captcha NOT exists.
I added body unload event to prevent browser cache, it did not help.
Browsers for testing:
Firefix 39.0
Chome: 44.0.2403.125 m
Opera: 30.0
In all browsers I get the same result. So does this mean there's an error on my side?
I think it has to do with the browser and the speed of your network. You are calling ReCaptcha with a callback, but you call it before you define the callback. Depending on your network speed or browser quirks, it might execute before the rest of the script has loaded.
Line 330:
<script src="//www.google.com/recaptcha/api.js?onload=renderReCaptchaCallback&render=explicit&hl=en-US" async defer></script>
Line 351:
<script type="text/javascript">if (typeof (renderReCaptchaCallback) === "undefined") {
var reCaptchaWidgets = {};
var renderReCaptchaCallback = function() {
jQuery.each(reCaptchaWidgets, function(widgetId, widgetOptions) {
grecaptcha.render(document.getElementById(widgetId), widgetOptions);
});
};
}</script>
So I would move the definition of renderReCaptchaCallback to the top of the page so it is defined well before trying to load it.
I'm using the Twitter Bootstrap modal as a login window, and would like it remains open if user put wrong login info. My Page refreshed after submitting the form.Is there a way after refresh page modal open again and I an show the message there that Login Failed:Please try again.
You will have to trigger the modal when there is an error after a post back.
You could have the server print out some javascript to trigger the modal after a post back ONLY on an error condition. You didn't mention what server side technology you are using, so here is some psuedo server side code:
if (hasAuthenticationErrors)
<script type="text/javascript">
$('#myModal').modal('show');
</script>
end if
That bit of javascript would have to be rendered AFTER the modal is initialized with a show:false option
$('#myModal').modal({ show: false})
see: How can I trigger a Bootstrap modal programmatically?
The scenario is certainly possible, but not even necessary. You should use the preventDefault in order to withhold the form from submitting the page. That is, if you use AJAX, which looks to be the perfect place for it.
An example would be
$(function () {
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
});
I'm using the jQuery Forms plugin to do an asynchronous file upload. Currently, the only way for the user to abort that upload is to press the "Stop" button on their browser, which may cause other javascript and ajax requests to stop as well. I'd like to provide a cancel button, but I haven't found any way to cancel an upload as it is happening using the API.
Is there a built-in way, or at least a robust hack I can use, to cancel the upload as it occurs?
The ajaxForm method takes all the same options that jQuery.ajax takes, so it is possible to capture the dummy xhr that it produces in a beforeSend handler. The xhr has an abort method that aborts the file upload:
f.ajaxForm({
beforeSend: function(xhr) {
cancelBtn.click(xhr.abort);
}});
Since Dec 2012 it is possible to access xhr directly:
var form = $('#myForm').ajaxSubmit({ ... });
var xhr = form.data('jqxhr');
....
$('#cancel').on('click', function(){
xhr.abort();
});
I use it to cancel ajax file upload.
link - https://github.com/malsup/form/issues/221
When I load a library from a function it doesn't load and even crashes the page!
What's up with that??
HTML head:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
// --- LOADING LIKE THIS WORKS FINE ---
// jQuery is completely loaded
function jqueryLoaded() {
$("body").css("background-color","orange");
}
google.load("jquery", "1.4.3");
google.setOnLoadCallback(jqueryLoaded);
// --- LOADING FROM AN EVENT DOES NOT WORK?? ---
// jQuery UI is completely loaded
function jqueryUILoaded() {
$("body").css("background-color","green");
}
function loadJqueryUI() {
alert("load jQuery UI now..");
google.load("jqueryui", "1.8.6");
google.setOnLoadCallback(jqueryUILoaded);
}
// with a setTimeout it doesn't work either..
// setTimeout("loadJqueryUI()", 2000);
</script>
HTML body:
<input type="button" value="load jQuery UI" onclick="loadJqueryUI()"/>
Okay, it seems that we can not load jQuery dynamically:
http://code.google.com/apis/loader/#Dynamic
The standard google.load functionality loads the API(s) when your page loads
The only Libraries supported by Google Loader, loaded dynamically and with callbacks are:
Google Maps API
Google Search API
Google Feeds API
Google Language API
Google Visualization API
Bummer!
I am going for a lazy-load polling plugin:
http://wonko.com/post/lazyload-200-released
Have you considered replacing INSERT-YOUR-KEY with, erm, your key?