I am trying to implement reCaptcha for submission of form but I am having trouble implement the google captcha javascript . I am not getting any console message in console.
<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=SITE_KEY" async defer></script>
<script type="text/javascript">
var recaptchaCallback = function () {
console.log('recaptcha is ready');
grecaptcha.ready(function() {
grecaptcha.execute('SITE_KEY', {action: 'some_action'}).then(function(token) {
console.log(token);
});
});
}
</script>
I don't see any console message, error, warning literally nothing in console. isn't onload should invoke the callback function. I checked the javascript response in network tab I am getting response with 200 status nothing wrong there . Can anyone tell me what I am doing wrong here . yeah I replaced the SITE_KEY with actual key .
Thanks and any advice will be helpful.
Related
So I added invisible recaptcha successfully but I'm curious what others think if I did it the correct way when calling grecaptcha.execute()
I call grecaptcha.execute() right after doing an explicit call like so
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback473&render=explicit"
async defer>
<script type="text/javascript">
var onloadCallback473 = function() {
widgetId_473 = grecaptcha.render('recaptcha_473', {
'sitekey' : 'MY KEY XXXXXXXXXXX',
'size' : 'invisible',
'badge' : 'inline', });
grecaptcha.execute(widgetId_473);
};
</script>
The form sits below this because of ASYNC DEFER
Now when a user submits the form by AJAX, I have code that handles it like this
'success': function(response) {
if (response.success) {
}
else {
//validation error
//Like blank fields, incorrect email requirements... etc
grecaptcha.reset(widgetId_473);
grecaptcha.execute(widgetId_473);
}
My question is "Is it okay to call the function grecaptcha.execute() twice?"
Like before hitting the submit button and after in the error section?
In broad terms, I call .execute() as soon as the form is submitted and send the ReCAPTCHA string key alongside the form data so the backend can effectively call google API and verify the ReCAPTCHA key before proceeding with any further logic.
What I'm trying to do is getting data from a database and when the page loads they will show on the screen. when a user is logged in it has an database url that is saved in a variable db and I use db.allDocs to get all data from that user.
Now. I've got it working on a button <button onclick="showInfoItems()">
But when I try it onload, it does work, but not with the correct database. This is because the user is unknown for some reason.
my code:
<body>
<ul id="info-lijst"></ul>
<script src="js/showinfo.js"></script>
<script>onload = showInfoItems();</script>
the user info is known in the showinfo.js, but for some reason the user is undefined, until I press the onclick button.
I thought that, when I first load in the js file (as I do) and then do the onload, it will work, but no. the username is undefined.
Does someone know what I'm doing wrong or how I can fix this?
EDIT:
showInfoItems.js:
function showInfoItems() {
console.log(dbrp);
dbrp.allDocs({
include_docs: true,
attachments: true,
descending: true
}).then(function (doc) {
console.log(doc);
buildInfoItem(doc.rows);
}).catch(function (err) {
console.log(err);
});
}
What the dbrp variable is:
localhost:5984/userdb-undefined
and when i do the onclick it's:
localhost:5984/userdb-1234567890 (username is known)
You defined onload wrong. It expects a callable function. What you do is calling your function immediately.
window.onload = function() {
showInfoItems()
});
EDIT
Since this seems to be more an PouchDB issue a expand my answer.
The problem is, that you need to wait for an asynchronous function call. This function is not done when your document is ready. So either you add a callback to this function to trigger another function when it is done or you add dispatch a CustomEvent
document.dispatchEvent(new CustomEvent('databaseReady'));
Then you can listen for this event and bind multiple function to it.
document.addEventListener('databaseReady', function() {
showInfoItems()
});
http://codepen.io/anon/pen/vgeyzV?editors=1010
I start to using jQuery BlockUI Plugin to block user activity for the page until complete a button process on C#/ASP.NET side.
So I wrote this;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.io/min/jquery.blockUI.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#MyButtonID').click(function () {
$.blockUI({ message: '<h1>Please wait..</h1>' });
});
});
</script>
As you can see, this is a simple code that blocks UI when I click asp:button which ID is MyButtonID until it finish it's process. This works great.
Now I try to create some alert based on a condition while on this click process. If I understand clearly, now I need to unblock my page as a first, show the alert and keep it blocked again until complete button process.
That's why I wrote two function (maybe I can call these $.unblockUI and $.blockUI directly without them?) in my javascript side for that;
function UnblockUI() {
$.unblockUI();
}
function BlockUI() {
$.blockUI({ message: '<h1>Please wait..</h1>' });
}
As far as I search, most common way to call Javascript function on server side is using ClientScriptManager.RegisterStartupScript method in C#. So I tried to alert something on C# side as an example with;
if(condition)
{
string script = string.Format("alert('{0}');", "Some error message");
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}
and it worked. After that, I tried to unblock page with calling UnblockUI function in my javascript side but it didn't unblock it.
if(condition)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "unblock", "UnblockUI", true);
string script = string.Format("alert('{0}');", "Some error message");
Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "alert", script, true);
}
If I understand correctly, this UnblockUI parameter calls my UnblockUI javascript function which I defined above and this function calls $.unblockUI(); and unblock my page which is blocked but as expected, it didn't work.
What am I missing here? Or am I didn't even understand that This plugin lets you simulate synchronous behavior when using AJAX, without locking the browser sentence?
Try using the function call as follows:
function unblockUI() {
$(function() {
$.unblockUI();
});
}
function blockUI() {
$(function() {
$.blockUI({ message: '<h1>Please wait..</h1>' });
});
}
I hope I have helped...
Here is what i am using in my current project.
$(document).ready(function () {
// unblock when ajax activity stops when DOM gets updated, means Ajax is completed
$(document).ajaxStop($.unblockUI);
//Block when trying for Ajax Activity
$('ul#Appdropdown').click(function (ev) {
$.blockUI();
//Add ajax call to get data
}
});
Implement the same and it will do the block and unblock for you.
I had an issue when using the $ajax complete function to stop the animation, If the ajax call fails i was resubmitting the ajax call, and wanted to block UI on resubmitting. But when making the call $.unblockUI inside of complete it was not animating correctly. It would flicker and disapear and not continue to block. However using global call to stop did work, allowing for blocking to re occur with a updated message on blocked UI.
$(document).ajaxStop($.unblockUI); // this works
instead of inside of the complete function of ajax
$.ajax({
complete: function(jqXHR, textStatus) {
$.unblockUI();// this did not always work
}
});
If you block user interface on this way :
BlockUI.Component(".page-content");
Then this is a working solution:
BlockUI.UnblockComponent(".page-content");
i'm trying to get the response from an iron-form in Polymer 1.
Form submit call a php script which return HTML code to insert in a div (ul and some li).
I use the iron-form event "iron-form-response" but i don't know how to get the response.
I can see the response in network tab of browser developer tools, but don't know how to get it in my element.
I don't find how to do in the iron-form documentation online.
Can someone help me please ?
What's happening, guys? All these responses confuse the OP when it is only this simple:
Your form:
<form is="iron-form" on-iron-form-response="responseHandler" action="http://localhost" id="myform">
<!-- Your form elements -->
</form>
Your script:
<script>
Polymer({
// Some scripts here.
// ...now your listener
responseHandler: function(e) {
console.log(e.detail.response);
},
});
</script>
It's just that. Nothing complicated. Don't over-complicate things.
Add Event Listeners to iron form.
ready: function(){
this.$.myform.addEventListener('iron-form-response',this.formResponse);
this.$.myform.addEventListener('iron-form-error',this.formError);
}
Form Response Function:
formResponse: function (e){
console.log("Server Response: ",e.detail);
}
Form Error Function:
formError: function (e){
console.log("Form Error: ",e.detail);
}
I'm going to build off of Talon's answer, which is correct.
e.detail will be a JSON object, assuming the response sent from the server is in JSON form. So, if you're using Node.JS and Express, you might have receiving code like this:
document.getElementById('my-form').addEventListener('iron-form-response', function (e) {
console.log('Form :', e.detail);
});
And your server code might look like this:
res.status(200).json({'foo': 'bar'});
After which e.detail will be the object {"foo": "bar"}
Small update.
I send some json with response:
res.contentType('json');
es.status(500).send({"foo":"bar"});
If I use 500 (error), I can reach the json data only by console.log(e.detail.request.xhr.response);
In case of code 200 it is reached by: console.log(e.detail.response);
Idon't get why it is so, but it's the only way for me((
<script>
Polymer({
is: 'rsvp-wedding',
attached: function() {
var form = document.querySelector('form');
form.addEventListener('iron-form-error', function(e) {
console.log(e.detail.request.status);
});
}
});
</script>
The following code calls the JSON and displays the results but then it seems like the page never completes loading. The browser still says connecting and view source never displays
Any ideas?
<script>
function getroadcondFiles () {
jQuery.support.cors = true
// electdiv=electdiv+"</center><br>";
$.getJSON('http://example.com?callback=?',function(dataa){
// console.log("before each");
//console.log(dataa.result.totalCount);
$.each(dataa.roadid, function(i,item){
document.write(item.desc+"<br>");
document.write(item.overstat[0]+"<br>");
document.write(item.weatherstat[0]+"<br>");
document.write(item.pavementstat[0]+"<br>");
});
;}).error(function(jqXHR, textStatus, errorThrown) { alert(errorThrown); });
;}
</script>
</head>
<body>
<script>
$=jQuery;
getroadcondFiles();
</script>
Check for an $.ajaxError or use your browser's debugger to get more insight in to the failure. Without knowing if the json call is failing (and no error besides "this doesn't work") there's no way to tell what's failing.
I recommend using $.ajax and the error property to determine if there is a problem occurring with the query. one you find out if it's the query or the script you'll be better informed on how to correct the issue.
it may not even be ajax failing though, it could be another script still processing. Once again, use your browser's debugging tools to get more insight in to what's actually the original problem.