Execute javascript script upon button click

Question

I am working with the google drive picker

The problem is that it loads automatically, when I only want the picker to appear upon button click and not page load.

In the body this is the script that loads the picker

  <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>

I would only want this script to be executed upon button click. Below is the entire code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

    <script type="text/javascript">

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

      // The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
      var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

      // 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.
      function onApiLoad() {
        gapi.load('auth', {'callback': onAuthApiLoad});
        gapi.load('picker', {'callback': onPickerApiLoad});
      }

      function onAuthApiLoad() {
        window.gapi.auth.authorize(
            {
              'client_id': clientId,
              'scope': scope,
              'immediate': false
            },
            handleAuthResult);
      }

      function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
      }

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

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

      // A simple callback implementation.
      function pickerCallback(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 = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
    </script>
  </head>
  <body>
    <div id="result"></div>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

Matt Bentley · Accepted Answer · 2015-01-27 18:08:27Z

0

You could try to use the getScript method from jQuery. It's pretty simple and will load the file during during the click event.

$( '#button' ).on( 'click', function() {
    $.getScript( 'url to your js file', function( data, textStatus, jqxhr ) {
        // do some stuff after script is loaded
    } );
} );

answered Jan 27, 2015 at 18:08

Matt Bentley

12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4458396 Over a year ago

thanks for your response. I tried to implement it as follow <script>$( '#button' ).on( 'click', function() { $.getScript( 'apis.google.com/js/api.js?onload=onApiLoad', function( data, textStatus, jqxhr ) { // do some stuff after script is loaded } ); } );</script> in header and in body <button id="button"> Upload </button> but its not responding

user4458396 Over a year ago

Uncaught ReferenceError: $ is not defined

Collectives™ on Stack Overflow

Execute javascript script upon button click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related