Calling Function Within A Function (javascript)

In a nutshell, I want the following function to be executed when this button is clicked: But it does not s

Solution 1:

I think I get it. You've set up the google API to call onApiLoad when it's finished loading. But that function doesn't exist in the global scope so you'll get an error.

The tricky part is that you want to run your code when you click your button and the google API has finished loading.

There are two ways to approach this:

1) Don't render the button until the Google API has finished loading. This involves rendering (or making visible) the button in you onApiLoad function.

That might not be feasible because of UI/UX stuff so there is a more complex solution:

2) Write a handler for the onApiLoad event:

var gapi_loaded = false, gapi_buffered_callbacks = [];
functiononApiLoad() { // this function gets called by the Google API
    gapi_loaded = true;
    // run buffered callbacksfor (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
        gapi_buffered_callbacks();
    }
}
functionaddOnOnApiLoadedCallback(callback) {
    if (gapi_loaded) {
        callback(); // api is loaded, call immediately
    } else {
        gapi_buffered_callbacks.push(callback); // add to callback list
    }
}

Then inside your generateUpload function add:

addOnOnApiLoadedCallback(onApiLoad);

---

Now as you can see this requires quite a bit of bookkeeping. Ideas have been developed to make this easier. Promises are one of them. If you want to explore more I suggest you start there.

---

Here is the full code:

functiongenerateUpload() 
{

   // The Browser API key obtained from the Google Developers Console.var developerKey = 'id';

      // The Client ID obtained from the Google Developers Console.var clientId = 'id';

      // Scope to use to access user's photos.var scope = ['https://www.googleapis.com/auth/photos'];

      var pickerApiLoaded = false;
      var oauthToken;

      // Use the API Loader script to load google.picker and gapi.auth.functiononApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }

      functiononAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,

              'immediate': true
            },
            handleAuthResult);
      }

      functiononPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

      functionhandleAuthResult(authResult) {
        if (authResult && !authResult.error) {
          oauthToken = authResult.access_token;
          createPicker();
        }
      }

      // Create and render a Picker object for picking user Photos.functioncreatePicker() {
        if (pickerApiLoaded && oauthToken) {
          var picker = new google.picker.PickerBuilder().
              enableFeature(google.picker.Feature.MULTISELECT_ENABLED).
              addView(google.picker.ViewId.PDFS).
              setOAuthToken(oauthToken).
              setDeveloperKey(developerKey).
              setCallback(pickerCallback).
              build();
          picker.setVisible(true);
        }
      }

      // A simple callback implementation.functionpickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
                 var message = 'The following(s) were stored in Parse: ' + url;
        document.getElementById('result').innerHTML = message;

        }
      }

      addOnOnApiLoadedCallback(onApiLoad); // register API load
}

var gapi_loaded = false, gapi_buffered_callbacks = [];
functiononApiLoad() { // this function gets called by the Google API
    gapi_loaded = true;
    // run buffered callbacksfor (var i = 0; i < gapi_buffered_callbacks.length; i += 1) {
        gapi_buffered_callbacks();
    }
}
functionaddOnOnApiLoadedCallback(callback) {
    if (gapi_loaded) {
        callback(); // api is loaded, call immediately
    } else {
        gapi_buffered_callbacks.push(callback); // add to callback list
    }
}

Solution 2:

At first look its seems that you´re calling the function with a wrong name, you are calling it with gBenerateUpload and in the JQuery file it´s declared generateUpload

Solution 3:

A slightly different approach to this would be to put all the functions/variables etc back in the global scope as designed, and instead remove the script tag pointing at the Google script. Instead, inject it in the click handler:

functiongenerateUpload() 
{
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://apis.google.com/js/api.js?onload=onApiLoad';
    document.getElementsByTagName('head')[0].appendChild(script);
}