I've put together a simple jQuery/JavaScript popup. Using AJAX, I want to populate the contents of the popup from cells in a publicly accessible Google Spreadsheet. This much I can do, and I've been successful at grabbing the data from the Google Spreadsheet in json format.
The issue is that the content I need to access is in different 'sheets'. I don't understand Google Docs much, and don't know how to go about 'activating' a different sheet. The name of one of the sheets I want to make active is 'FG'. Another would be 'SA'.
I've found a JS function like the following and put it into my code, but then after reading further it seems this function is supposed to be put into the Google Spreadsheet by going to the spreadsheet > Tools > Script editor....
function goToSheet(sheetName) {
var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
SpreadsheetApp.setActiveSheet(sheet);
}
So I put a call to that function with the name of the 'sheet' I want to load as the param value inside the success for the AJAX call in my JS, and the function doesn't load.
My jQuery/JavaScript in my index.html file is the following:
/**
* Redirect Function
*/
var appRedirect = (function(){
var global = {};
var base = {};
/**
* AJAX Processing Elements
* val: 'before','complete'
* ************************************************************* */
global.ajaxProcessingElems = function (val) {}
/**
* Popup Init
* type: content,buttons
* pClass: unique selector name for popup
* maxWidth: the maximum width value for the popup
* pTitle: title of the popup
* data: the data passed to the popup
* appSiteUrl: the site application to direct user to
* ************************************************************* */
global.popupModalInit = function (type, pClass, maxWidth, pTitle, data, appSiteUrl) {
var count=10;
var counter=setInterval(timer, 1000); // 1000 will run it every 1 second
var pTop;
var pLeft;
//var ss = data.getActiveSpreadsheet();
//var activeSheet = ss.getSheets()[2];
var oData = data;
var dataStructure = '';
/* Function: Popup Close */
$(document).on('click', '.modalpopupbackdrop,.modalpopup_title .close', function (e) {
e.preventDefault();
// Fade Out Modal Popup
$('.modalpopupbackdrop').delay(75).fadeOut(125);
$('.modalpopup').animate({ opacity: '0' }, 150, function () {
// Remove from DOM
var removePopupFrame = setTimeout(function () {
$('.modalpopupbackdrop,.modalpopup').remove();
}, 450);
});
});
/* Popup Structure */
var pStructure =
// Modal Backdrop
'<div class="modalpopupbackdrop" aria-hidden="true"></div>' +
// Modal Frame
'<div class="modalpopup ' + pClass + '" style="max-width: ' + maxWidth + 'px;" aria-label="Popup Notice for Selected Site">' +
'<div class="modalpopup_inner">' +
// Title
'<div class="modalpopup_title">' +
// Close Button
'<a href="javascript:void();" class="close" title="Click to Close Popup" aria-label="close"></a>' +
// Modal Title
'<h3>' + pTitle + '</h3>' +
'</div>' +
// Data Wrapper
'<div class="modalpopup_content"></div>' +
// Cookie and Timer
'<div class="modalpopup_cookieandtimer">' +
// Cookie
'<div class="modalpopup_cookie">' +
'<label>' +
'<input type="checkbox" value="" name="" /> ' +
'Don\'t show this screen in the future.' +
'</label>' +
'</div>' +
// Timer
'<div class="modalpopup_counter">' +
'Autoredirecting in <span class="timer"></span>' +
'</div>' +
'</div>' +
// Buttons
'<div class="modalpopup_buttonholder">' +
'<a href="#" class="button btn-cancel">Cancel</a>' +
'<a href="#" class="button btn-help">Help</a>' +
'<a href="#" class="button btn-comment">Submit a Comment</a>' +
'<a href="#" class="button btn-home">Home</a>' +
'</div>' +
'</div>' +
'</div>';
/* Append Popup to Body */
$('body').append(pStructure);
// Calculate Negative Top and Left Margin to Position Popup
pTop = -($('.modalpopup').height() / 2);
pLeft = -($('.modalpopup').width() / 2);
// Assign Top and Left Margin Values
$('.modalpopup').css({ marginTop: pTop, marginLeft: pLeft });
// Fade Popup In
$('.modalpopupbackdrop').fadeIn(125);
$('.modalpopup').delay(75).fadeIn(125);
// Counter Loop
function timer() {
count=count-1;
if (count <= 0){
clearInterval(counter);
return;
// Direct User to Selected Site:
//window.location.href = appSiteUrl;
}
$('.timer').html(count + ' seconds.');
}
timer();
// Append Fetched Data to Popup
setTimeout(function(){
console.log(oData);
dataStructure += '<h3>' + oData.feed.title.$t + '</h3>';
// Append Data Output
$('.modalpopup_content').append(dataStructure);
},300);
}
/**
* Globe Initialization Settings
* - pTitle:
* - appUrl:
* - appData:
* ************************************************************ */
global.egpInit = function (pTitle,appSiteUrl,appData) {
// Debug
console.log('Function egpInit Initialized');
// Variables
var dataUrl = 'https://spreadsheets.google.com/feeds/list/' + appData + '/od6/public/values?alt=json-in-script';
var errorMessage = 'An error occurred while initializing .egpInit.';
console.log(dataUrl);
$.ajax({
url: dataUrl,
method: 'POST',
dataType: 'jsonp',
beforeSend: function () { global.ajaxProcessingElems('before') },
complete: function () { global.ajaxProcessingElems('complete') },
success: function (data) {
//function goToSheet(sheetName) {
//var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
//SpreadsheetApp.setActiveSheet(sheet);
//}
goToSheet("FG");
global.popupModalInit('content', 'fireglobe', '700', pTitle, data, appSiteUrl);
},
error: function () {
// Debug
console.log(errorMessage);
}
});
}
return global;
})();
My HTML is the following:
<ul>
<li>
<a href="javascript:appRedirect.egpInit('Popup 1','http://www.google.com/globe/','1YERueWgOB1TJ3HrtK4NnrnXCTDaZ5kmTS379Sozljbc');">
Information 1
</a>
</li>
<li>
<a href="javascript:appRedirect.egpInit('Popup 2','https://www.yahoo.com/sa/','1YERueWgOB1TJ3HrtK4NnrnXCTDaZ5kmTS379Sozljbc');">
Information 2
</a>
</li>
</ul>
I'm not sure how to switch between sheets. For now it can be static, and later I can add it in as a param for my function: global.egpInit(pTitle,appSiteUrl,appData)
Any help is greatly appreciated.
