Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.

First of all, I would like to thank you for the time you spend to read my post.

I am trying to add Facebook Javascript SDK to a web page and when user logged in, the user data will be saved into mysql using php.

I almost can kind of figure it out how to insert PHP variable data in MYSQL but as this is first time I'm using Javascript language then I am total new :(

To make the story short what I am really looking forward is that someone kindly show me in a simple webpage following things:

1- Webpage starts and checks if the user had been logged into Facebook and also if the user logged into the app (gave permission to the app to have access to the user basic profile info and Email)

2- If the user is not logged into Facebook user will be redirected to the Facebook login page or if user did not give permission to the App yet, it is asking for the necessary permissions.

3- If the user passed the first two stages(user successfully connected), the page will display the following message "Hello dear $User_Facebook_Name".

$User_Facebook_Name is a PHP Variable passed by Javascript from Facebook Javascript SDK

I would like not to use Submit button to pass the Javascript variables to PHP (The website page doesn't refresh).

I prefer to use Facebook Javascript SDK, PHP, Jquery(Ajax) for this issue.

So far I have the following codes and the page displays the message but using Facebook Javascript SDK like this :

FB.api(uid, function(info) {

$('#welcome').html("Hello dear " + info.name );

index.php

<html>
<head>

  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="js/myscript.js"></script>
  
</head>
  
<body>
  
  <div id="fb-root"></div>
  
  Hello dear <?php> echo "$user_Facebook_Name"; ?>
  
</body>
</html>

myscript.js

      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'App_ID',
          xfbml      : true,
          version    : 'v2.1'
        });
	
	
	
	//Next, find out if the user is logged in
			
	FB.getLoginStatus(function(response) {

  if (response.status === 'connected') {
    // the user is logged in and has authenticated your

    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
	
	
	FB.api(uid, function(info) {
    
	$('#welcome').html("Hello dear " + info.name );
	
      });
	
	
	
  } else if (response.status === 'not_authorized') {
    // the user is logged into Facebook, 
    // but has not authenticated your app
	
	var oauth_url = 'https://www.facebook.com/dialog/oauth/';
      oauth_url += '?client_id=App_ID'; //Your Client ID
      oauth_url += '&redirect_uri=' + 'http://website.com/'; //Send them here if they're not logged in
      oauth_url += '&scope=email,user_friends';

      window.top.location = oauth_url;
	
	
	
	
	
  } else {
    // the user isn't logged in to Facebook.
	
  }		//Response.status
 });	// Get login status		
}; //FB Async
	  


	  
	  
// Load the JavaScript SDK Asynchronously
      (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/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
	   
	   

Any help would be really appreciated and would like to thank you in advance.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

I'm not 100% sure I understand your question, but what it seems like you're saying is that once you get the the point where you want to submit something back to the server (PHP code), you want to do it asynchronously via jQuery's $.ajax() method? If so, you can still use a submit button without refreshing the page. Just wire up an event listener to the button to make an AJAX request when it is clicked

HTML:

<form id="theForm">
    <input type="text" id="textBox" name="textBox" value="textBox" />
    <input type="text" id="userName" name="userName" value="userName" />
    <input type="button" id="submitBtn" value="Submit" />
</form>

JS:

$('#submitBtn').on('click', function() {
    var formData = $('#theForm').serialize();
    $.ajax({
        url: 'something.php',
        data: formData,
        success: function (data) {},
        error: function() {}
    })
});

Even better, if you want your data serialized into an array of objects rather than a query string, you can use .serializeArray() instead. But PHP should be able to read all the values from the query string as long as you have names associated with your form elements. Then whatever you send back from PHP will be contained in the data variable of your success function. And this will all execute without a page refresh.

If you don't want to use a button at all, I supposed you could use setTimeout() so it would just send an AJAX request every X milliseconds or somehow check if changes are made on your page, but that could get pretty complicated. I would say keep it simple at this point.

EDIT: After getting more information from your comment, the answer is even simpler than above. Still, all you're doing is making an AJAX request inside your FB.api() function:

FB.api(uid, function(info) {    
    $('#welcome').html("Hello dear " + info.name );    
    $.ajax({
        url: 'something.php',
        data: info,
        success: ... ,
        error: ...
    });
});

From there, you just grab the variable from the form variable in PHP. My PHP is a little rusty, but I believe it would be something like $_POST["info"]. Trying to redisplay it without refreshing the page is completely pointless because you already have the variable in the page. The only point of sending the username off to the server is to save it in the database. You've already displayed it on the page through the API.

share|improve this answer
    
Hi, Mike, Thanks for your answer. What I want to do is I have this line of code: $('#welcome').html("Hello dear " + info.name ); it displays a Javascript message : Hello dear 'user_Facebook_Name' I want to pass and display it in php. –  Doli Df Nov 13 '14 at 14:37
    
So you're getting a username from the Facebook API and you want to send it the server to display it? –  Mike Young Nov 13 '14 at 15:29
    
Yes, exactly :) In the same page. And I don't want to refresh the page for example I don't want to go to another page. –  Doli Df Nov 13 '14 at 15:35
    
In more simple way this is what I want help with: In the webpage we have this Javascript variable: var Name = "Mike"; Now I want in the same page this php code to work: echo $Name; and the result would be Mike. All are in the same page and without refresh or going to another page. –  Doli Df Nov 13 '14 at 15:55
1  
Thanks a lot Mike, it's not the exact answer but I think that you are right, now I kind of understood the whole process and the only thing is that I work a bit to understand Ajax. Thanks again for your help and support and hope you have a great time, your help is really appreciated. –  Doli Df Nov 13 '14 at 19:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.