Search code examples
phpjavascriptfacebookjsonfacebook-iframe

Passing a JavaScript Value to a PHP Variable (With Limitation)


I understand that there are existing questions and answers that have already addressed this matter. I've looked through them but my situation doesn't allow me to apply the solutions offered in these threads.

Given that JavaScript is client-side and PHP is server-side, these are the 2 solutions offered:

GET/POST Method (Post #3)

AJAX Method


Limitation: Facebook Page Tab Application

I cannot use the above methods of passing parameters through URL as Facebook Page Tabs are loaded in an iFrame, they don't have access to query string. Facebook provides a workaround by using the app_data GET parameter in Facebook signed_request object together with JSON encoding.


Solving the Limitation: Using app_data GET Parameter

I'm able to pass parameters to the same page by loading the same page again but I'm still only dealing with PHP variables and values.

fer.php

<?php
$appData = array();
if (!empty($signedRequest) && !empty($signedRequest['app_data'])) {
    $appData = json_decode($signedRequest['app_data'], true);
}

echo '<pre>' . print_r($appData) .'</pre>';
//prints Array ( [lat] => 123 [lon] => 456 ) when fer.php reloads

$params = array(
'lat' => '123',
'lon' => '456'
);

$encodedParams = urlencode(json_encode($params));

$tabUrl = 'http://www.facebook.com/pages/FACEBOOK_PAGE/367117263337064?sk=app_433576149993619';
//$tabUrl will open fer.php

$linkUrl = $tabUrl . '&app_data=' . $encodedParams;
?>
...
function loopPage() 
{
        top.location = "<?= $linkUrl ?>";
        //reloads fer.php
} 

Reference: http://labs.thesedays.com/blog/2011/06/23/query-strings-for-facebook-page-tabs/


Also Tried:

Cookie Method (Dropped as I'm still only dealing with PHP variables and values)

Using JavaScript encodeURIComponent() and encodeURI() (Wrong approach as these methods encode the whole URL and the parameters passed over are not recognized by json_decode)

Currently Trying: JSON with Ajax (XMLHttpRequest)

Send JSON data from Javascript to PHP?

How to pass data from Javascript to PHP and vice versa?


What I'm really trying to achieve:

PHP variables getting JavaScript values in the same page in a Facebook iFrame. It is all right for the page to reload to pass parameter to itself.

fer.php (Wrong Example)

function someValues(){
    varA = 123;
    varB = 456;
}

<?php
    $cupA = varA;
    $cupB = varB;
?>

I've been trying to solve this problem for days and I'm going nuts to the extend that I even try to trick json_decode by adding % to my data before appending it to a redirect URL =x I really appreciate any help or direction given. Thanks!


Solution

  • It's still not clear whether you want to:

    1. pass data that you receive in PHP via app_data to JavaScript, or

    2. pass data from JavaScript to PHP.

    Pass data from PHP to JavaScript

    <head>
    <script type="text/javascript">
    var app_data = <?php echo json_encode($appData); ?>;
    </script>
    </head>
    <body>
    ...
    

    Pass data from JavaScript to PHP

    $.ajax({
        url: location.pathname, // current page
        type: 'POST',
        data: {
            vara: 'hello',
            varb: 'world'
        },
        success: function() {
            // ...
        }
    });