since April 5th, 2012 we are experiencing problems with the facebook comments plugin on our video page.
We are loading new content and facebook comment tags via ajax, and then calling FB.XFBML.parse() to update the comments plugin and like button. This has worked fine in the past, but now the comments are not updating properly anymore.
The comments do load, but the loading animation of the plugin never disappears and the height of the comments doesn't get adjusted.
Here's the console output when the error occurs:
Permission denied to access property 'fb_xdm_frame_http'
Permission denied to access property 'fb_xdm_frame_https'
Steps to reproduce the problem:
1. Please visit http://www.landwirt.com/Videos
2. Select a new video from the list on the right
3. Take a look at the facebook comments plugin at the bottom
Note: comments are working fine on initial page load, the problem occurs only when new content is loaded via ajax
It looks like a bug in the facebook API, but maybe we're just doing something wrong?
Any help would be greatly appreciated!
i've noticed the same change after moving from:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
syntax in body to:
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
in head. It appears it needed change to
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID"></script>
and works now fully.
Related
I've integrated reCAPTCHA v3 in one of my forms. In onload, there's a token produced and google captcha logo in the bottom right corner. But when I submit the form, in console there is an error shown, "Error: No reCAPTCHA clients exist". Also, it seems, no data is fetched by "g-recaptcha-response" and $_POST["g-recaptcha-response"] remains empty.
Here is the sample code:
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
It doesn't produce any "g-recaptcha-response" when the form is submitted.
I don't know much about google reCaptcha. I've followed the documentation provided by them and used a site and a secret key in the proper way.
Can anybody please tell me where might be the problem and what is the possible solution?
I believe this error occurs when the reCaptcha api.js loads, but your container is not present on the page yet (at least for v2). I had this error occur in a React app when I navigated to the page rather than loading it as the first on. Instead of using render=explicit and using a global namespace onLoadCallback, I was able to resolve it by rendering the captcha element manually.
Instead of creating a <div class="g-recaptcha"></div>, give the container div an id only (<div id="recaptcha-container"></div>) and render it in your JS code (e.g. in componentDidMount for a React app):
grecaptcha.ready(function() {
grecaptcha.render("recaptcha-container", {
"sitekey": "your-site-key"
});
});
Have you tried loading the script before trying to send the request?
<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render=site_key"></script>
<script type="text/javascript">
var ReCaptchaCallbackV3 = function() {
grecaptcha.ready(function() {
grecaptcha.execute("site_key").then(function(token) {
console.log("v3 Token: " + token);
});
});
};
</script>
When I came across this problem with reCAPTCHA v3, it was because I didn't pass it the correct site key.
This also happens in Recaptcha 2 before user interacts with it. So, I have a submit button that triggers a JS function that checks the value of recaptcha. To solve the no client exists problem, I did:
try {
data["reCaptcha"] = grecaptcha.getResponse();
} catch (err) {
data["reCaptcha"] = "";
}
The data object then gets sent to a back-end script that validates the recaptcha. The back-end also checks for the field being empty.
I had this problem because I was calling grecaptcha.reset(); when there wasn't any Recaptcha active on the site
grecaptcha.reset();
recaptcha__en.js:507 Uncaught Error: No reCAPTCHA clients exist.
at MX (recaptcha__en.js:507)
at Object.Zn [as reset] (recaptcha__en.js:514)
at <anonymous>:1:13
I was using React and only rendering my captcha container sometimes. Fixed by hiding the captcha button instead of not rendering it.
In my case grecaptcha.reset(); was present from previous code snippet, and I was programmatically invoking it.
As the captcha verification is going on the fly every time. Resetting wasn't required.
After eliminating this grecaptcha.reset(); my code works perfectly fine.
Maybe this hint can help someone.
We received this because we have a second environment with another domain and forgot to add this domain to the reCaptcha admin site. The solution was to add the new domain to the settings.
The steps are
Open www.google/recaptcha/admin/site
Select the site you're working on
Click on the settings gear
Add the domain in its respective section
Facing multiple issues with IE 8 (detailed version 8.0.7601.17514). Please note everything works fine in other browsers.
Yammer embed my feed control is not working. Sometimes it shows result and sometimes not.
REST API call not working and giving error as below. However I used new js sdk and new yam.platform.request.
Error is : yam.request is null or not an object. source : platform_js_sdk.js
Thanks in advance for your help!
I found out that the div that you embed yammer feed has to be above the yammer request script
eg.
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
yam.connect.embedFeed(
{ container: '#embedded-feed',
network: 'fourleaf.com' // network permalink (see below)
});
</script>
Otherwise, IE will not be able to find the div to show the feed (but chrome works fine..)
I want to show a warning on a particular page I have if and only if the user is using IE 7.
I am currently seeing an issue where if the user is using IE 8 in compatibility mode they are seeing this warning message, the logic is as follows:
Please note: Some customers using Internet Explorer 7 web browser may not be able to use parts of this site. You may wish to upgrade.
How can I fix the page so that the customer is only shown this warning if they are really using IE7?
The specifics depends on the web framework in use (asp.net etc), but you can check the browser version by checking the user agent submitted by the browser. Each browser will have a unique user agent that includes the version number as well. The user agent will be in the http request.
Here's a link with a few options if you're using asp.net
http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx
<script type="text/javascript">
var $buoop = {vs:{i:7,f:5,o:12,s:5,n:9}};
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "//browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
I have tried to use Diqus comment system in my site using ajax to load the article and comments and i couldn't make it work.
I use jQuery and i load the whole article (comments included) with the action ".load".
I am using the code they provide in their site for this cases:
http://docs.disqus.com/help/85/
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "newidentifier";
this.page.url = "http://example.com/#!newthread";
}
});
I really don't know what i am doing bad. My code is this one:
$(".cargaAqui").load("http://"+ document.domain + "/myArticle"+id, function() {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "myArticle" + id;
this.page.url = 'http://' + document.domain +'/view-'+ id+'#!newthread';
}
});
Any idea what's wrong?
Thanks
I've made a basic template with working DISQUS 2012 comments loading with ajax via jquery-pjax.
DISQUS 2012 does not work with DISQUS.reset yet, but they're working on it.
If you need DISQUS.reset to reload comments after ajax loading content, you'll need to turn off 2012 features in DISQUS admin.
[UPDATE:] DISQUS.reset has since been implemented in DISQUS 2012, so the workaround above is not really necessary. However, push state combined with DISQUS.reset work really well together.
I agree with Adam. Disqus script tags accumulate. I did that :
var head = document.getElementsByTagName('head')[0];
head.removeChild(head.lastElementChild);
Put it just before the DISQUS function.
It works perfectly for me, because Disqus script tag is at the end of head. I run firebug again in Chrome, and Disqus script tags didn't accumulate any more.
im beginning with Ajax, i have problem with including Ajax files.
Ajax code written in original page (like index.php) and placed in (head) section works fine, but when i try to place code in external file (in js folder, where is placed prototype.js file), i don't get any response, not even in Firefox Error Console.
I haven't changed Ajax code except url for calling PHP function.
edit:
calling ajax files:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/myValidation.js"></script>
</head><body>
....
Username: <input type="text" name="uname" id='uname' />
Available?
<span id="result"></span>
Email address: <input type="text" name="email" />
...
I embaded this function call in html. Validate function is from book "PHP and Script.aculo.us Web 2.0 app interfaces"
myValidation.js
function Validate(){
var user=$('uname');
var name="uname="+user.value;
var pars=name;
new Ajax.Request(
'myValidation.php',
{
method:'post', parameters:pars, asynchronous:true, onComplete: showAvailable
}
);
}
function showAvailable(originalRequest){
var newData=originalRequest.responseText;
$('result').innerHTML=newData;
}
This example is from mentioned book
You haven't shown us your myValidation.js file, but here are the typical reasons I see when people move from inline script blocks to external files and things stop working:
They put script blocks in the external JavaScript files. You probably didn't do that, but I've seen it often enough to mention it. Your external script is pure JavaScript, so for instance it should be:
function Validate() {
// ...
}
not:
<script type='text/javascript'>
function Validate() {
// ...
}
</script>
I've seen the latter a fair bit.
They put the JavaScript file in a location that doesn't match their script tag src.
They left an opening <!-- or closing --> in the script. Important not to do that, in external JavaScript files those are syntax errors.
They're using a web server that's case sensitive and the src attribute and the file's actual name don't match.
They're using a web server sensitive to permissions and the file doesn't have the right permissions.
In the case of the last two above, it's easy to check: Just open a new tab and actually enter the URL of the JavaScript file. If you see the JavaScript, great; if not, you probably have more information.
For issues like this (and hundreds of others), there's nothing like having a decent toolset. For debugging JavaScript on browsers, there are quite a few. There's Firebug (a Firefox add-in), Chrome's and Safari's Development Tools (built into the browsers), Microsoft Visual Studio or Script Debugger for debugging with IE, etc. Firebug and Dev Tools would both tell you about broken src links, as well as any exceptions, etc.
Have you checked that those files are accessible from the HTML code? And more - have you placed you scripts in the bottom of the page - because AJAX will bind it's handlers only to existing elements?
Problem solved.
In /js/ folder i had one php file, that i put there just because of simplicity. After moving it to other location all worked. Don't know if that is rule, nut no php files in /js/ folder. Thanks T.J and Tomasz