Tank auth recaptcha does not come with default. How can I apply recaptcha theme/custom theme to tank auth recaptcha?
Tried adding following in page's <head> tag but no luck.
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'red'
};
</script>
Tried changing auth.php's _create_recaptcha() method like this.
$options = "<script>var RecaptchaOptions = {theme: 'red', custom_theme_widget: 'recaptcha_widget'};</script>\n";
Then I got
You are in the right path, next thing you have to do is that remove explicit call for recaptcha components from the view . Then it will work as expected
Related
I have reCAPTCHA v3 set up on my page:
<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY"></script>
If internet connectivity becomes unavailable or unreliable, reCAPTCHA will insert this HTML at the bottom of my page:
<div>
<div>
Could not connect to the reCAPTCHA service. Please check your internet connection and reload to get a reCAPTCHA challenge.
</div>
</div>
I would much rather handle this error in my JavaScript so I can display it to the user in a better way. However, the documentation for v3 doesn't indicate how to do this.
Any thoughts on how to catch this error?
You can put an onerror handler in the script tag itself:
<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY" onerror="error_handler()">
But I think what you want is more along the lines of what reCAPTCHA v2 offers:
widgetId = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light',
'error-callback' : error_handler()
});
I doubt that works but there is another way. You just need to monitor the DOM for changes since you know that when there is an error Google will add a div to your page. You can do that with MutationObserver.
var m = new MutationObserver(function (mutationRecords) {
this.disconnect();
error_handler();
});
m.observe(document.body, {childList: true});
{childList: true} tells the MutationObserver to detect nodes added to the DOM and passes them to the callback function as the parameter mutationRecords (which contains array of MutationRecord objects). From there it's up to you what to do next.
This should at least be enough to get you started!
How can I add jQuery code inside magento2 pages? For example I have a "Contact us" page. So I can edit the content inside contact us page by
Login to Admin panel
admin -> content -> Pages -> Contact us
I want to add some jQuery code.
So I write
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script>
jQuery(function($){
$(".mybox").on("click", function(){
MY CODE *******
});
});
</script>
Here the problem is: I have to call <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
Otherwise it will not work. How can I solve this?
ie. How can i add jquery code in wysiwig editor
Magento 2 Uses Require js
Try using
<script>
require([
'jquery'
], function ($) {
$(".mybox").on("click", function () {
console.log('your code starts here');
console.log('your code ends here');
});
});
</script>
I am developing blog in codeigniter using tank authentication library(downloaded from net)
As you know blog contain like/dislike button .When click on like button(a view page) ,first control is transfer to controller where it is checked whether user is logged in or not,if user is logged in then control is transferred back to main blog page and blog is liked(ie like counter is incremented)
but, if user is not logged in or is not the member of community then login/register form is displayed.
These all functionality is in-build in tank authentication library is it is working fine.
Problem:
I want that if user is not logged in or is not a member ,then whichever page is displayed(login/register/forgot password/send email again),they should be opened in pop up on click of like/dislike button.
Work done:
Used anchor popup function but no use.
Result:It display view in new window
Placed the view of login/register form on same blog page,used jquery (fade in,fade out)etc function to display pop up.
Result:pop up is displayed, but as that pop up is not coming from controller so is of no use.(as tank authentication library function are not getting envolved.)
So if possible then please help me to display view(called from controller as pop up).
If possible then do send some proper links or any demo project.
There is a function of jquery-fancy box,I guess that would work.
I know the problem will be solved by applying concept of jquery+ mvc flow, but as I am new to php as well as codeigniter so I am not able to integrate my thoughts properly.
Thank you in advance.
Use Fancybox your problem will be solved. [Download] the package first. Then include the CSS and JS in your template.1
Usage:
Login
$(function(){
$(".fancybox").fancybox({
type : 'iframe',
autoSize : false,
width : "60%",
height : "56%",
'scrolling' : 'no',
'titleShow' : false,
openEffect : 'fade',
closeEffect : 'fade'
});
});
EDIT
Changes :
added the fancybox class in the link.
Dislike
Mandatory includes in the <head> section of the index page:
<script type="text/javascript" src="<?=base_url()?>js/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="<?=base_url()?>css/fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="<?=base_url()?>js/jquery.fancybox.js"></script>
Now in the page in the <head> section include this after the above includes:
<script type="text/javascript">
$(function(){
$(".fancybox").fancybox({
type : 'iframe',
autoSize : false,
width : "60%",
height : "56%",
'scrolling' : 'no',
'titleShow' : false,
openEffect : 'fade',
closeEffect : 'fade'
});
});
</script>
Currently im building a application using phonegap & jQuery Mobile
I have done the version which is perfectly working on iOS & Android.But the same code does not work on windows phone.When i click any link,redirection to the respective page is not loading..Its still says "Error Page loading".
<!DOCTYPE html>
Test
<div id="bg">
<div style="padding-top:14%;width:100%;text-align:center">
<div style="float:left;text-align:center;width:50%"><img src="pics/btn_1.png" /></div>
<div style="float:left;text-align:center;width:50%"><img src="pics/btn_2.png" /></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Need help on this.
Solution
Add data-ajax=false or rel=external to your anchor tag. But, if you do this, you will lose transitions. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. You could enable this if the incoming device is a windows phone if needed :
$(document).on("mobileinit", function () {
//check for windows phone
$.mobile.ajaxEnabled = false;
});
Else, make your code into a single page template. Here's a demo of that : http://jsfiddle.net/hungerpain/aYW2f/
Edit
Currently jQM doesn't support query string parameters. You could use the localStorage API to store the parameters in cache and retrieve them later. Assuming you want to go to index.html from here :
<img src="pics/btn_2.png" />
You'd add a click event for it :
$(document).on("click", "a", function() {
//gets qs=2 and changes it into ["qs",2]
var query = this.href.split["?"][2].split["="];
//construct an array out of that
var paramString = { query[0]: query[1]} ;
//store it in localstorage
locaStorage["query"] = JSON.stringify(paramString);
//continue redirection
return true;
});
In your index.html :
$(document).on("pageinit", "[data-role=page]", function() {
//store it in localstorage
var params = JSON.parse(locaStorage["query"]);
//now params will contain { "qs" : 2 }
//you could access "2" by params["qs"]
});
More info about localStorage here.
I had Also same issue and finally resolve it by using below code
my html page is index.html and i am writtinga all code in one html
Before
$.mobile.changePage( "#second", {});
After
var url = window.location.href;
url = url.split('#').pop().split('?').pop();
url = url.replace(url.substring(url.lastIndexOf('/') + 1),"index.html#second");
$.mobile.changePage(url, { reloadPage : false, changeHash : false });
and suppose you have multiple html page then for more one page to another you can use
var url = window.location.href;
url = url.split('#').pop().split('?').pop();
url = url.replace(url.substring(url.lastIndexOf('/') + 1),"second.html");
$.mobile.changePage(url, { reloadPage : false, changeHash : false });
There is no support of querystring in web application using phonegap for windows phone 7.
However we can replace ? with # or anything else to pass the data,
like convert
Sample.html?id=12312
to
Sample.html#id=12312
I'm using tinymce jquery plugin and trying to access the api after initializing an instance of tinymce over a textarea.
In this example, I have a hide button, which when clicked on is supposed to hide the tinymce editor, but instead I get an error.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div><textarea id="textEditor" class="tinymce" disabled="disabled"></textarea></div>
<input type ="button" id="hide" value="Hide tinymce">
</body>
</html>
$(document).ready(function(){
//textEditor
$("#textEditor")
.tinymce({
// Location of TinyMCE script
script_url : 'js/tinymce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,",
theme_advanced_resizing : false
})
//... see below ...//
});
Update: I have 2 versions now, one that works by wrapping the $("#textEditor").tinymce().hide(); line in a click function, and one that gives me tinyMCE not defined with just the line itself.
Works:
$("#hide").click(function(){
$("#textEditor").tinymce().hide();
})
Doesn't work:
$("#textEditor").tinymce().hide(); //error tinyMCE is not defined
You could try
tinymce.get("textEditor").hide();
To verify if you are useing the correct tinymce id can alert all tinymce ids present at your page using
for (var i = 0; i < tinymce.editors.length; i++) {
alert(tinymce.editors[i].id);
}
EDIT:
This:
/** Option Block A error **/
// $("#textEditor").tinymce().hide(); //error tinyMCE is not defined
/** Option Block A error **/
does not work because it will get called before the tinymce editor is initialized. At this point there is no tinymce.get("textEditor").
I think that the path to your jquery plugin is not correct, because, the $.tinymce() method is provided there. If the file is not to be found, so is this method.
Also you should ensure that the path specified inside the *script_url* field is valid, as the plugin will try to load it on the fly.