фейсбук используя каркас jquerymobile - PullRequest
0 голосов
/ 11 октября 2011

Я пытаюсь реализовать основные функции Facebook, такие как обновление профиля Facebook, а также вход в Facebook с использованием фреймворка jquerymobile.По этой ссылке http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/

Отлично работает с форматом HTML 5.Но когда я интегрируюсь с JqueryMobile, я получаю сообщение об ошибке Uncaught: метод cant call appendChild.

Я вставлю код сюда: пожалуйста, посмотрите и дайте мне знать, в чем проблема.*

<body> 
<script type="text/javascript">
window.fbAsyncInit = function() {

                FB.init({appId: 'xxxxxxxxxxxxxx', status: true, cookie: true, xfbml: true});



                /* All the events registered */

                FB.Event.subscribe('auth.login', function(response) {

                    // do something with response

                    login();

                });

                FB.Event.subscribe('auth.logout', function(response) {

                    // do something with response

                    logout();

                });



                FB.getLoginStatus(function(response) {

                    if (response.session) {

                        // logged in and connected user, someone you know

                        login();

                    }

                });

            };

            (function() {

                var e = document.createElement('script');

                e.type = 'text/javascript';

                e.src = document.location.protocol +

                    '//connect.facebook.net/en_US/all.js';

                e.async = true;

                document.getElementById('fb-root').appendChild(e); //i am getting error in the is line

            });



            function login(){

                FB.api('/me', function(response) {

                    document.getElementById('login').style.display = "block";

                    document.getElementById('login').innerHTML = response.name + " succsessfully logged in!";

                });

            }

            function logout(){

                document.getElementById('login').style.display = "none";

            }



            //stream publish method

            function streamPublish(name, description, hrefTitle, hrefLink, userPrompt){

                FB.ui(

                {

                    method: 'stream.publish',

                    message: '',

                    attachment: {

                        name: name,

                        caption: '',

                        description: (description),

                        href: hrefLink

                    },

                    action_links: [

                        { text: hrefTitle, href: hrefLink }

                    ],

                    user_prompt_message: userPrompt

                },

                function(response) {



                });



            }

            function showStream(){

                FB.api('/me', function(response) {

                    //console.log(response.id);

                    streamPublish(response.name, 'Something ', 'hrefTitle', 'http://www.ffff.com', "Share www.ffffff.com");

                });

            }



            function share(){

                var share = {

                    method: 'stream.share',

                    u: 'http://www.fffffff.com'

                };



                FB.ui(share, function(response) { console.log(response); });

            }



            function graphStreamPublish(){

                var body = 'hsdfkjasdkjfadkjf;adlfj';

                FB.api('/me/feed', 'post', { message: body }, function(response) {

                    if (!response || response.error) {

                        alert('Error occured');

                    } else {

                        alert('Post ID: ' + response.id);

                    }

                });

            }



            function fqlQuery(){

                FB.api('/me', function(response) {

                     var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);

                     query.wait(function(rows) {



                       document.getElementById('name').innerHTML =

                         'Your name: ' + rows[0].name + "<br />" +

                         '<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";

                     });

                });

            }



            function setStatus(){

                status1 = document.getElementById('status').value;

                FB.api(

                  {

                    method: 'status.set',

                    status: status1

                  },

                  function(response) {

                    if (response == 0){

                        alert('Your facebook status not updated. Give Status Update Permission.');

                    }

                    else{

                        alert('Your facebook status updated');

                    }

                  }

                );

            }
            </script>
<div data-role="page">

    <div data-role="header">
        <h1>Foofys-Facebook Page</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>you are using foofys facebook app</p>
         <div id="fb-root"></div>
<fb:login-button autologoutlink="true" perms="email,user_birthday,status_update,publish_stream"> </fb:login-button>



        <p>

            <a href="#" onclick="showStream(); return false;">Publish Wall Post</a> |

           <!-- <a href="#" onclick="share(); return false;">Share With Your Friends</a> | -->

            <a href="#" onclick="graphStreamPublish(); return false;">Publish Stream</a> |

           <!-- <a href="#" onclick="fqlQuery(); return false;">FQL Query Example</a> -->

        </p>



        <textarea id="status" cols="50" rows="5">Write your status here'</textarea>

        <br />

      <!--  <a href="#" onclick="setStatus(); return false;">Status Set Using Legacy Api Call</a> -->



        <br /><br /><br />

        <div id="login" style ="display:none"></div>

        <div id="name"></div>       
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>

Я не могу понять, что происходит в коде, кстати, я только что указал, где именно я получаю ошибку.

1 Ответ

3 голосов
/ 11 августа 2012

Хитрость с JQM и FB api заключается в использовании API графа. То есть НЕ используйте простые обертки FB javascript, поскольку они нестабильны при обработке страниц JQM - вместо этого просто используйте новый API graph / rest, проверяйте и избегайте множественных блоков ядра FB и вашего набора. Например

function updateUserInfo(uid, accessToken) {

    var uri = "https://graph.facebook.com/" + uid;
    console.log("About to call FP.api with URI " + uri);    

    $.ajax({
                type: "GET",
                url: "https://graph.facebook.com/" + uid,
                dataType: "json",
                success: 
                    (function (response) {
                        console.log("About to call check profile ...");
                        $("#p_name").val(response.name);
                        $("#email").val(response.email);
                        $("#fb_id").val(response.id);
                        $.ajax({
                            type: "POST",
                            url: "/check_profile",
                            cache: false,
                            data: {fb_id: response.id},
                            success: onCheckSuccess,
                            error: onError
                        });
                        console.log("FB id: " + response.id);                     
                    }),
                error: onError
         });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...