I have two pieces of code that, to me, look exactly the same, except that they point to two different Google Sheets. They both run a query on a Google Sheet using Tabletop.js. Yet the first one gets an XHR error and the second one doesn't. And here's the really weird part, if I comment out the query in the Tabletop code in the non-working code, then the data from the Google Sheet loads into the page without an error. It seems to be the query that is hanging it up. So I can get a list all of the rows but once I query the sheet, no data and an XHR error.
Anyone got any ideas as to why this would be happening?
//Pull the Activity Name data. Activity Name is in the query string
$(document).ready(function(){
// if activity name are not passed as parameters, exit function
if (location.search.indexOf('activityname') == -1 || $(".activity-result").length == 0)
{
return;
}
var public_spreadsheet_url = 'https://docs.google.com/a/organisationname.org/spreadsheets/d/sheet_id_number/pubhtml';
// Extracting the name from the URL query string
var toActivityName = location.search.slice(14);
var spacedActivityName = toActivityName.split('+').join(' ');
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true,
query: "activity_name = " + spacedActivityName,
})
function showInfo(data, tabletop) {
var template = $.templates("#activityTmpl");
var htmlOutput = template.render(data);
$(".activity-result").html(htmlOutput);
The code above is the non-working one
This is the working one
$(document).ready(function(){
// if firstname and surname are not passed as parameters, exit function
if (location.search.indexOf('firstname') == -1 || location.search.indexOf('surname') == -1 || $(".client-result").length == 0)
{
return;
}
var public_spreadsheet_url = 'https://docs.google.com/a/organisationname.org/spreadsheets/d/sheet_id_number/pubhtml';
// Extracting the name from the URL query string
var toFirstName = location.search.slice(11);
var whereIsAmpersand = toFirstName.indexOf('&');
var clientFirstName = toFirstName.slice(0,whereIsAmpersand);
var whereIsEqual = toFirstName.indexOf('=');
var clientSurname = toFirstName.slice(whereIsEqual + 1);
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true,
query: "firstname = " + clientFirstName + " and surname = " + " " + clientSurname,
})
function showInfo(data, tabletop) {
var template = $.templates("#clientTmpl");
var htmlOutput = template.render(data);
$(".client-result").html(htmlOutput);
}
});
The error:
XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/worksheets/the_sheet_id_number/public/basic?alt=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.organisationname.org' is therefore not allowed access.
