Facebook dialog content doesn't move window to screen - facebook

I'm trying to pop open an apprequests dialog using the following cod:
$("#fbInviteButton").click(function(){
FB.ui({
method: "apprequests",
message: "Test"
};
});
When the button is clicked, a box pops up with the loader and just sits there. In the developer console in Chrome, I can see the ajax request complete and content come back.
When I look at the HTML source, I see the other dialog (class: "fb_dialog fb_dialog_advanced"), with populated content, and when I toggle the CSS for that window:
top: -10000px
the dialog with content comes into view.
So for some reason, when the content is loaded, it doesn't pop into place and replace the loader. Any idea what would cause this?
The application is Ruby on Rails using the Asset Pipeline.

I believe a bug in Facebook's JavaScript SDK causes this problem. I am currently using an older version of SDK taken from here as a workaround.

Related

Enable browser action for an event in Google chrome

I am writing a chrome extension for capturing the URL. This is the code for my js file.
chrome.tabs.getSelected(null, function(tab) {
myFunction(tab.url);
});
function myFunction(tablink) {
alert(tablink);
}
Now i can get the URL alert for the page by explicitly clicking on the browser action. I need it to popup the alert whenever i click on any tab in my browser.
Could you please let me know how to proceed with this?
PS: I am sure i have to use some kind of event listener.
chrome.tabs.getSelected is deprecated since Chrome 33. Use chrome.tabs.query instead if needed.
Base on your need to make popup the alert whenever you click on any tab in your browser. You can use chrome.tabs.onActivated.addListener.
The code I created is as below and it works with me. It popup the alert of current page's url whenever you click on any tab in your browser.
chrome.tabs.onActivated.addListener(function(activeInfo) {
//alert("popup");
chrome.tabs.get(activeInfo.tabId, function(tab){
alert(tab.url);
});
});
Also keep in mind to add "permissions": ["tabs"], in your manifest file since it requires access to the url. See here:https://developer.chrome.com/extensions/tabs

Facebook flash hiding not working on IE

I'm working on a FB canvas app using Flash with 3D graphics. I must embed my SWF with param wmode="direct".
According to FB documentation, when using wmode="direct", FB hides the flash object when displaying a popup/dialog (buy credits, chat, notifications, etc.) and after the popup close, it shows the flash again.
On Chrome and Firefox it works, but on IE, after the dialog closes I checked the flash element style and I saw that visibility=visible, but still the flash is still hidden!
I tried several approaches, all with same result:
Not using "hideFlashCallback" on FB.init (let FB do it
automatically)
Using "hideFlashCallback":
function onFlashHide(params) {
if (params.state == 'opened') {
hideFlash();
FB.Canvas.hideFlashElement(params.elem);
} else if (params.state == 'closed') {
showFlash();
FB.Canvas.showFlashElement(params.elem);
}
}
function hideFlash() {
$('#flashContent').css('visibility', 'hidden');
}
function showFlash() {
$('#flashContent').css('visibility', 'visible');
}
Thanks!
Roei
UPDATE:
Another reference to FB documentation: http://developers.facebook.com/docs/appsonfacebook/tutorial/#flash
I had the same problem with IE when calling the FB.ui functions. The Facebook dialog would open, but when closed Flash would not come back.
I found a trick which solves this. Before calling to the FB functions, use javascript to set focus to a different HTML element. After that, the Flash object became visible again when I was done with the Facebook dialog.
// IE9 has a problem where the Flash object won't regain
// focus if it has focus when the FB UI is called. To fix this,
// We'll redirect focus before the call.
var lFocus = document.getElementById('focus_target');
lFocus.focus();
Hope this helps.
Have you tried using display: none; and display:block instead of visibility: hidden and visibility: visible? In past projects I have noticed that IE sometimes has trouble with the visibility CSS property...

bookmark button fails to load the canvas

when using my app bookmark button that is displayed in the top right of any canvas application interface (apps.facebook.com), I don't get my app loaded/reloaded in the iframe, the iframe show the "loading" animation but ends void with only the facebook footer
the link of the bookmark is correct: it will load successfully the app if pasted in a new browser window; the URL of the apps.facebook.com interface change to the correct URL clicking the bookmark but the application is not loaded, but forcing a reload of the whole browser page the app is correctly loaded... it seem that the iframe loading fails but not the js URL edit
I'm puzzled because checking my server log I don't catch any request from facebook for the canvas page, therefore it is failing before
anybody has observed any similar behaviour?
As Claudio Felicioli figured it, you must set the App Namespace.
https://developers.facebook.com/apps/
On the left, Click on your application
Click Edit Settings
Type information for App Namespace
Click Save Changes

nyroModal v2: How to validate form opened in iframe?

I'm trying to figure out how to validate a form opened using nyroModal.
The page is being opened as below on click of a button:
$(function() {
$('.btnedit').click(function() {
$.nmManual('form_page.php);
});
});
On the form that opens up, I have a few fields that are mandatory and a cancel & submit button.
<a class="nyroModalClose button" href="#" id="btn_submit">Submit</a>
On clicking of the submit button, I want to make sure the mandatory fields have value. If no, an error message should be displayed & the modal window should not close.
I'm trying to use the jquery validation plugin, but without success. The modal window always closes irrespective of the validation scripts.
I haven't found much info regarding form validation in a modal window. Is this not a preferred approach?
Thanks in advance.
I'm not able to help you about the jquery validation plugin in a modal window, but I know that using the instruction $.nmManual in that way, the form will not be placed inside the iframe tag, and if I remember correctly the content of new page will be added without header and body tags, so in a word incorrectly. I guess this can produce no validation.
To successfully open an iframe you need to use filters as described here:
Open iframe manually in nyroModal?
I hope this can help you.

How can I hide like button or div from Firefox?

I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps