how to load google client.js dynamically

Question

this is my first time to post here on stackoverflow.

My problem is simple (I think). I am tasked to allow users to sign up using either Facebook, Google Plus, LinkedIn and Twitter. Now, what I want to do is when the user clicks the Social Network button, it will redirect them to the registration page with a flag that determines which social network they want to use. No problem here.

I want to load each API dynamically depending on which social network they choose.

I have a problem when loading the Google JS API, dynamically. The sample found in here loads client.js in a straightforward manner. I have no problems if I follow the sample code. But I want to load it dynamically.

I tried using $.ajax, $.getScript and even tried adding the script to the page just like how you call Google Analytics asynchronously. None of the above worked. My call back function is NOT called all the time. Also, if i call the setApiKey from the call back function of $.ajax and $.getScript, the gapi.client is NULL. I don't know what to do next.

Codes that did not work:

(function () {
var gpjs = document.createElement('script'); gpjs.type = 'text/javascript'; gpjs.async = false;
gpjs.src = 'https://apis.google.com/js/client.js?onload=onClientLoadHandler';
var sgp = document.getElementsByTagName('script')[0]; sgp.parentNode.insertBefore(gpjs, sgp);})();

Using $.getScript

$.getScript("https://apis.google.com/js/client.js?onload=onClientLoadHandler", function () {
console.log("GP JS file loaded.");
SetKeyCheckAuthority();});

Using $.ajax

$(document).ready(function () {
$.ajax({
    url: "https://apis.google.com/js/client.js?onload=onClientLoad",
    dataType: "script",
    success: function () {
        console.log("GP load successful");
        SetKeyCheckAuthority();
    },
    error: function () { console.log("GP load failed"); },
    complete: function () { console.log("GP load complete"); }
});});

May I know what is the proper way of calling this js file dynamically? Any help would be appreciated. Thank you.

Answer 1

Ok, I just thought of a solution but i think it's a bad one. Please let me know what you think of it.

i used $.getScript to load the js file

$.getScript("https://apis.google.com/js/client.js?onload=onClientLoadHandler", function () {
console.log("GP JS file loaded.");
SetKeyCheckAuthority();});

and then on my SetKeyCheckAuthority function i placed a condition to call itself after 1 second when gapi.client is null.

function SetKeyCheckAuthority() {
if(null == gapi.client) {
    window.setTimeout(SetKeyCheckAuthority,1000);
    return;
}

//set API key and check for authorization here }