I have integrated PivotTable.js on my web application. The pivot table is shown normally but in some first columns and rows, functions are written and it is not interpreted (See the screenshot) This is an example of a function written:
function each(iterator, context) {
var index = 0;
try {
this._each(function(value) {
iterator.call(context, value, index++);
});
} catch (e) {
if (e != $break) throw e;
}
return this;
}
These are screenshots taken from the result:
pivot_table
Pivot table2
This is my code:
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./jquery-ui.min.js"></script>
<script type="text/javascript" src="./jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="./pivot.min.js"></script>
<script type="text/javascript" src="./tips_data.min.js"></script>
<link rel="stylesheet" href="./pivot.min.css">
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#output").pivotUI(
$.pivotUtilities.tipsData, {
rows: ["sex", "smoker"],
cols: ["day", "time"],
vals: ["tip", "total_bill"],
aggregatorName: "Sum over Sum",
rendererName: "Heatmap"
});
});
</script>
<div id="output"></div>
THe issue is referenced officially here: https://github.com/nicolaskruchten/pivottable/issues/708
As i understand, no out-of-the-box solution yet.
Related
I have tried to make a table by using datatables with an array, but somehow it doesn't show the table on my html file.
The array is defined in my gs file as you can see in the code below.
It's a simple work but I'm still not sure what it went wrong.
var ssId = 'xxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);
var indexPage_sheetName = 'xxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();//array of 850rows×15cols
valuesFromIndexPage.shift();
function getData() {
$(document).ready(function(){
$("#foo-table").DataTable({
data: valuesFromIndexPage
});
});
}
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</head>
</html>
#ZektorH Here's the console log of running my code.
userCodeAppPanel:9 Uncaught TypeError: Cannot read property 'slice' of null
at initializeTable (userCodeAppPanel:9)
at af (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:67)
at 4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:10
at ng.J (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:94)
at Hd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:42)
at Dd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:43)
at Bd.b (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:39)
I looked again at my data and I found out the data became null on console.log(but it has data when I see it on Logger.log).
I'm posting what I did and got below.
function getData() {
Logger.log(valuesFromIndexPage); //the array is in valuesFromIndexPage
return valuesFromIndexPage;
}
function initializeTable(data) {
console.log(data); //it returns null here...
var aDataSet = data.slice(1);
The log from Logger.log
[19-10-31 09:47:00:116 JST] [[ID, 案件名, .......
#ZektorH These're the whole codes without data.
code.gs
var ssId = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);
var indexPage_sheetName = 'xxxxxxxxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();
function createSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('index').setTitle('My custom sidebar').setWidth(300))
}
function getData() {
return valuesFromIndexPage;
}
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate().setTitle('title');
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
console.log("ready!");
google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
});
function initializeTable(data) {
console.log(data)
var aDataSet = data.slice(1); // all except header
var head = []; // headers
data[0].forEach(function(e) {
head.push({
'sTitle': e
});
});
$('#foo-table').dataTable({
"aaData": aDataSet,
"aoColumns": head
});
}
</script>
</head>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</html>
Chage with columns of of key in dataTable for table headers and chage $("#foo-table").DataTable at $("#foo-table").dataTable
var valuesFromIndexPage=[{"free-text-c1":"free-text-r1","c2":"r1","c3":"r1","c4":"r1","c5":"r1","c6":"r1","c7":"r1","c8":"r1","c9":"free-text-r1","c10":"free-text-r1"},{"free-text-c1":"free-text-r2","c2":"r2","c3":"r2","c4":"r2","c5":"r2","c6":"r2","c7":"r2","c8":"r2","c9":"free-text-r2","c10":"free-text-r2"}];
valuesFromIndexPage.shift();
function getData() {
$(document).ready(function(){
$("#foo-table").dataTable({
destroy: true,
scrollX: true,
data: valuesFromIndexPage,
columns: _.keys(valuesFromIndexPage[0]).map((key) => { return { "title": key, "data": key } })
});
});
}
getData()
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</head>
</html>
Assuming you are using it on a sidebar, I was able to get it to work like this:
Apps Script
function createSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('My custom sidebar').setWidth(300))
}
function getData() {
return SpreadsheetApp.getActiveSheet().getDataRange().getValues();
}
HTML Page
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
console.log("ready!");
google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
});
function initializeTable(data) {
var aDataSet = data.slice(1); // all except header
var head = []; // headers
data[0].forEach(function(e) {
head.push({
'sTitle': e
});
});
$('#foo-table').dataTable({
"aaData": aDataSet,
"aoColumns": head
});
}
</script>
</head>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</html>
Hope this helps!
I have a simple Excel file in my computer at "D:/Book1.xls". I want to import it to make a table and append the table to a div tag in my HTML page.
Would you modify my code below?
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
</style>
<script src='http://alasql.org/console/alasql.min.js'></script>
<script src='http://alasql.org/console/xlsx.core.min.js'></script>
<script src="./libs/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alasql('select * into html("#res",{headers:true}) \
from xlsx("d:/Book1.xls",\
{headers:true})');
alert("end of function")
});
</script>
</head>
<body>
<div id="res">res</div>
</body>
</html>
The problem is you are trying to get access of file directly from web page which is not possible. You cannot access any file outside of you browser. For that you have to select the input element of html and after getting the file data you can store it to javascript variable.
<script src="alasql.min.js"></script>
<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:</p>
<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
function loadFile(event) {
alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){
console.log(data);
// You can data to div also.
});
}
</script>
Scripts
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/infragistics.core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/infragistics.lob.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_collections.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_text.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_io.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_ui.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.documents.core_core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_collectionsextended.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.excel_core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_threading.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.ext_web.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.xml.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.documents.core_openxml.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/modules/infragistics.excel_serialization_openxml.js"></script>
JS
$(function () {
$("#input").on("change", function () {
var excelFile,
fileReader = new FileReader();
$("#result").hide();
fileReader.onload = function (e) {
var buffer = new Uint8Array(fileReader.result);
$.ig.excel.Workbook.load(buffer, function (workbook) {
var column, row, newRow, cellValue, columnIndex, i,
worksheet = workbook.worksheets(0),
columnsNumber = 0,
gridColumns = [],
data = [],
worksheetRowsCount;
// Both the columns and rows in the worksheet are lazily created and because of this most of the time worksheet.columns().count() will return 0
// So to get the number of columns we read the values in the first row and count. When value is null we stop counting columns:
while (worksheet.rows(0).getCellValue(columnsNumber)) {
columnsNumber++;
}
// Iterating through cells in first row and use the cell text as key and header text for the grid columns
for (columnIndex = 0; columnIndex < columnsNumber; columnIndex++) {
column = worksheet.rows(0).getCellText(columnIndex);
gridColumns.push({ headerText: column, key: column });
}
// We start iterating from 1, because we already read the first row to build the gridColumns array above
// We use each cell value and add it to json array, which will be used as dataSource for the grid
for (i = 1, worksheetRowsCount = worksheet.rows().count(); i < worksheetRowsCount; i++) {
newRow = {};
row = worksheet.rows(i);
for (columnIndex = 0; columnIndex < columnsNumber; columnIndex++) {
cellValue = row.getCellText(columnIndex);
newRow[gridColumns[columnIndex].key] = cellValue;
}
data.push(newRow);
}
// we can also skip passing the gridColumns use autoGenerateColumns = true, or modify the gridColumns array
createGrid(data, gridColumns);
}, function (error) {
$("#result").text("The excel file is corrupted.");
$("#result").show(1000);
});
}
if (this.files.length > 0) {
excelFile = this.files[0];
if (excelFile.type === "application/vnd.ms-excel" || excelFile.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || (excelFile.type === "" && (excelFile.name.endsWith("xls") || excelFile.name.endsWith("xlsx")))) {
fileReader.readAsArrayBuffer(excelFile);
} else {
$("#result").text("The format of the file you have selected is not supported. Please select a valid Excel file ('.xls, *.xlsx').");
$("#result").show(1000);
}
}
})
});
function createGrid(data, gridColumns) {
if ($("#grid1").data("igGrid") !== undefined) {
$("#grid1").igGrid("destroy");
}
$("#grid1").igGrid({
columns: gridColumns,
autoGenerateColumns: true,
dataSource: data,
width: "100%",
});
}
HTML
<input type="file" id="input" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<div id="result"></div>
<table id="grid1"></table>
I don't see why I would get this, code below:
<head>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>
<script>
var json1 = {
text: "After first paragraph"
};
var first_content_added = false;
$(function() {
$(".learn-more").on("click", function() {
$.getJSON("json_info.json", function(data) {
appendContentToFirstP(data.reviews[0].about.moreinfo);
});
});
});
function appendContentToFirstP(content) {
if (first_content_added) {
return;
}
var after_first_p = $('<p class="more-info" />');
after_first_p.text(content);
$(".first").append(after_first_p);
first_content_added = true;
}
</script>
</head>
What would be causing the error?
My initial thought is the error is because I have not imported JQuery, but I have. It's inside the script tag at the top.
You haven't included jQuery, you've only included the plugin jQuery.color.
Reference it before jQuery.color:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
write before that color js like this
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" type="text/javascript"></script>
I have been testing with Jasmine 2.0.0 and it works without any problem.
But there's a problem when I append BlanketJS to my code.
I used a specRunner(https://github.com/alex-seville/blanket/blob/master/test/jasmine-requirejs/runner.html) that works with Jasmine 1.3.1. But It does not work when I replace Jasmine 1.3.1 with Jasmine 2.0.0,
Here's original code from BlanketJS repo:
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-html.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
<script type="text/javascript" src="../../node_modules/requirejs/require.js"></script>
<script type="text/javascript" data-cover-only="code/" data-cover-never="['all.tests','code/tests']"
src="../../dist/qunit/blanket.js"> </script>
<script type="text/javascript" src="../../src/adapters/jasmine-blanket.js"></script>
<script type="text/javascript">
if (window.require && typeof (window.require.config) === 'function') {
require.config({
baseUrl: './code'
});
}
</script>
<script type="text/javascript" src="code/all.tests.jasmine.js"></script>
<script type="text/javascript">
(function () {
window.blanketTestJasmineExpected=2;
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
var oldResult = htmlReporter.reportRunnerResults;
jasmineEnv.addReporter(htmlReporter);
/* this is just for our automated tests */
window.jasmine_phantom_reporter = new jasmine.ConsoleReporter;
jasmineEnv.addReporter(jasmine_phantom_reporter);
/* */
jasmineEnv.specFilter = function (spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
and I added Jasmine 2.0.0 files and changed this code like below:
....
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" type="text/css" href="../vendor/jasmine.css">
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="../vendor/jasmine-2.0.0/boot.js"></script>
<script type="text/javascript" src="../helpers/console_runner.js"></script>
....
The error messages printed:
Uncaught TypeError: Cannot read property 'env' of undefined jasmine-html.js:38
Uncaught TypeError: Object #<Env> has no method 'currentRunner' jasmine-blanket.js:76
How can I run this specRunner page without problems? Please give me a solution. thanks.
the Blanket adapter uses currentRunner but that doesn't exist in 2.0 anymore.
The Blanket Jasmine adapter needs to be updated as both this and the reporter interface has changed.
Open up your jasmine-blanket.js file and replace the code at the bottom with this:
BlanketReporter.prototype = {
specStarted: function(spec) {
blanket.onTestStart();
},
specDone: function(result) {
var passed = result.status === "passed" ? 1 : 0;
blanket.onTestDone(1,passed);
},
jasmineDone: function() {
blanket.onTestsDone();
},
log: function(str) {
var console = jasmine.getGlobal().console;
if (console && console.log) {
console.log(str);
}
}
};
// export public
jasmine.BlanketReporter = BlanketReporter;
//override existing jasmine execute
var originalJasmineExecute = jasmine.getEnv().execute;
jasmine.getEnv().execute = function(){ console.log("waiting for blanket..."); };
blanket.beforeStartTestRunner({
checkRequirejs:true,
callback:function(){
jasmine.getEnv().addReporter(new jasmine.BlanketReporter());
jasmine.getEnv().execute = originalJasmineExecute;
jasmine.getEnv().execute();
}
});
Then it will should as intended.
ETA - personally I'd switch to Istanbul instead, as Blanket seems to be sparsely updated (if at all) right now. Istanbul has more complete coverage stats (not just lines - branches, etc) and can export to lcov for tools like Code Climate. It works with Jasmine, or any test framework, flawlessly.
So now there is actually an adapter for 2.x version of jasmine. But I still had some trouble configuring it. Eventually I did configure everything right, so that is what I got:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="components/jasmine.css">
<script src="components/jasmine.js"></script>
<script src="components/jasmine-html.js"></script>
<script src="components/boot.js"></script>
<script type="text/javascript" data-cover-only="app/" src="components/blanket.js" data-cover-adapter="components/jasmine-2.x-blanket.js"></script>
<script src="components/blanket_browser.js"></script>
<script src="components/jasmine-2.x-blanket.js"></script>
<!-- sources -->
<script src="components/angular.js"></script>
<script src="components/angular-mocks.js"></script>
<script src="app/custom-forms.js"></script>
<script src="app/route-selector.js"></script>
<!-- tests -->
<script src="tests/custom-forms-tests.js"></script>
<script src="tests/route-selector-tests.js"></script>
</head>
<body>
</body>
</html>
Note: I used bower to retrieve jasmine and blanket, but there is some confusion towards what blanket files I had to reference, so:
"components/blanket.js" -> I got this file from dist/qunit/blanket.js
"components/blanket_browser.js" -> src/blanket_browser.js
"components/jasmine-2.x-blanket.js" -> src/adapters/jasmine-2.x-blanket.js
Note that I also use boot.js that comes with jasmine and it works fine. Hope this information helps someone.
I am trying to embed jqxgrid into my HTML page.
This are the libraries that I import:
<script src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-1.10.1-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1379671500000.js"></script>
<script src="/jquery/jquery-ui.min.js"></script>
<script src="/jqwidgets/jqxcore.js"></script>
<script src="/jqwidgets/jqxdata.js"></script>
<script src="/jqwidgets/jqxbuttons.js"></script>
<script src="/jqwidgets/jqxscrollbar.js"></script>
<script src="/jqwidgets/jqxmenu.js"></script>
<script src="/jqwidgets/jqxcheckbox.js"></script>
<script src="/jqwidgets/jqxlistbox.js"></script>
<script src="/jqwidgets/jqxdropdownlist.js"></script>
<script src="/jqwidgets/jqxgrid.js"></script>
<script src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="/jqwidgets/jqxgrid.edit.js"></script>
<script src="/jqwidgets/jqxgrid.filter.js"></script>
<script src="/jqwidgets/jqxgrid.pager.js"></script>
<script src="/jqwidgets/jqxgrid.selection.js"></script>
<script src="/jqwidgets/jqxgrid.sort.js"></script>
I omitted type="text/javascript" for simplicity reasons. As you can see the whole think is a wicket application, so I can't really influence the first three imports.
I implemented the jqxgrid as follows:
<script type="text/javascript">
$(document).ready(function() {
var theme = "smoothness";
var dataAdapter = new $.jqx.dataAdapter(data);
$("#jqxgrid").jqxGrid({
width : "99%",
autoheight: true,
theme : theme,
// many more configuration options
columns: [ /* column declaration */ ]
});
// events
$("#jqxgrid").on('cellendedit', function(event) {
var args = event.args;
$.post("EditResponse", {
id: $('#jqxgrid').jqGrid('getCell',args.rowindex,'Name'),
value: args.value
});
});
});
</script>
Again I omitted (in my opinion) unnecessary details, as the initializaton of jqxgrid works fine, I see the table with every data I want it to show.
But when I edit a cell and end editing, the row
$('#jqxgrid').jqGrid('getCell',args.rowindex,'Name')
yields an error in the console:
TypeError: Object [object Object] has no method 'jqGrid'
I did some research but could not fine a clear explanation. Any experiences what could be wrong? Any import I forgot? Anything in the wrong order?
type Error, change
$('#jqxgrid').jqGrid(...
to
$('#jqxgrid').jqxGrid(...