I have website which uses three different languages switchable by user. Language switch is done on client side by JavaScript (AngularJS).
I am using reCAPTCHA 2 on my website and need to change language of reCAPTCHA when the user switches languge of website.
I know already that I can force the language by this code when the reCAPTCHA is initialized:
<script src="https://www.google.com/recaptcha/api.js?hl=cs"></script>
However, when you need reloading reCAPTCHA, you use this code and it doesn't take any parameter for custom language:
grecaptcha.reset();
Is it possible to do that without refreshing the page and re-initialization of reCAPTCHA widget with different language?
EDIT
I am using angular-recaptcha to render the widget. This means that:
I need calling vcRecaptchaApiLoaded callback after reCAPTCHA API init
I cannot change the code rendered by vcRecaptcha directive
This is code which renders reCAPTCHA widget:
<div
vc-recaptcha
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
></div>
This is the code which insludes reCAPTCHA API into my web:
<script
src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit&hl=cs"
async defer
></script>
You can simply empty the div.g-recaptcha and load the script again (programmaticaly).
The function below should do the trick:
function changeRecaptchaLanguage(language) {
document.querySelector('.g-recaptcha').innerHTML = '';
var script = document.createElement('script');
script.src = 'https://www.google.com/recaptcha/api.js?hl=' + language;
script.async = true;
script.defer = true;
document.querySelector('head').appendChild(script);
}
Take a look at the example in the snippet below:
function changeRecaptchaLanguage(language) {
document.querySelector('.g-recaptcha').innerHTML = '';
var script = document.createElement('script');
script.src = 'https://www.google.com/recaptcha/api.js?hl=' + language;
script.async = true;
script.defer = true;
document.querySelector('head').appendChild(script);
}
var curr = 'en';
changeRecaptchaLanguage(curr);
document.querySelector('button').addEventListener('click', function() {
curr = curr === 'en' ? 'pt-BR' : 'en';
changeRecaptchaLanguage(curr);
});
<div>Other stuff</div>
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<button>Change language</button>
I think this is a duplicate question. Please see one proposed solution here:
Change ReCaptcha language OnClick
To summarize:
It is not possible to do set recaptcha language through javascript directly at the moment. As you stated, it is however possible using the parameter 'hl' during script loading.
If you need to change the language of your application dynamically without reloading the page, you can do this by removing the recaptcha script link from the head section and instead, loading it directly with a call from javascript. When your user changes the language by clicking a button, you can now reload recaptcha with the new language by calling the load function again.
You can simply just add the value in "lang" directive.
<div vc-recaptcha key="publicKey" lang="en"></div>
I just stumbled on this question. I know it has been asked a while ago but I think the best way to do this is to use the method useLang from the service inside a $watch in the variable lang.
So in the html identify the lang we are on:
<div id="g-recaptcha" class="g-recaptcha" vc-recaptcha key="domainkey" lang="$root.lang" on-success="setResponse(response)"></div>
And, if you can, inside the directive just put the $watch on that variable:
scope.$watch('lang', function(){
if(scope.widgetId!=null){
vcRecaptcha.useLang(scope.widgetId,scope.lang);
}
});
How to set ng-recaptcha language on init:
<re-captcha class="g-recaptcha"
siteKey="asdfasdfasdfasdfasdasd"
[(ngModel)]="myRecaptcha"
name="captcha"
#recaptcha></re-captcha>
app.module.ts
import {RecaptchaModule ,RECAPTCHA_LANGUAGE} from 'ng-recaptcha';
const getDomainBaseUrl = location.toString();
export const language = baseUrl.toLocaleLowerCase();
...
providers: [
...
{
provide: RECAPTCHA_LANGUAGE,
useValue: language,
},
],
Related
I have a plain js + jQuery app with a button protected by google recaptcha, everything works as expected, but I'm failing to update the sitekey on the fly. The reason I want this is that I have a couple of environments (staging, test, production etc.) and I'd like to have a separate sitekey for specific envs (in order to separate the test stats from data from real users).
I'm able to change the attribute on my recaptcha element, but it looks like the attributes are taken by the script on initialising the whole thing, how can I refresh/reset the widget to accept the new sitekey?
I've been experimenting with reset and render methods, but to no effect so far.
<div
id="google-recaptcha"
class="g-recaptcha"
data-sitekey="this-will-be-replaced-anyways"
data-callback="onSubmit"
data-size="invisible"
></div>
if (grecaptcha) {
$('#google-recaptcha').attr({
'data-sitekey': 'my-real-sitekey'
});
}
I think you are looking for Explicitly render the reCAPTCHA widget
1.Specify your onload callback function. This function will be called by JavaScript resource(see the next step)
<script>
function onloadCallback() {
grecaptcha.render('myCaptcha1', {
'sitekey': 'sitekey value', // required
'theme': 'light', // optional
'callback': 'onloadCallback' // optional
});
}
</script>
2.Insert the JavaScript resource, setting the onload parameter to the name of your onload callback function and the render parameter to explicit.
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
3.Define the target HTML control that is supposed to be a captcha on your page.
<div id="myCaptcha1"></div>
I hope it helps you as helped me, good luck
I am trying to create a jsPsych plugin where the user can select a color for each stimulus. For this I am using jscolor. jscolor works well in vanilla HTML, but when I try to incorporate it in a jsPsych plugin it does not load the jscolor library.
jsPsych.plugins["color-picker"] = (function() {
var plugin = {};
plugin.info = {
name: "color-picker",
parameters: {
}
}
plugin.trial = function(display_element, trial) {
display_element.innerHTML += '<input data-jscolor="">'; // <-- This should show a color picker if jscolor.js is loaded.
// data saving
var trial_data = {
parameter_name: 'parameter value'
};
// end trial
jsPsych.finishTrial(trial_data);
};
return plugin; })();
I don't understand why this exactly happens. Maybe I need to load the library inside the plugin? Adding display_element.innerHTML += '<script src="library/jscolor.js"></script>'; does not work either.
How can I implement this in my plugin?
You can load the the jscolor library in your main experiment script and then reference the functions in the plugin.
One reason your plugin may not work right now is that the trial ends immediately after it begins because jsPsych.finishTrial() is called without waiting for any input from the user.
You'll likely want to move the jsPsych.finishTrial() call inside a function that is invoked based on the user submitting the form that includes the jscolor input element.
I have little time studying JavaScript and jQuery and would like to learn how to load dynamic content in a div of the site by a button and the loaded content create a new url to be indexable and could share with friends social networks, etc.
I created a function that is called with the onclick event of a button. The function takes two parameters, the div where to load the content and the path where the content to be loaded is stored:
function contentLoad(nameDiv, url)
{
$(name).load(url, function() {
});
}
button:
Moon
I do not know if I'll be doing well. The code still being very simple and charge me works perfectly content. But I'd like to load content would generate a new url that was accessible and that the link could be shared. How could I get it?
I think we need to store data loaded into a content with jQuery url when attempting to access, mount everything automatically and show visitors the web with dynamic content already loaded.
See if you can guide me in the process and that steps need to get it. Thanks to all.
You can use "client routes", using the hash tag in your url, and than some js lib which can handle this routes, for instance you can use director js, here is an example:
$(function() {
var author = function () {
// Load your content using AJAX
$("#content").html("author");
};
var viewBook = function (bookId) {
$("#content").html("viewBook: bookId is populated: " + bookId);
};
var routes = {
'/author': author,
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Director/1.2.8/director.js"></script>
<div id="content"></div>
<ul>
<li>#/author</li>
<li>#/books/view/1</li>
</ul>
I am trying to replace the generic "Save to foursquare" button that can be set up here: https://foursquare.com/buttons/savetofoursquare
I want to replace it with my own custom foursquare button (.svg versions from Fairhead Creative, distributed by Zurb Foundation here: http://zurb.com/playground/social-webicons), and not have the script automatically wipe out and replace my custom button with the pre-packaged foursquare save button.
I am pretty sure I just need to script my own solution, using the documentation here: https://developer.foursquare.com/overview/widgets -- but I'm a bit confused. Wish there were examples there.
I also have several buttons on one page referencing various vcards (multiple museum locations). To do that, I used the data-context attribute from the answer here: Multiple Foursquare 'save' buttons on one page. That is all working.
I'm using my own html:
<span id="venue1-foursquare" class="fc-webicon foursquare" data-context="venue1_vcard">save Venue 1 to foursquare</span>
And later on the page:
<span id="venue2-foursquare" class="fc-webicon foursquare" data-context="venue2_vcard">save Venue 2 to foursquare</span>
How to do this?
OK, I knew I should keep searching and tinkering before posting this question. :)
Thanks to vnads here, I saw how to set up the global onReady functionality. I set it up to use a jQuery each(), loop through the spans, grab the data-context values, and then attach the functionality to my DOM element. The critical bit here came from vnads' comment at the end of the (currently) accepted solution: foursquare is looking for a DOM element, not a jQuery object.
Oh, and the widget.attach() instead of widget.replace() keeps the custom graphic from getting run-over.
<!-- 4Square js: -->
<script type='text/javascript'>
(function() {
window.___fourSq = {
"explicit": false,
"onReady": function () {
$('.fc-webicon.foursquare').each(function() {
var this_widget = $(this);
var this_context = this_widget.data("context");
var widget = new fourSq.widget.SaveTo({
"context": this_context
});
widget.attach(this_widget[0]);
});
}
};
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://platform.foursquare.com/js/widgets.js';
s.async = true;
var ph = document.getElementsByTagName('script')[0];
ph.parentNode.insertBefore(s, ph);
})();
</script>
Im trying to get tinymce edit iframe to work with this wonderfull tabbifier:
http://www.barelyfitz.com/projects/tabber
I have successfully installed both of them and they work great.
In my example I have tested the following:
Load a tinymce component and save the following code inside the tinymce iframe with the HTML option:
test
The result is saved perfectly after refreshing with F5 and this code is saved in the database:
<p>test</p>
tinymce is working perfecly.
The next test I have made is with tabber:
Edit the tinymce component box and saved the following code with the HTML option:
<div class='tabber' id='tabber1'>
<div class='tabbertab' title='FIRSTTAB' >
test firsttab
</div>
<div class='tabbertab' title='SECONDTAB' >
test secondtab
</div>
</div>
The code is perfectly saved in the database, and the result is perfectly loaded in the output view, showing two tabs, each one of them with its content.
The problem is while trying to edit the content again with tinymce, the tabs are not shown. The content is perfectly loaded in the tinymce iframe, without the tabs. Its shown as below:
test firsttab
test secondtab
The HTML code inside it is good, it has the proper tabbifier html code saved before.
The problem maybe is that the iframe of tinymce is not able to load or interpret the javascript of tabber.js and its not showing the tabs.
I have tested loading the javascript of tabber.js inside the tinymce iframe with this code, and seems to load it but the tabs are not still shown:
<script type="text/javascript">
tinyMCE.init({
mode: "exact",
elements: "%s",
theme: "%s",
%s
%s
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
%s
setup : function(ed)
{
ed.onInit.add(function(ed, evt)
{
alert("entered tiny");
// Load a script from a specific URL using the global script loader
//tinymce.ScriptLoader.load('/js/tabber/tabber.js');
// Load a script using a unique instance of the script loader
//var scriptLoader = new tinymce.dom.ScriptLoader();
//scriptLoader.load('C:\tabber.js');
// Load multiple scripts
var scriptLoader = new tinymce.dom.ScriptLoader();
scriptLoader.add('/js/tabber.js');
scriptLoader.loadQueue(function() { alert('All scripts are now loaded.'); });
});
}
});
</script>
I have also checked that /js/tabber.js is the correct path. And saw at firebug that its loading it.
The two alert messages are displayed, so it seems to load it, but the tabs inside the tinymce edit iframe are still not shown.
Any help is welcome, thank you so much.
The tinymce ScriptLoader does not load a script inside the iframe. It provide a way to load a script in the main window after the tinymce initialization. This is very confusing as not documented.
But you definitelty can load a script inside the iframe. Here is the magic :
tinymce.init( { setup : function( ed ) {
ed.on('init', function (args) {
// get the iframe DOM
var doc = args.target.contentDocument || args.target.contentWindow.document;
// inject script into the DOM
var s = doc.createElement('script');
s.type = 'text/javascript';
s.src = '/js/tabber.js';
doc.getElementsByTagName('head')[0].appendChild(s);
});
});
Several browsers have problems with spaces and tabs on paragraph start.
A workaround for spaces is to code them onSave as protected spaces if they are at the beginning. The solution for tabs is to use another character with similar behaviour and replace them when saving. It is necessary to recode the content when reloaded from databse into the editor.