Google sign-in button does not render when containing is loaded via ajax

Question

I'm trying to add a google sign-in button in a hybrid app. It renders correctly when the button

<div class="g-signin2" data-onsuccess="onSignIn"></div>

is in the initial page, but when the page is not the first to be loaded (btw pages are loaded via ajax) somehow the button fails to render. For more information i'm using Framework7 but i don't believe the issue is related to the framework but to my faulty logic. I'm following the instructions form google developers.

Answer 1

It doesn't work when the div element is loaded dynamically because the Google Sign-In script looks up the tag with the g-signin2-class upon execution, which it won't find since it isn't loaded into the DOM tree yet.

Instead, you can use the gapi.signin2.render function to render the button after your AJAX call is completed. For example, if your placeholder tag is has the id div_tag_id, in JavaScript:

gapi.signin2.render("div_tag_id", {
    "scope": "profile email openid",
    "width": 200,
    "height": 40,
    "longtitle": true,
    "theme": "dark",
    "onsuccess": function (googleUser) {
        // Called when the user signs in
    },
    "onfailure": function (e) {
        console.warn("Google Sign-In failure: " + e.error);
    }
});

---

• Reference