Announcement

Collapse
No announcement yet.

Google plus sign-in button vanishing on reloading a div

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Google plus sign-in button vanishing on reloading a div

    I am making a website whcih has the follwong div: <div id="onload_anim_effect">
    <div id="framecontainer" class="framer shadow3">

    <?php

    if(isset($_COOKIE["logged_in"])&&($_COOKIE["logged_in"]==true)) {
    require_once '/login/test_del.php';
    }
    else
    {
    require_once '/classes/constants.php';
    require_once '/login/main.php';
    }
    ?>

    </div>
    </div>

    Now, when a user is not logged in, this div shows 3 buttons.
    1. login with facebook.
    2.login with google plus.
    3. login with email.
    the html code of these three buttons is defined in /login/main.php All three buttons are being displayed as desired. Now, when a user clicks on the 3rd button, ie login with email, a fancybox iframe pops up and the login form is displayed.

    Now, when the popup closes i reload the above mentioned div by:

    $(document).ready(function() {
    $('.fancybox').fancybox({
    afterClose: function () {
    //just to reload boxx...not the whole page...
    $("#onload_anim_effect").load(location.href + " #onload_anim_effect");
    }
    });

    The problem is when this loginform popup is closed (Without Logging in..or submiting the form..ie by simply using the cross button) the login with facebook button and login with google buttons just vanish.
    I think this is happening beacuse i am re-loading the above mentioned div when fancybox closes.

    After searching a lot,
    I was able to get the facebook button back by calling the fbAsyncInit method after reloading the div but
    the login with google button is not showing.

    what should i do to make the login with google plus button show even after the fancybox popup closes??

    I am using the following code (taken from https://developers.google.com/+/best...sign-in_button)
    inside login/main.php to display google sign in button:

    <script src="https://apis.google.com/js/client:platform.js" async defer>
    <span id="signinButton">
    <span class="g-signin"
    data-callback="signinCallback"
    data-clientid="google-client-id"
    data-cookiepolicy="single_host_origin"
    data-scope="https://www.googleapis.com/auth/plus.login">
    </span>
    </span>

    <script>function signinCallback(authResult) {
    if (authResult['access_token']) {
    console.log('comes here');
    // Signed in with Google+, you can proceed as usual
    } else if (authResult['error']) {
    // There was an error signing the user in
    console.log('comes here 22');
    }
    }

    Please help me on how i should resolve this issue. I have searched for all similar questions nothing is helping. even other forum sites.
    Any suggestions is much appreciated. please help..desparetely need it.
    Thank You in advance.
Working...
X