Question

I’m doing a login system with facebook, based on AJAX, and I’m having a little problem with that…

I have a form page with Facebook Login Button that is imported the first time via PHP and then is called via AJAX whenever someone click on a button, to change content if a login was sucessfull or to show the same form if not sucessfull.

<form method="post" id="regist_form" enctype="application/x-www-form-urlencoded" action="asd.php">
<table>
<tr>
    <?php echo $this->form->username; ?>
</tr>
<tr>
    <?php echo $this->form->password; ?>
</tr>
<tr>
<td><br/><script type="text/javascript">
    document.write('<div class="fb-login-button" id="face_login" onlogin="loginAsFacebook()" scope="email,user_activities,publish_stream">Facebook</div>');
</script>
</td>
<td><br/>
    <?php echo $this->form->login_form_csrf.$this->form->login_user; ?>
</td>
</tr>
</table>
</form>

The problem is that when I call this form page via AJAX, the page is somehow refreshed and interrupted at the middle. However, when it is loaded via PHP, it loads OK…

I tried that without the Facebook Login button and it works OK too…

After some tries, I find out that the problem is related to document.write…
I changed it to:

$(document).ready(function(){
    $('#face_gen').append('<div class="fb-login-button" class="face_login" onlogin="loginAsFacebook()" scope="email,user_activities,publish_stream">Facebook</div>');
    FB.XFBML.parse(document.getElementById('face_login'));
});

Now it loads ok via AJAX but without the rendering of the Facebook’s button…

Could it be because I’ve the facebook’s all script loaded on the parent page?

<script src="//connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
    FB.init({
        appId      : 'xxxxxxxxxxxxxxx', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        oauth      : true, // enable OAuth 2.0
        xfbml      : true, // parse XFBML
        fbml5        : true
    });
</script>

I tried using this but it didn’t work too:

$("#user_reg_login").load("logincontent/logincontent/",function(){
    FB.XFBML.parse(document.getElementById('face_login'));
});

What am I missing now to render the button properly?

Answer 1

Ok, I find out how to put it working.

Here’s the solution:

<form method="post" id="regist_form" enctype="application/x-www-form-urlencoded" action="">
<table>
    <tr>
        <?php echo $this->form->username; ?>
    </tr>
    <tr>
        <?php echo $this->form->password; ?>
    </tr>
    <tr>
        <td id="face_gen"><br/><script type="text/javascript">
            $(document).ready(function(){
                $('#face_gen').append('<div class="fb-login-button" class="face_login" onlogin="loginAsFacebook()" scope="email,user_activities,publish_stream">Facebook</div>');
                FB.XFBML.parse(document.getElementById('face_login'));
            });
        </script>

        </td>
        <td><br/>
            <?php echo $this->form->login_form_csrf.$this->form->login_user; ?>
        </td>
    </tr>
</table>
</form>

I forgot to say that I’m using Zend Framework.

Now it renders the button well after AJAX call =D.