CODEWITHSUNDEEP
jquerygoogle-apps-script
DavidF
DavidF

Reputation: 1345

Jquery script issue in page hosted on Google Drive with Apps Script as source data

I am trying to use jquery and datatables in html hosted on Google Drive. The data for the datatable is to be sourced from an Apps Script using content service. I am working from the datatable examples. The hosted html is: 

        <title>JQUERY  DataTables Page  Hosted in Google Drive </title>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>JQUERY  DataTables Page  Hosted in Google Drive </title>

    <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8">

    $(document).ready( function () {
         $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
       $('#example').dataTable( {
          "bServerSide": false,
          "sAjaxSource": "https://script.google.com/macros/s/AKfycbyFGmeMnn2hlRWe1XHTgcOI4nSyi_HcJOYSg2jfBe8b-5qXPUs2/exec"
        });
     });
    </script>
    </head>
    <body>
    <h1>JQUERY  DataTables Page  Hosted in Google Drive </h1>
    <p>Default dataTable with embedded data</p>
    <p>Includes sorting, paging and filtering by default.</p>
    <p>Entire data table loaded in one hit.</p>
    <div id="demo"></div>

    </body>
    </html>

The script containing the ready function works fine in http://live.datatables.net/ test harness. The apps script is published to anyone , even anonymous. Replacing the apps script call with the actual tables results in working page.

  1. What do I need to do to get this working (possibly cross domain issue?)
  2. Given a solution to the immediate issue ... how should I go about handling authentication for the situation where the data to be tabled is private to the domain or user group

Upvotes: 1

Views: 1656

Answers (2)

Phil Bozak
Phil Bozak

Reputation: 2822

Use the javascript console (Ctrl + Shift + J in Chrome) to find out what error you are having. Search the error. Get this page. Note that it says you must have a inside your table. Add the following instead of the current table that you have.

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
      <td>Row 5</td>
    </tr>
  </tbody>
</table>

You can use Session.getActiveUser() in your apps script to determine who is running the script, and from there decide whether to return data, or not to return data.

Upvotes: 0

keisuke oohashi
keisuke oohashi

Reputation: 167

About 1. You should post jsonp request. Because google apps script does not add 'Access-Control-Allow-Origin' header.

About 2.

Google Apps Script's authentification is always return html page , if user is not logged in.

if you need handle login status , you should handle it on jsonp request.

and if you want to allow accessing only domain or group user , you should set 'me' 'Execute the app as' and check user email address by Session.getActiveUser().getEmail() , but it can only apps account.

it's my similar app, it's using angularjs on clientside,but maybe just become your hint.

https://plus.google.com/u/1/112329532641745322160/posts/1EpJUYP7mfm

Upvotes: 3

Related Questions