Google Recaptcha is not working on fancybox ajax generated form.
Finally found the solution. Bellow code is working fine for me.
Include Google Recaptcha api js
<script src="https://www.google.com/recaptcha/api.js"></script>
Add Element Html
<div class="g-recaptcha" id="recaptcha" ></div>
Add Script
<script type="text/javascript">
$(document).ready(function() {
$("[element_id_or_class]").fancybox({
padding : 0,
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : 'auto',
height : 'auto',
autoSize : true,
openEffect : 'none',
closeEffect : 'none',
ajax: {
complete: function(jqXHR, textStatus) {
grecaptcha.render('recaptcha', {
sitekey: [RECAPTCHA_SITE_KEY],
callback: function(response) {
console.log(response);
}
});
}
}
});
});
</script>
Related
select2 is not showing the attended results. Actually it doesn't show anything at all. already tried to fix it removing tabindex in dialog. thanks for your help.
this is the result
view page dialog :
<div id="edit-interv" class="modal" role="dialog" title="Intervento" aria-hidden="true" style="overflow-y: hidden;">
view page select:
<select id="pippo" class="select_family form-control"></select>
footer page:
$('#edit-interv').open(function() {
$("#pippo").select2({
dropdownParent: $("#edit-interv"),
ajax: {
url: "{{basepath}}/fetchfamily",
dataType: 'json',
delay: 250,
data: function (term, page) {
return {
q: term,
page: page
};
},
processResults: function(data, params) {
return {
results: $.map(data, function(item) {
return {
text: item.name,
id: item.id
}
})
};
},
cache: true
},
minimumInputLength: 0
})
});
Fancybox 1.3.4 JS came with my Wordpress theme, Gridlocked. Everything works properly, but the lightbox popup is too big for the screen. I'd like the image to shrink if needed to always fit on screen.
Looking at the Fancybox site instructions, it seems I want to set "autoscale:true" to fix this, either in PHP or in the JS file itself. The javascript file that came with the theme already has this set to true, but it's not working. I don't know where in all the theme php files I should try to include the argument. Any suggestions?
The initialization of fancybox is done in jquery.custom.js.
You can find following lines there:
function tz_fancybox() {
if(jQuery().fancybox) {
jQuery("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 300,
'overlayShow' : true,
'autoScale' : false,
'titleShow' : false,
'margin' : 10,
});
}
}
tz_fancybox();
Change to:
function tz_fancybox() {
if(jQuery().fancybox) {
jQuery("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 300,
'overlayShow' : true,
'autoScale' : true,
'titleShow' : false,
'margin' : 10,
});
}
}
tz_fancybox();
I am not able to run the fancy box helpers specifically the no right click button with another script i.e getting the fancybox to show the no. of images .the script runs like this..
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
},
helpers: {
title: {
type: 'inside'
},
thumbs: {
width : 50,
height : 50
}
}
});
});
$(".fancybox")
.attr('rel', 'images')
.fancybox({
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
}
});
</script>
When i run this script only the no. of images show and the no right click doesnot work.
Please advise.
I found disabling the right click works if I put the code inside the Ready function
$(document).ready(function () {
$('.fancybox-thumbs').fancybox({
prevEffect: 'none',
nextEffect: 'none',
closeBtn: true,
arrows: false,
nextClick: true,
padding: 10,
beforeShow: function () {
/* Disable right click */
$.fancybox.wrap.bind("contextmenu", function (e) {
return false;
});
},
afterLoad: function () {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
},
helpers: {
title: {
type: 'inside'
},
thumbs: {
width: 50,
height: 50
}
}
});
});
I have been developing the application and I use the following code for JEditable:
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});
I need to disable autogrowing of the field in order to if user moves on a fields then the field won't grow. Now field grows if user moves on it. I need it, please help. Thank you very much.
I have used with success
width : '100%' as a parameter. Give it a try.
<script type="text/javascript" charset="utf-8">
$(function()
{
$(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record",
{
event : "mouseover",
width : '100%'
style : "inherit",
autogrow: {
lineHeight : 0,
maxHeight : 0
},
submitdata: function (value, settings) {
return { "old_value": this.revert};
},
callback: function(value, settings)
{
}
});
});
Has anyone successfully used both libraries together? I can't seem to place the code in the properly sequence to get them to work together.
According to your comment, you are doing this :
jQuery.noConflict(
$(document).ready(function () {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
);
... try this instead :
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
}); // first fancybox
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
}); // second fancybox
}); // ready
Have you tried using jquery's noConflict() ? Since you are using two different libraries, it might be causing error. Using jQuery.noConflict() function might help.