I am trying to Upload an excel file at client side in AngularJS UI Grid using SheetJS. The code works fine in Chrome and Firefox, but on IE it gives the following error Object doesn't support property or method 'readAsBinaryString'
I tried various solution on stack overflow like using readAsBinaryArray or readAsText instead of using readAsBinaryString but I am unable to solve my problem.
I am sharing my code below it consists of 3 files: index.html, app.js and main.css
Code for index.html is as below
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
<script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
<script src="https://github.com/SheetJS/js-xlsx/blob/master/shim.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
<div class="msg">
<div class="center">
<span class="muted">Select Excel File</span>
<br />
<input ng-attr-type="{{'file'}}" accept=".xls,.xlsx,.csv" fileread="" opts="vm.gridOptions" multiple="false" />
</div>
</div>
</div>
</div>
<br />
<br />
<button type="button" class="btn btn-success" ng- click="vm.reset()">Reset Grid</button>
<span> </span>
<button type="button" class="btn btn-success" ng-click="">Save</button>
</div>
<script src="js/app.js"></script>
</body>
</html>
Code for app.js is as below
(function (angular) {
"use strict";
angular.module('app', ['ui.grid']).controller('MainCtrl', ['$scope', function ($scope) {
var vm = this;
vm.gridOptions = {};
vm.reset = reset;
function reset() {
vm.gridOptions.data = [];
vm.gridOptions.columnDefs = [];
}
}])
.directive("fileread", [function () {
return {
scope: {
opts: '='
},
link: function ($scope, $elm, $attrs) {
$elm.on('change', function (changeEvent) {
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function () {
var data = evt.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
var headerNames = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]], { header: 1 })[0];
var data = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);
$scope.opts.columnDefs = [];
headerNames.forEach(function (h) {
$scope.opts.columnDefs.push({ field: h });
});
$scope.opts.data = data;
$elm.val(null);
});
};
reader.readAsBinaryString(changeEvent.target.files[0]);
});
}
}
}]);
Code for main.css
body {
padding: 20px;
}
.grid {
width: 100%;
height: 250px;
}
.grid-msg-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.grid-msg-overlay .msg {
opacity: 1;
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 50%;
background-color: #eee;
border-radius: 4px;
border: 1px solid #555;
text-align: center;
font-size: 24px;
display: table;
}
.grid-msg-overlay .msg > .center {
display: table-cell;
vertical-align: middle;
}
.grid input[type="file"] {
font-size: 14px;
display: inline-block;
}
Please can someone help me to understand how can I resolve this issue
IE does not implement the FileReader readAsBinaryString() method. However, as per the SheetJS documentation, you can test for support, and fallback to readAsArrayBuffer() instead.
var readAsBinary = "readAsBinaryString" in FileReader;
if (readAsBinary) {
reader.readAsBinaryString(changeEvent.target.files[0]);
} else {
reader.readAsArrayBuffer(changeEvent.target.files[0]);
}
Then in the unload method you have to handle the result as follows:
var workbook;
if (readAsBinary) {
workbook = XLSX.read(data, {type: 'binary'});
} else {
function fixdata(data) {
var o = "", l = 0, w = 10240;
for(; l<data.byteLength/w; ++l) o+=String.fromCharCode.apply(null,new Uint8Array(data.slice(l*w,l*w+w)));
o+=String.fromCharCode.apply(null, new Uint8Array(data.slice(l*w)));
return o;
}
workbook = XLSX.read(btoa(fixdata(data)), {type: 'base64'});
}
Related
Weird one. Have two school building calendars being fed by public Google Cal. Can click month-to-month without error, but when I hide one building cal and click to the next month, I end up with duplicate entries that continue to double then triple and continue duping as you click month to month. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fullcalendar.css" rel="stylesheet" />
<link href="css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="shortcut icon">
<link type="image/x-icon" href="http://www.woostercityschools.org/sites/woostercityschools.org/files/favicon_wcs.png" rel="icon">
<script src="js/moment.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
<script src="js/gcal.js"></script>
<script>
var allCals = [
{
id: 1,
name: 'High School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE#group.calendar.google.com/public/basic',
color: '#0057b8',
visible: true
},{
id: 2,
name: 'Middle School',
url: 'https://www.google.com/calendar/feeds/CALENDAR_ID_HERE#group.calendar.google.com/public/basic',
color: '#4b4c4c',
visible: true
}
];
var gCals = function(){
var ret = $.grep(allCals, function(a){
return a.visible === true;
});
console.log('called gCals()');
console.log(ret);
return ret;
}
$(document).ready(function() {
//Hide/Show all
$('#hide-all').click(function(){
$('.calendar-list button').each(function(){
$(this).removeClass('btn-calendar-hide');
});
$.each(allCals, function(index,value){
//$('#calendar').fullCalendar('removeEventSource', this);
this.visible = false;
});
$('#calendar').fullCalendar('removeEvents');
});
$('#show-all').click(function(){
$('.calendar-list button').each(function(){
$(this).addClass('btn-calendar-hide');
});
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
this.visible = true;
});
});
//Populate buttons
$.each( allCals, function( index, value ){
var tmp = $('<button/>', {
type: 'button',
class: 'btn btn-block btn-calendar',
style: 'background-color: '+value.color,
text: value.name,
id: 'btn_calendar'+value.id,
click: function () {
if ($(this).hasClass('btn-calendar-hide')){
//$('#calendar').fullCalendar('removeEventSource', value);
$( this ).removeClass('btn-calendar-hide');
value.visible = false;
} else {
//$('#calendar').fullCalendar('addEventSource', value);
$( this ).addClass('btn-calendar-hide');
value.visible = true;
}
updateCalendar();
}
});
if (value.visible === true){
tmp.addClass('btn-calendar-hide');
}
$('.calendar-list').append(
tmp
);
});
//Display the calendar
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyDiJjIhfkuYrKzwrj0GS3wBN1erVcMsJmM',
eventSources: allCals,
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
},
header: {
left: 'month,basicWeek,basicDay',
center: 'title',
right: 'today prev,next'
}
});
function updateCalendar(){
$('#calendar').fullCalendar('removeEvents');
$.each(allCals, function(index,value){
if (value.visible === true){
$('#calendar').fullCalendar('addEventSource', allCals[index]);
}
});
}
});
</script>
<style>
a.fc-event:hover, a.fc-event:focus{
color:#000;
}
#loading {
display: none;
position:absolute;
width:96%;
padding:10px;
z-index:999;
border: solid 1px #f8e166;
margin:1% 2%;
}
#loading h3 {
margin:2%;
}
#calendar {
margin: 20px auto;
}
.btn {
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-calendar {
background-image: none;
color: #FFFFFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
opacity: 0.5;
}
.btn-calendar-hide {
opacity: 1;
}
.btn:hover, .btn:focus {
color: #FFFFFF;
text-decoration: none;
}
#media print {
a[href]:after {
content: none;
}
}
</style>
</head>
<body>
<div id="loading" class="bg-warning">
<h3 class="text-center">Loading...</h3>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-print"> <img class="img-responsive center-block" style="margin-top:2em; margin-bottom:2em" src="logo-district.jpg" alt="Wooster City Schools" >
<div class="calendar-list">
<h4>Calendars
<div class="btn-group">
<button id="show-all" type="button" class="btn btn-xs">Show All</button>
<button id="hide-all" type="button" class="btn btn-xs">Hide All</button>
</div>
</h4>
</div>
</div>
<div class="col-md-10">
<p class="text-right hidden-print" style="margin-top:2%"><i class="glyphicon glyphicon-print"></i> Print</p>
<div id="calendar"></div>
</div>
</div>
</div>
</body>
</html>
The problem you've got is that calling $('#calendar').fullCalendar('removeEvents'); deletes the events currently visible on the calendar, but it doesn't remove the source of those events.
That means that when you then go on to call $('#calendar').fullCalendar('addEventSource' next, you are simply adding the same source of events over and over again. Next time you press "next" or "previous" to change the date range, this triggers fullCalendar to request new events for that date range from all the available sources. Since you haven't removed any sources, but have kept adding more, you can see how this then leads to duplication of events in the display.
In one part of your code you've commented out a call to $('#calendar').fullCalendar('removeEventSource' ...but actually that (or the plural "removeEventSources", where appropriate) should be the correct approach. If you remove the source then it will both remove the existing events and also prevent future requests to that source from adding more events again.
I am developing an application with gridstack and I want to put several graphics (lines and gauge) in different containers using the RGraph library.
I can not make the graph fill the width and height of the container.
Also when I change the size I want the graphic to adapt to the container.
I have an example:
Code JSFiddle
$(document).ready(function ()
{
var data = [[4,5,8,11,15], [1,3,2,5,9]];
var tips = ['a','b','c','d','e','yf','yh','tt','hh','ll'];
var line = new RGraph.Line('cvs', data)
.set('tooltips', tips)
.set('gutter.left', 50)
.draw();
});
#canvas{
width: 100% !important;
max-width: 100% !important;
height: 70% !important;
align-content:center;
vertical-align:middle;
/*position:static;*/
}
#cvs {
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Serialization demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./gridstack.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min.js'></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.tooltips.js"></script
src="http://www.rgraph.net/libraries/RGraph.common.resizing.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.line.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
</style>
</head>
<body>
<div class="container-fluid">
<div>
<a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
<a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
<a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
</div>
<br/>
<div class="grid-stack" id="grid-stack">
<div class="chart-container" id="tile1" >
<div class="grid-stack-item-content">
<span class="pull-left">Tile 1</span>
<div class="pull-left" style="clear:both">Content</div>
</div>
</div>
<div class="chart-container" id="tile2">
<div class="grid-stack-item-content">
<span class="pull-left">Tile 2</span>
<div class="pull-left" style="clear:both">
<canvas id="cvs" width="600" height="250" style="width: 100%; float: left">[No canvas support]
</canvas>
</div>
</div>
</div>
</div>
<hr/>
<textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
new function () {
this.serializedData = [
{id: "tile1", x: 0, y: 0, w: 4, h:2},
{id: "tile2", x: 4, y: 0, w: 5, h: 4},
];
this.grid = $('.grid-stack').data('gridstack');
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
items.forEach(node=>{
var containerElt = $("#" + node.id);
containerElt.attr("data-gs-id", node.id);
containerElt.attr("data-gs-width", node.w);
containerElt.attr("data-gs-height", node.h);
containerElt.attr("data-gs-x", node.x);
containerElt.attr("data-gs-y", node.y);
this.grid.makeWidget(containerElt)
});
return false;
}.bind(this);
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), (el)=> {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: node.id,
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
}, this);
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.getSerializedData = function () {
var result = _.map($('.grid-stack > .grid-stack-item:visible'), (el)=> {
el = $(el);
var node = el.data('_gridstack_node');
return {
id: node.id,
x: node.x,
y: node.y,
w: node.width,
h: node.height
};
}, this);
return result;
}.bind(this);
this.clearGrid = function () {
this.grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
$('#grid-stack').on('change', (event, items) => {
var result = this.getSerializedData();
var json = JSON.stringify(result, null, ' ');
$('#saved-data').val(json);
});
this.loadGrid();
};
});
</script>
</body>
</html>
You need to create a function to reset and redraw your line, then have that trigger when the window resizes and when the widget is updated (on the change event in gridstack). Make sure not to use extra styles, as they'll actually hinder your result. I've updated your example to work on window resize. It will not update when you resize the widget, but if you resize the window, you'll see the chart continues to fill up the full widget.
http://jsfiddle.net/kqada7zj/46/
Having some trouble with the YouTube API and hoping someone can help.
Here's my code:
HTML
<!doctype html>
<html lang="en">
<head>
<title>Video App</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Viral Videos App" />
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1 class="w100 text-center">Video </h1>
</header>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form action="#">
<p><input type="text" id="Search" placeholder="Type here..." autocomplete="off" class="form-control" /></p>
<p><input type="submit" value="Search" class="form-control btn btn-primary w100"></p>
</form>
<div id="results"></div>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=init"> </script>
</body>
</html>
And here is my CSS
body { background: #1B2836; }
header { margin-top:30px; }
header a { color: #01FFBE; text-decoration: none; }
header a:hover { text-decoration: none; }
form { margin-top: 20px; }
form, #results {padding: 0 20px; }
.item { margin-bottom: 25px; }
.w100 { width: 100%; }
.btn-primary { background: #01FFBE; border-color: #00C693; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: #00C693; border color: #00C693; }
And here is my Javascript
$(function() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 3,
order: "viewCount",
publishedAfter: "2015-01-01T00:00:00Z"
});
// execute the request
request.execute(function(response) {
var results = response.result;
$.each(results.items, function(index, item) {
console.log(item);
});
});
});
});
function init() {
gapi.client.setApiKey("AIzaSyDnp3yk0p6yWqpcK2iggS1WkwXMyEFYVvI");
gapi.client.load("youtube", "v3", function() {
//yt api is ready
});
}
It appears fine in my live preview and I can type and search but then I hit an error if I open the console.
This is the error I'm getting on the console
TypeError: undefined is not a function
at C:\nodefiles\new\server.js:101:16
at Layer.handle [as handle_request] (C:\nodefiles\new\node_modules\express\lib\router\layer.js:95:5)
at next (C:\nodefiles\new\node_modules\express\lib\router\route.js:131:13)
at done (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:36:7)
at indicateDone (C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:40:51)
at C:\nodefiles\new\node_modules\multer\lib\make-middleware.js:142:11
at WriteStream.<anonymous> (C:\nodefiles\new\node_modules\multer\storage\disk.js:43:9)
at WriteStream.emit (events.js:129:20)
at finishMaybe (_stream_writable.js:484:14)
at afterWrite (_stream_writable.js:362:3)
at onwrite (_stream_writable.js:352:7)
at WritableState.onwrite (_stream_writable.js:105:5)
at fs.js:1799:5
at FSReqWrap.strWrapper (fs.js:568:5)
This is my HTML page
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<style>
.thumb {
width: 24px;
height: 24px;
float: none;
position: relative;
top: 7px;
}
form .progress {
line-height: 15px;
}
.progress {
display: inline-block;
width: 100px;
border: 3px groove #CCC;
}
.progress div {
font-size: smaller;
background: orange;
width: 0;
}
</style>
</head>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<h4>Upload on file select</h4>
<button ngf-select="uploadFiles($files)" multiple
accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
Select Files</button>
<br><br>
Files:
<ul>
<li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div style="width:{{f.progress}}%"
ng-bind="f.progress + '%'"></div>
</span>
</li>
</ul>
{{errorMsg}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="controller3.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
</body>
</html>
This is my controller
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
$scope.uploadFiles = function(files) {
$scope.files = files;
angular.forEach(files, function(file) {
if (file && !file.$error) {
file.upload = Upload.upload({
url: '/api/data',
file: file
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
});
file.upload.progress(function (evt) {
file.progress = Math.min(100, parseInt(100.0 *
evt.loaded / evt.total));
});
}
});
}
}]);
This is my code on the server side
var multer = require('multer');
var upload = multer({
dest: __dirname + '/public',
});
app.post('/api/data', upload.single('file'), function (req, res, next) {
console.log("We are here fellas");
return res.ok();
});
The problem I think is because of that single thing mentioned in the end where I have written the code at the backend. I am following several tutorials because I am new to this subject.
I am following the github of Danial Farid, he made that nf-fileupload thing.
Please help me how to resolve this error.
Sorry if I sound stupid, I am new to this.
I don't know if this is necessary but this is the error I get on my front end after selecting the files (In Google Chrome Developer Console)
angular.js:10661 POST http://localhost:1339/api/data 500 (Internal Server Error)
The following line is wrong:
return res.ok();
Thats not an expressjs or nodejs function of the response object.
Should be something like:
res.status(200).send('OK');
I'm passing data to closure template(soy) via Javascript (json) but getting the about error in firebug.
// Simple html that starts the whole process
<html lang="en">
<head>
<title>Gigya Social Demo - getContacs</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lightbox_me.js"></script>
<!-- add the soy js here-->
<script type="text/javascript" src="emailcontacts.js"></script>
<script type="text/javascript" src="invite_emailcontacts_view.js"></script>
<script type="text/javascript">
function openLightbox() {
var data = [{"provider":"Yahoo","firstName":"myname","lastName":"mysurname","nickname":"mynick","email":"email#hotmail.com","photoURL":"http://l.yimg.com/dh/ap/social/profile/profile_b10.png"}];
var invite = new InviteContactEmailView();
console.log(invite);
invite.open(data);
return this;
}
</script>
<style>
#contactsOverlay {
-moz-border-radius: 6px;
background: #eef2f7;
-webkit-border-radius: 6px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;;
padding: 14px 22px;
width: 400px;
position: relative;
display: none;
}
</head>
<body onLoad="openLightbox()">
<div id="contactsOverlay">
</body>
</html>
// soy invoker in file invite_emailcontacts_view.js
function InviteContactEmailView() {
this.template = {};
this.template.element = $('#contactsOverlay');
this.elementSelector = this.template.element;
}
InviteContactEmailView.prototype.open = function(contacts) {
this.elementSelector.lightbox_me({destroyOnClose: true, centered: true, onLoad: testme(this.elementSelector, contacts) });
return this;
};
var testme = function(ele, contacts) {
ele.append(jive.invite.emailcontacts.create(contacts));
$('fieldset div').bind('click', function() {
var checkbox = $(this).find(':checkbox');
checkbox.attr('checked', !checkbox.attr('checked'));
});
}
// soy template (on compile resides in file: emailcontacts.js)
{namespace jive.invite.emailcontacts}
/**
* #param contacts
* #depends path=/var/www/statics/js/invite_emailcontacts_view.js
**/
{template .create}
{foreach $contact in $contacts}
<fieldset>
<div>
<div class="data"></div>
<input type="checkbox" id="checkbox">
</div>
</fieldset>
{/foreach}
{/template}
Any kind of help is greatly appreciated.
REgards
Where is the compiled template? Putting a breakpoint in there will tell you more. I suspect you are not passing a hash to the template when you invoke it with a key contacts. Basically the template you declared should get a data set which looks something like this:
{contacts: [....]}
this obviously assumes you are not compiling in advanced mode.