Got a Typo3 Installation where i've added Googles reCaptcha to a Form.
Did that already successful on other Typo3 installations, but this time, i get the blocked frame error in the Browser.
Blocked frame with origin "https://www.google.com" from accessing a cross-origin frame.
at um.f.hc (https://www.gstatic.com/recaptcha/api2/....)
This happens two times and after that, i get this massage in the frontend.
Please upgrade to a supported browser to get a reCAPTCHA challenge.
Alternatively if you think you are getting this page in error, please check your internet connection and reload.
Why is this happening to me?
This is happening in all Browsers i checked (Chrome, FF, IE11).
To include the reCaptcha i've adde the following to the Template:
<script src="//www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
var captchaCallback = function() { document.getElementById("captchaResponse").value = document.getElementById("g-recaptcha-response").value }
var onSuccess = function(response) {
var errorDivs = document.getElementsByClassName("recaptcha-error");
if (errorDivs.length) {
errorDivs[0].className = "";
}
var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
if (errorMsgs.length) {
errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
}
captchaCallback();
document.getElementById("fhcallback").submit();
};
</script>
<input type="hidden" id="captchaResponse" name="fhcb[recaptcha]" value="" />
<div id="recaptcha-demo" class="g-recaptcha" data-sitekey="[MYPUBLICKEY]" data-callback="onSuccess" data-bind="inp-submit"></div>
<button class="orderButton bold" id="inp-submit" ###submit_nextStep###>Senden</button>
And in PHP:
$secret = '[MYSECRETKEY]';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$apiResponse = json_decode(\TYPO3\CMS\Core\Utility\GeneralUtility::getUrl($url.'?secret='.$secret.'&response='.$this->gp[$this->formFieldName]), true);
if($apiResponse['success'] == FALSE) {
$checkFailed = $this->getCheckFailed();
}
The Form is not visible on pageload. Its a slide in at the right side of the page, after clicking its toggle element.
I'am out of ideas and the client is bugging me already.
I found the Issue. On this Installation, the JavaScript Library Mootools was included.
After removing the include of Mootools, no further problems with blocked Frames occurred.
Related
During website development in asp.net, there's an issue of back button after logout.
I have tried writing the following code, it still doesn't work:
Session.Abandon();
Session.Clear();
Session.Contents.RemoveAll();
FormsAuthentication.SignOut();
Roles.DeleteCookie();
FormsAuthentication.RedirectToLoginPage();
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetNoStore();
Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
Response.Redirect("~/Login.aspx");
On pressing the logout button, I don't want to get back to the previous URL. Help me out pls
Here is a working solution for the browser back button issue.
Step 1: Add the following hidden field on your page:
<input id="reloadValue" type="hidden" name="reloadValue" value="" />
Step 2: Add the following code on your page. Note that you should keep any existing document.ready() as it is and also add this one.
<script type="text/javascript">
$(document).ready(function () {
var d = new Date();
d = d.getTime();
if ($('#reloadValue').val().length == 0)
{
$('#reloadValue').val(d);
$('body').show();
}
else
{
$('#reloadValue').val('');
location.reload();
}
});
</script>
Note: This can be done in the master page as well, thus working for all pages.
Session.Abandon();
Response.Redirect("~/Home.aspx");
after session abandon redirect to any page with session on it
and session should be like this
if (Session["anyhthing"] == null)
{
Response.Redirect("~/Login.aspx");
}
I downloaded a php/ajax comment script almost 2 years ago and been having this small issue since day one. I tried to contact the author, but he's no where to be found.
Sometimes when I click the "Send" button, the button stays disabled and nothing happens at all. It just continues to show the animated busy picture. I do not receive any error messages at all.
I'm wondering if any of you pros can help me with this?
Here is the relevant code :
<div class="comment_heading">Leave a Comment</div>
<div class="post_comment">
<textarea name="txtpostcomment" id="txtpostcomment-'.$postid.'" class="txtpostcomment"></textarea>
<button class="btnpostcomment" id="btnpostcomment-'.$postid.'" onclick="comment('.$postid.');" type="button">Send</button>
<input type="hidden" name="token" id="token" value="'.$_SESSION['token'].'">
<script>document.getElementById("txtpostcomment-'.$postid.'").focus();</script>
</div>
comment = function(postid1)
{
var txt = $('#txtpostcomment-'+postid1);
var btn = $('#btnpostcomment-'+postid1);
var comment1 = $(txt).val();
var token = $("#token").val();
$(btn).css('background-image', 'url(/comments/submit-busy.gif)');
$(btn).attr('disabled', true);
$.post("/comments/submit.php",{commenting:1, postid:postid1, comment: comment1, name: name, token: token},
function(msg)
{
if(msg.status)
{
$('.post_comment .error_msg').remove();
$('.comment-list-'+postid1).prepend(msg.html);
$(txt).val('');
$('.comChars').empty();
}
else
{
$('.post_comment .error_msg').remove();
$('.error_msg').clone().appendTo('.post_comment');
$('.error_msg:last').append(msg.error);
}
$(btn).css('background-image', 'none');
$(btn).attr('disabled', false);
$(txt).attr('disabled', false);
},'json');
}
It appears that your code is not checking for error conditions just in case the Ajax request fails (due to network disconnection, server error etc). Check your javascript console for any js errors. Since it is using $.post you might want to extend the code to add error handling if the jQuery version that you are using supports it. Or, alternatively, use $.ajax. For more info see http://api.jquery.com/jquery.post or http://api.jquery.com/jquery.ajax
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 understand the cross-domain error when using ajax to try to obtain information from another website but according to jQuery you should be able to use a jsonp request instead. I am stumped on how to achieve this when trying to display recaptcha. The issue is I am unable to use the plugin to achieve this, which would make it so much easier.
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
function showRecaptcha() {
Recaptcha.create("// removed for example", 'captchadiv', {
tabindex: 1,
theme: "red",
callback: Recaptcha.focus_response_field
});
}
jQuery(document).ready(function(){
showRecaptcha('recaptcha_div');
jQuery('#contact-form').submit(function(){
var challenge = Recaptcha.get_challenge();
var response = Recaptcha.get_response();
var ip = "<?php print $_SERVER['REMOTE_ADDR'] ?>";
var private = "// removed for example";
var requestUrl = "http://www.google.com/recaptcha/api/verify?privatekey=" + private + "&remoteip=" + ip + "&challenge=" + challenge + "&response=" + response;
jQuery.getJSON(requestUrl, function(json) {
alert("what");
});
})
});
</script>
<form id="">
// Form stuff
</form>
<div id="captchadiv"></div>
<input type="submit" name="submit" id="form-submit">
How should I call this to googles server and obtain the correct callback. It's basically going to return a true or false. I either get the infamous Access-Control-Allow-Login or or an error regarding plain/text. Anyone with suggestions?
1) Google does not support JSONP output. Why? Go to 2).
2) reCAPTCHA is meant to be validated on server side code. Why? Go to 3).
3) Spammers can easily bypass your client side validation code, thus rendering any CAPTCHA solution pointless.
You can try this way, Invisible reCAPTCHA
https://developers.google.com/recaptcha/docs/invisible
After the form submits, the progressbar appears, and the getProgress function is called. getProgress check a php file (which uses the uploadprogress apache mod to get the current upload progress) and returns a number from 0 to 100 (which means complete).
OK, The idea is that getProgress is self-executed if the number returned is not 100. Otherwise, the form continues to upload.php where the file is manipulated.
THIS IS WHAT IM LOOKING FOR: http://screenr.com/ByG <- video.
Here is the HTML part.
<form method="post" action="upload.php" enctype="multipart/form-data" id="UploadForm">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
<input type="file" name="file">
<input type="submit" name="submit" value="Upload!">
</form>
<div id="UploadBarContainer">
<div id="LoadBar"></div>
<div id="ProgressBar"></div>
</div>
Here is the jQuery part. Which seems to be broken
$(function(){
// This flag determines if the upload has started
var started = false;
// Start progress tracking when the form is submitted
$('#UploadForm').submit(function() {
//Update the flag to true.
started = true;
//Hide the form.
$('#UploadForm').hide();
//Show the progress bar.
$('#UploadBarContainer, #LoadBar, #ProgressBar').show();
//Start updating progress after a 2 second delay.
//This is to prevent the getprogress.php assume that upload is complete.
setTimeout(function () {
// We pass the upload identifier to our function
getProgress($('#uid').val());
}, 2000);
});
//Function used to get the current upload progress.
//It should be executed over and over again untill the result is 100.
function getProgress(id) {
//Get the current time.
var time = new Date().getTime();
//Make an ajax request to the server.
$.ajax({
//Pass the data trought GET method.
type: 'GET',
//Get the progress from this php file.
url: 'getprogress.php',
//Pass our upload identifier as a parameter and current time to prevent caching.
data: { uid: id, t: time },
//Get the results.
success: function (data) {
//Get the output as an integer.
var progress = parseInt(data, 10);
//If upload progress is not 100, change bar percentage and update again.
if (progress < 100) {
//Update the progress bar percentage.
//But only if we have started.
$('#ProgressBar').css('width', progress + '%');
//If we aren't done, update again.
getProgress(id);
}
}
});
}
});
Just i case this helps, here is the getprogress.php file called on the $.ajax request.
if (isset($_GET['uid'])) {
// Fetch the upload progress data
$status = uploadprogress_get_info($_GET['uid']);
if ($status) {
// Calculate the current percentage
echo round($status['bytes_uploaded']/$status['bytes_total']*100);
}
else {
// If there is no data, assume it's done
echo 100;
}
}
Any help is appreciated, i have a live demo but i scared about what you could upload.
only new versions of some browsers support file upload progress. You should check your net with firebug if getprogress.php send numbers or just errors.
You may look these:
http:
Server-side, get progress on sending file
may use swf swfupload
another jquery plugin: uploadify
Well finally i came to the conclusion it is not possible to get this working on webkit browsers such as opera, chrome and safari, not so on firefox and internet explorer.
Webkit browsers tend to block any ajax while a file is being uploaded.
You may want to check this out: https://bugs.webkit.org/show_bug.cgi?id=23933