I'm working on a site that is using Facebook Connect
and recently made some changes so that the main pages are cached
and if you are not logged in (checked with an ajax call) it loads the Facebook Connect javascript
and renders the connect button into the page. This works perfectly everywhere except
Internet Explorer 7
and 8. The weird part is I render the buttons into a hidden Sign Up / Sign In form
and when you show either of those the Connect buttons appear. You can take a look here
and you will see the button in Firefox
and not
Internet Explorer. If you click Sign In the button will show up.
This is a Rails app so on the server-side we're responding to an ajax call with rjs like this:
page['signin-status'].replace(:partial => "common/layout/signin_menu")
page.select('.facebook-connect').each do |value, index|
value.replace(render(:partial => '/facebook/signin'))
end
page << <<-eos
LazyLoader.load('http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php', function(){
FB.init('#{Facebooker.api_key}','/xd_receiver.html');
});
eos
The first line is replacing the header, the second is the Connect buttons in the Modal dialogs. The partial being rendered into the header looks like this:
<span id='signin-status'>
<%= fb_login_button(remote_function(:url => "/facebook/connect"))%> |
<%= link_to_function "Sign In", "showSignInForm();", :id => "signin" %> |
<%= link_to_function "Sign Up", "showSignUpForm();", :id => "signup" %>
</span>
The Partial being rendered into the Modal dialogs looks like this:
<div class='facebook-connect'>
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;" ></div>
<label>Or sign in with your Facebook account</label>
<%= fb_login_button(remote_function(:url => "/facebook/connect"))%>
</div>
I find it very strange that showing the Modal dialog causes all the icons to show. Does anyone have any ideas or suggestions about what's going on?
