I am working off this test page: http://www.comehike.com/test_fb_connect.php
When the user logs in using facebook, the system should call an ajax script. It happens when using Chrome, but not Firefox.
Here is the code from the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '***REDACTED***']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Live page for testing Facebook login and to learn how it works." />
<title property="dc:title">Facebook Login Test Page - Come Hike</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.comehike.com/img/ui/favicon.jpg">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css&2.8.2r1/build/base/base-min.css">
<link rel="stylesheet" type="text/css" href="../hike_layout.css"/>
<link rel="stylesheet" type="text/css" href="../menusystem.css"/>
<meta name="google-site-verification" content="RJcu8ObHW6huUbyea336xJ1WgLiC4478fz3_3r_zthc" />
<meta name="alexaVerifyID" content="-2hEyu8phk6CFHF-PTqdQvP2B8k" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<script type="javascript">
function loadfb()
{
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_EN/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<!--<body onload="loadfb();">-->
<body>
Array<br />
(<br />
[OPENID_AUTH] => <br />
)<br />
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '***REDACTED***',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true
});
FB.Event.subscribe('auth.login',
function(response)
{alert("login");
FB.getLoginStatus(function(response)
{
if (response.status == "connected")
{
FB.api('/me', function(response)
{
// alert ("First Name:" + response.first_name);
// alert ("Last Name:" + response.last_name);
// alert ("Email:" + response.email);
// alert ("Location name:" + response.location.name);
// alert ("Bio:" + response.bio);
// alert ("Id:" + response.id);
// <img src="https://graph.facebook.com/FBNeedsADontLikeButton/picture"/>
// Now need to go send an AJAX call :)
var url="/auth/facebook_login_ajax.php?first_name="+response.first_name+"&email="+response.email+"&last_name="+response.last_name+"&bio="+response.bio+"&location="+response.location.name;
alert("sending request");
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.open("GET", url , true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
var xmlDoc = request.responseXML;
}
location.reload(true);
}
request.send(null);
// Check if the request was successfull and refresh the page
});
}
else
{
// user not connected
}
});
});
FB.Event.subscribe('auth.logout',
function(response)
{alert("log-out");
// Now need to go send an AJAX call to log out :)
var url="/auth/facebook_logout_ajax.php";
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.open("GET", url , true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
//result = xmlDoc.documentElement.getElementsByTagName("result");
}
location.reload(true);
}
request.send(null);
// TODO: Check if the request was successfull and refresh the page
});
</script>
<div class="banner">
<!-- title and login/sign up go here -->
<a href="/"><div class="site_title">Hike!</div></a>
<div class="site_login">
<fb:login-button show-faces="false" perms="user_about_me,email,user_location" autologoutlink="true" width="200" max-rows="1">
</fb:login-button> |
<a class="login_link" id="login" href="/auth/log_in.php">Log in</a> |
<a href="/auth/create_profile.php">Sign up</a> |
<a href="/auth/forgot_password.php">Forgot Password</a>
</div>
</div>
<div class="nav_bar">
<!-- connect buttons and menu go here -->
<div class="nav">
<div class="icons">
<!--
<div id="fb">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="button_count" show_faces="false"></fb:like>
</div>
-->
<!--
<div id="badge">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
</div>
-->
<!--
<div id="tweet">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="comehike">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
-->
</div>
<div class="menusystem" id="site_nav">
<ul class="main_menu_ul">
<li class="main_menu_li"><a href="/community/support.php">SUPPORT</a>
</li>
<li class="main_menu_li"><a href="/community/search_hikers.php?all=yes&redirect=yes">COMMUNITY</a>
<ul class="child_menu_ul">
<li class="first"><a href="/community/search_hikers.php">Search Hikers</a></li>
<li><a href="/hikes/search_hiking_groups.php">Search Groups</a></li>
<li class="last"><a href="/hikes/start_hiking_group.php">Start Regular Hiking Group</a></li>
</ul>
</li>
<li class="main_menu_li"><a href="/hikes/search_hikes.php?all=yes&when=f&redirect=yes">HIKES</a>
<ul class="child_menu_ul">
<li class="first"><a href="/hikes/schedule_hike.php">Start Single Hike</a></li>
<li><a href="/hikes/search_hikes.php">Search Hikes</a></li>
<li><a href="/hikes/search_hikes.php?when=b&redirect=yes&all=yes">Past Hikes</a></li>
<li><a href="http://www.comehike.com/outdoors/parks/add_trailhead.php">Add Routes You Know</a></li>
<li class="last"><a href="http://www.comehike.com/outdoors/parks/trailhead.php">Trailhead Map</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- ************************************************* -->
<!-- the login overlay markup is hidden, will show if user clicks 'login' link -->
<div id="loginOverlay" class="yui3-overlay-loading" style="z-index: 100;">
<div class="yui3-widget-hd"><h3>Login</h3></div>
<div class="yui3-widget-bd">
<div>
<span>Email</span><input type="text" id="user_email"></input>
</div>
<div>
<span>Password</span><input type="password" id="user_pass"></input>
</div>
<div id="err"></div>
</div>
<div class="yui3-widget-ft">
<div class="btn" id="submit">Submit</div>
<div class="btn" id="cancel">Cancel</div>
</div>
</div>
<!-- ************************************************* -->
<!-- Main area of the page -->
<div id="layout2" class="content">
<div class="mainBody">
<div class="basic">
<p>
<h1><center>Test For Facebook Login</h1></center>
</p>
</p>
<br />
<p>
<center>
<script type="text/javascript"><!--
google_ad_client = "***REDACTED***";
/* 728x90, created 12/23/10 */
google_ad_slot = "***REDACTED***";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</p>
<div class="footer">
<p>Copyright (c) - 2011 Come Hike - All Rights Reserved |
<a href="http://www.comehike.com/about_us.php">About Us</a> |
<a href="http://www.comehike.com/contact_us.php">Contact Us</a> |
<a href="http://www.comehike.com/privacy_policy.php">Privacy Policy</a> |
<a href="http://www.nps.gov/index.htm">National Park Service Website</a>
</p>
</div> <!-- end footerdiv -->
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node','io','gallery-overlay-modal','event-key','json', function(Y){
var LOGIN_URL = "/auth/auth.php";
var LOGOUT_URL = "/auth/auth_logout.php";
var dlg = false,
elLogin = Y.all("a.login_link"),
elLogout = Y.all("a.logout_link");
var auth = function(){
Y.one("#err").set('innerHTML', '<img src="/img/ui/ajax-loader-bar.gif" alt="Authenticating..."></img>');
var u = Y.one("#user_email").get("value");
var p = Y.one("#user_pass").get("value");
Y.io(LOGIN_URL,
{
method:"POST",
headers: {
'X-Transaction': 'POST 1'
},
data: "user_email=" + u + "&user_pass=" + p,
on: {
success: function(id, o){
var o = Y.JSON.parse(o.responseText);
if(o.valid){
//dlg.hide();
window.location.reload();
}else{
if(o.error){
Y.one("#err").set('innerHTML', o.error);
}
}
},
failure: function(id, o){
Y.one("#err").set('innerHTML', "Authorization Error");
}
}
}
);
};
var hideLogin = function(){
if(dlg){
dlg.hide();
}
};
var onKey = function(e){
switch (e.charCode) {
case 13:
e.preventDefault();
auth();
break;
case 27:
e.preventDefault();
dlg.hide();
break;
}
};
var showLogin = function(e){
e.preventDefault();
if(dlg===false){
dlg = new Y.Overlay({
srcNode:"#loginOverlay",
width:"25em",
height:"17em"
}).plug(Y.Plugin.OverlayModal);
dlg.centered();
dlg.render();
var elSubmit = Y.one("#submit");
if(elSubmit){
elSubmit.on("click", auth);
}
var elCancel = Y.one("#cancel");
if(elCancel){
elCancel.on("click", hideLogin);
}
Y.on("key", onKey, "#loginOverlay");
}
Y.one("#user_email").set("value",'');
Y.one("#user_pass").set("value",'');
Y.one("#err").set('innerHTML', '');
Y.one("#user_email").focus();
dlg.show();
};
if(!Y.Lang.isNull(elLogin)){
elLogin.on("click", showLogin);
}
var logout = function(e){
e.preventDefault();
Y.io(LOGOUT_URL,
{
method:"POST",
data: "logout=true",
headers: {
'X-Transaction': 'POST 2'
},
on: {
success: function(id, o){
window.location.reload();
},
failure: function(id, o){
window.location.reload();
}
}
}
);
};
if(!Y.Lang.isNull(elLogout)){
elLogout.on("click", logout);
}
});
</script>
</div> <!-- Closing basic -->
</div> <!-- Closing main body -->
</div> <!-- Closing layout 2? -->
</div> <!-- Closing the body of this thing -->
</body>
</html>
you are trying to call cross domain ajax request. but it is prevented by several browsers because of the same origin policy. to overcome this you can follow these steps.