Блог

Я создаю систему входа в систему с помощью facebook, основанную на AJAX, и у меня возникла небольшая проблема с этим…

У меня есть страница формы с кнопкой входа в Facebook, которая импортируется в первый раз с помощью PHP, а затем вызывается через AJAX всякий раз, когда кто-то нажимает на кнопку, чтобы изменить содержимое, если вход в систему прошел успешно, или показать ту же форму, если не удалось.

 <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>
 

Проблема в том, что когда я вызываю эту страницу формы через AJAX, страница каким-то образом обновляется и прерывается в середине. Однако, когда он загружается через PHP, он загружается нормально…

Я попробовал это без кнопки входа в Facebook, и это тоже работает нормально…

После нескольких попыток я выясняю, что проблема связана с document.write… Я изменил его на:

 $(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'));
});
 

Теперь он загружается нормально через AJAX, но без рендеринга кнопки Facebook…

Может быть, это потому, что я загрузил весь скрипт facebook на родительской странице?

 <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>
 

Я пытался использовать это, но это тоже не сработало:

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

Чего мне сейчас не хватает, чтобы правильно отобразить кнопку?

Хорошо, я узнаю, как заставить его работать.

Вот решение:

 <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>
 

Я забыл сказать, что я использую Zend Framework.

Теперь он хорошо отображает кнопку после вызова AJAX = D.