Facebook UI Message Friend Dialog - facebook

Hi Guys just wondering if you could help, I have a page in C# that should when a button is clicked show the friends dialog to send an information out to them to start using an application.
However I'm having a problem with FB.UI trying to get a modal iframe displaying of the friends list.
Basically it attempts to open the modal iframe it shows the blue facebook frame but no data then after 5 seconds it closes.
can any one help
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPages/Main.master" AutoEventWireup="true" CodeFile="CompetitionPanel.aspx.cs" Inherits="CompetitionPanel" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '123',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
session: '<%=CurrentSession.AccessToken %>'
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<script>
function test() {
FB.ui({method: 'apprequests',
message: 'You should learn more about this awesome game.',
data: 'tracking information for the user',
display: 'iframe'
},
function (response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
return false;
}
</script>
<div id="fb-root"></div>
<div class="container">
<div class="left">
<h2>WANT TO WIN FREE KIT?</h2>
<p>
Suggest your friends. At the end of the week, you'll be entered into a prize draw to win free kit. The competition resets every week.
Simple.
</p>
<asp:Button runat="server" ID="btntest" OnClientClick="Javascript:test();"/>
</div>
<div class="right"></div>
</div>
</asp:Content>
Thanks in advance.

When I tested this code it looks like your button is doing a postback. so I changed
<asp:Button runat="server" ID="btntest" OnClientClick="Javascript:test();"/>
to
<asp:Button runat="server" ID="btntest" OnClientClick="return test();"/>
This stoped the postback from happening but the Dialog never populated just like you mentioned in your post.
I am not sure why but it looks like Facebook does not like the return false in your test function so I tried this
<asp:Button runat="server" ID="btntest" OnClientClick="Javascript:test();return false;"/>
and in the test function I commented out the retrun false.
//return false;
This worked but it was very slow to populate. After some testing it looks like the slowness was dew to the Script section that the function test was in was inside the asp form and on this page I had a script manager so I moved that script section outside the form and it populated a bit faster.
Hope this helps
Cheers

Related

After login into my website protractor unable to find next element

This code for after login user should post some hello message.
describe("launching Telekha",function(){
it("navigating to signin page",function(){
browser.get("www");
element(by.model("credentials.email")).sendKeys("abnsd6#gmail.com");
element(by.model("credentials.password")).sendKeys("123456");
var ptr = element( by.css('[ng-click="login()"]') );
ptr.click();
});
it("on dashboard",function(){
element(by.model("post.postText")).sendKeys("hello");
element( by.css('[ng-click="postit()"]') ).click();
});
});
HTML code for the button
<textarea id="post-editor" placeholder="Tell your friends" ng-model="post.postText" class="textareanoborder col-xs-12 col-md-12 ng-pristine ng-valid ng-isolate-scope ng-touched" autocomplete="off" aria-invalid="false"> </textarea>
This is a guess, but from experience it usually isn't far off. When the page you are navigating to is loaded, are there any animations, AJAX requests or other delays, separate from AngularJS that might be occurring? Protractor does not wait for these and will execute the code:
element(by.model("post.postText")).sendKeys("hello");
as soon as it can. If when this is executed, all the animations have not yet been completed, you element will not be visible to protractor and you'll see the error you've encountered.
To quickly test this, add a browser.sleep(10000); before the line where it's failing. browser.sleep(); is a command that will force the browser to wait for a set amount of time, in this case 10.000 milliseconds (10 seconds).
If this does end up working, you might want to change it to something more elegant such as:
browser.wait(function() {
return element(by.model("post.postText")).isPresent();
}, 10000);
Which will wait for your element to become visible, but only for a maximum of 10 seconds, after which it will continue anyway.
EDIT1: (which works fine):
HTML (Serving from http://localhost:8080)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="bower_components/angular/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
});
</script>
</head>
<body ng-app="app" ng-controller="myCtrl">
<textarea id="post-editor" placeholder="Tell your friends" ng-model="post.postText" class="textareanoborder col-xs-12 col-md-12 ng-pristine ng-valid ng-isolate-scope ng-touched" autocomplete="off" aria-invalid="false"> </textarea>
</body>
</html>
spec.js
describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('http://localhost:8080');
$("#post-editor").sendKeys("testlol");
browser.sleep(2000);
});
});
conf.js
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
};
You can implement protractor.ExpectedConditions.visibilityOf() method to wait until element is visible on UI and then send data to input field.
var EC=protractor.ExpectedConditions;
it("on dashboard",function(){
var ele=element(by.id("post-editor"));
browser.wait(EC.visibilityOf(ele),8000,'Ele is not presented');
ele.sendKeys("hello");
element( by.css('[ng-click="postit()"]') ).click();
});

Ajax form submit, validate and return success or fail

Searched and browsed the forum and tried many examples of ajax and form submission but can't get anything close to work for what I am trying to achieve. I must admit I've been going in circles for days with this and need someone with a fresh pair of eyes.
I have 2 pages:
page1.php
page2.php
Using Google jquery/1.9.0/jquery.js and developing this locally.
page1.php is as follows (I've omitted the head script and body/html tags for clarity)
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "page2.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#done').fadeIn('slow');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
<input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>
Page2.php
Has a mysql query that checks the database for the checkname and echoes 'success' or ' fail' depending upon the result. The query runs fine and is not showing any error.
When the form is submitted page2.php loads and just shows 'success' in the browser.
Firebug also shows success under both response and html. There are no errors within firebug.
I basically want page1.php to stay and for the #address div to hide and the #done div to show when success is passed from page2.php
Hope someone can help.
Update
I tried this test page:
ajaxone.php
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#payment').fadeIn('slow');
alert('ok');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>
<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
<input name="name" type="text" id="name">
</p>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>
ajaxtwo.php
print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}
Using the above firebug shows the following error:
Array ( )
Undefined index: name
fail
However, when I remove the ajax call the submit works and the data is passed.
So, am I right to assume that if you do not specify the form variables within the ajax call nothing is posted to the next page?
Update 2
Sorry I'm answering myself here.
It does appear that you need to specify the form data to send within the ajax call.
I've just added:
$('#theForm').serialize();
within the ajax call and now the form submits without an error.
However, this still goes to ajaxtwo.php and does not show the success or fail on the ajaxone.php page.
So my next stage is to get the success or fail to show on ajaxone.php
You need to add id="theForm" in the form tag itself.
Example:
<form action="page2.php" method="post" id="theForm" name="theForm">
I would say, add a and then make jq read the output and then redirect accordingly, or use php to redict based on $success_fail result.

Facebook Requests Dialog appears behind DIV (in Safari)

I have several DIVs with z-indexes (like: z-index: 999991;). In Safari, this results that the Requests Dialog I have created appears behind some DIV's.
Is their a way to give the Requests Dialog a z-index or something so it will always appear on top of every DIV?
My Requests Dialog code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<p>
<input type="button"
onclick="sendRequestViaMultiFriendSelector(); return false;"
value="Send Request to Many Users with MFS"
/>
</p>
<script>
function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'Join me on Mahjong Solitaire!',
exclude_ids: '<?php echo $friends_array; ?>'
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
}
</script>
Hope this is possible!
Made the z-index smaller and this indeed worked!

Facebook user with FB('/me',function(user){ }) not recognized

I'm dealing with this error couple of days.
It used to work fine the same code, but now I'm stuck with this error. I've changed a host since then. Maybe Could be that?
When I log in with my Facebook account, and the application is approved, I still can't retrieve user id and other default data.
Here is the script, please suggest anything:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://www.oneslike.me/js/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
FB.init({
appId : 'YOUR API KEY HERE',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload(); //When logged reload
});
FB.api('/me', function(user){
if(user.id!=null){
alert("Logged user with FB_id: "+user.id);
$("#login_div").hide(); $("#data_div").show();
var user_data = '<img src="http://graph.facebook.com/'+user.id+'/picture"><br/>'+user.name+'';
document.getElementById('data_div').innerHTML(user_data);
}
else
{
alert("Not logged user");
$("#login_div").show(); $("#data_div").hide();
}
});
});
</script>
<div id="login_div" style="display: none;">
<fb:login-button data-scope="user_birthday">Login with Facebook</fb:login-button>
</div>
<div id="data_div" style="display: none;">
</div>
It might be that FB.init() has not finished loading and initializing the session when you call FB.api()? I ran into a similar issue. What fixed it for me was wrapping my FB.api() call in FB.getLoginStatus(), like so:
FB.getLoginStatus(function(response) {
FB.api(function(response){ });
});
It seems to delay/make sure the session is properly initialized before calling the API. I hope it works for you too.

changing facebook login button type

Currently I have the following button, when using facebook javascript:
and I want to get this one:
What should I change?
Currently the way I did this is using the following code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Login with Facebook</fb:login-button>
With Facebook PHP-sdk you can replace it with any button or icon
<?php if ($me) { ?>
<img src="logout-image.png">
<?php } else { ?>
<img src="login-image.png">
<?php } ?>
Or http://fbrell.com/xfbml/fb:login-button
For that particular button, you will have to include the image yourself and bind the functionality with one of the SDKs available:
http://developers.facebook.com/docs/sdks/
I personally prefer using the JS SDK to open the login prompt.
You can use regular login button, which is the approach that #MNVR has described in his answer.
Just replace the text "Login With Facebook" with "Connect With Facebook" in your login button code. Or use the below code.
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<fb:login-button>Connect with Facebook</fb:login-button>
<script>
FB.init({
appId: '123456',
cookie: true,
status: true,
xfbml: true
});
</script>