html dropdown with SandBoxMode.IFRAME - drop-down-menu

I am trying to make a piece of code (sorry lost the link to original) but I am struggling and cannot get past the error message "The script completed but the returned value is not a supported return type". I have looked at changing this to a string, but to be honest I am at the limit of my ability to understand what I am trying to do. Any assistance greatly appreciated.
code.gs is:
function getMenu1() {
var t = HtmlService.createTemplateFromFile('myForm');
t.data = SpreadsheetApp
.openById('11_3xQkJdQ172_97LWUoOu22qUMBS-vSrr7TN9bqWicg')
.getSheetByName('PROJECTS')
.getRange('D:D')
.getValues();
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
Logger.log('doGetMenu1 ran');
}
and myform.html is:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<body style="font-family: Arial, Helvetica, sans-serif">
<div>
<input class="left" type="text" name="cuStaff" id="cuStaff" style="width=150px" required>
<datalist id="cuStaff">
</datalist>
<input class="left" type="date" name="dateA" id="dateA" style="width:150px" required>
<input class="left" type="time" name="timeA" id="timeA" style="width:75px" required>
</div>
</body>
<select id="cuStaff">
<option> Choose a option </option>
</select >
<body onload = "addList()"></body>
<script>
function addList() {
console.log('addList ran!');
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(injectMyContent)
.getMenu1();
};
window.injectMyContent = function(argReturnedData) {
for(var i = 0; i < argReturnedData.length; i++) {
var opt = argReturnedData[i];
var document = myForm.html
var el = document.createElement("option");
var el = document
el.text = opt;
el.value = opt;
select.appendChild(el);
};
};
window.onFailure = function(err) {
alert('There was an error! ' + err.message);
};
</script >
</head>
</html>
JSFiddle here

Seems like the 2 functions are being mixed. Try:
function doGet() {
var t = HtmlService.createTemplateFromFile('myForm');
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getMenu1() {
var data = SpreadsheetApp
.openById('11_3xQkJdQ172_97LWUoOu22qUMBS-vSrr7TN9bqWicg')
.getSheetByName('PROJECTS')
.getRange('D:D')
.getValues();
Logger.log('getMenu1 ran')
return data;
}

Related

PHPExcel attempting to read Excel file using ajax() call is failing

I am attempting to read an Excel File using PHPExcel Lib through an ajax call. However, the read attempt is causing an error of PHPExcel_Reader_Exception: Could not open for reading! File does not exist.
My index.php is as follows:-
<?php
ob_start();
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
session_start();
if ( isset($_POST['label']) ) {
var_dump($_POST['label']);
}
?>
<!doctype html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
var label;
function checkfile(sender) {
var validExts = new Array(".xlsx", ".xls");
var fileExt = sender;
fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
if (validExts.indexOf(fileExt) < 0) {
alert("Invalid file selected, valid files are of " +
validExts.toString() + " types.");
return false;
} else return true;
}
$(function() {
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
$(document).ready( function() {
$(':file').on('fileselect', function(event, numFiles, label) {
if(checkfile(label)== true){
var input = $(this).parents('.input-group').find(':text'),
log = label;
if(input.length) {
input.val(log);
} else {
// if(log) alert(log);
}
}
$.ajax({
//url:"../uploadxlsx/readxlsx.php",
url:"uploadxlsx/readxlsx.php",
method:"POST",
data:{label:label },
success:function(data){
$('#sheetnames').html(data);
}
});
});
});
});
</script>
</head>
<body>
<br>
<br>
<br>
<div class="container">
<table>
<thead>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Browse <input type="file" id="uploadfile" name="uploadfile" style="display: none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
</span>
</label>
<input type="text" class="form-control" readonly="">
</div>
</thead>
</table>
</div>
<div class="input-group" name='sheetnames' id='sheetnames'>
</div>
</body>
</html>
The ajax called php file readxlxs.php is as follows:-
<?php
ini_set("xdebug.var_display_max_children", -1);
ini_set("xdebug.var_display_max_data", -1);
ini_set("xdebug.var_display_max_depth", -1);
ob_start();
include_once $_SERVER['DOCUMENT_ROOT'] . '/CommandWks/phpAssets/Classes/PHPExcel.php';
$exceldata = array();
//$inputfilename = $_POST['label'];
$inputfilename = basename($_FILES['fileName']);
var_dump($inputfilename);
$inputfiletype = PHPExcel_IOFactory::identify($inputfilename);
$objReader = PHPExcel_IOFactory::createReader($inputfiletype);
$objPHPExcel = $objReader->load($inputfilename);
$excelReader = PHPExcel_IOFactory::createReaderForFile($inputfiletype);
$excelObj = $excelReader->load($inputfiletype);
$worksheet = $excelObj->getSheet(0);
$lastRow = $worksheet->getHighestRow();
var_dump($lastRow);
ob_end_flush();
?>
A screenshot of the error displayed is this
Where is the error? Or is it that PHPExcel cannot be used with ajax?
general advice
you could use browser debug console (F12 if chrome) to see if file actually got upload
you could var_dump($_FILES) to see actually what server got
this has nothing to do with begin ajax vs PHPExcel, I think you got it wrong at the basic level of how to handle form data in PHP
and on your question, since your file input is like this
<input type="file" id="uploadfile" name="uploadfile"
variable name must be
$_FILES["uploadfile"]
and "name" is just name, for actual file you'll have to use
$_FILES["uploadfile"]["tmp_name"]
read this for more info on $_FILES array structure
Array
(
[file1] => Array
(
[name] => MyFile.txt (comes from the browser, so treat as tainted)
[type] => text/plain (not sure where it gets this from - assume the browser, so treat as tainted)
[tmp_name] => /tmp/php/php1h4j1o (could be anywhere on your system, depending on your config settings, but the user has no control, so this isn't tainted)
[error] => UPLOAD_ERR_OK (= 0)
[size] => 123 (the size in bytes)
)
)

Getting Error in a chatroom that uses socket.io

I am using code as follow
server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
users = [];
connections = [];
server.listen(process.env.PORT || 3000);
console.log('Server Running...');
app.get('/',function (req, res)
{
res.sendFile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket){
connections.push(socket);
console.log('Connected to %s sockets connection', connections.length);
// Disconnect
socket.on('disconnect', function (data){
if(!socket.username) return;
users.splice(users.indexOf(socket.username), 1);
updateUsernames();
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnected: %s socket connected', connections.length);
});
//Send Message
socket.on('send message', function(data){
console.log(data);
io.sockets.emit('new message', {msg: data});
});
// New user
socket.on('new user', function(data, callback){
callback(true);
socket.username = data;
console.log(socket.username);
users.push(socket.username);
updateUsernames();
});
function updateUsernames(){
io.sockets.emit('get users', users);
}
});
index.html -> Client
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://immodernafrican.move.pk:3000/socket.io/socket.io.js"></script>
<style type="text/css">
body{
margin-top: 30px;
}
#messageArea{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id="userFormArea" class="row">
<div class="col-md-12">
<form id="userForm">
<div class="form-group">
<label>Enter Username</label>
<input class="form-control" id="username"/>
<br/>
<input type="submit" class="btn btn-primary " value="Login">
</div>
</form>
</div>
</div>
<div class="row" id="messageArea">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message"></textarea>
<br/>
<input type="submit" class="btn btn-primary " value="Submit">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var socket = io.connect('http://immodernafrican.move.pk:3000');
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
var $messageArea = $('#messageArea');
var $userFormArea = $('#userFormArea');
var $userForm = $('#userForm');
var $users = $('#users');
var $username = $('#username');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
});
$userForm.submit(function(e){
e.preventDefault();
socket.emit('new user', $username.val(), function(data){
if(data){
$userFormArea.hide();
$messageArea.show();
}
});
$username.val('');
});
socket.on('get users', function(data){
var html = '';
for(i=0; i<data.length; i++)
{
html += '<li class="list-group-item">'+data[i]+'</li>';
}
users.html(html);
});
});
</script>
</body>
</html>
This is running accurately on localhost but as soon as i upload it to online hosting it gives an error. These are the error i am getting i have seen in console
(index):7 GET http://immodernafrican.move.pk:3000/socket.io/socket.io.js net::ERR_CONNECTION_TIMED_OUT
(index):58 Uncaught ReferenceError: io is not defined
at HTMLDocument.<anonymous> (http://immodernafrican.move.pk/:58:17)
at n (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14784)
at Object.fireWith (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:15553)
at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:9773)
at HTMLDocument.B (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14348)
i have tried to change
var socket = io.connect('http://immodernafrican.move.pk:3000');
to
var socket = io.connect();
but invain can anyone please help me regarding this issue so my chatroom can work
Thanks

Sorting HTML cant get an output

I'm new to this page. I have some problem regarding this sorting that I made. This is the code:
<html>
<body>
<p>Enter First Number:<input type="text" id="1"></p>
<p>Enter Second Number:<input type="text" id="2"></p>
<p>Enter Third Number:<input type="text" id="3"></p>
<p>Enter Fourth Number:<input type="text" id="4"></p>
<p>Enter Fifth Number:<input type="text" id="5"></p>
<button type="button" onclick="SortThis()" >Sort</button>
<script>
function SortThis()
{
var tempVar;
var x;
var y;
var numbers = new Array[];
numbers[0]=document.getElementById("1");
numbers[1]=document.getElementById("2");
numbers[2]=document.getElementById("3");
numbers[3]=document.getElementById("4");
numbers[4]=document.getElementById("5");
for(x=0; x<=4 ; x++)
{
for(y=0; y<=4; y++)
{
if(numbers[x]<numbers[y])
{
tempVar=numbers[x];
numbers[x]=numbers[y];
numbers[y]=tempVar;
} } } }
for(var x=0; x<=numbers.length ; x++)
{
var output =document.getElementById("output");
output.innerHTML=(numbers[x] + " , ");
}
</script>
<p id="output"></p>
</body>
</html>
The problem here is that I can't get an output. I want an output that will print using innerhtml.
Array will be declared as Array() not [] the append statment will be this output.innerHTML += numbers[x]+',';
and to take value you should give numbers[0]=document.getElementById("1").value; not numbers[0]=document.getElementById("1");
I am not very good with the formatting !

Ajax ready state not stuck on 1

after searching the internet I was unable to find an answer as to why my AJAX code is not working. My assignment is to retrieve a text file and display it to the browser using AJAX but the ready state stops at 1. an example file is canada.txt and is located in the directory http://157.201.194.254/~ercanbracks. The .html and .js files are below:
HTML file:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>AJAX</title>
<link rel="stylesheet" type="text/css" href="assign09.css" />
<script type="text/javascript" src="assign09.js"></script>
</head>
<body>
<h1>Ten Largest Cities</h1>
<h3>Select a Country:</h3>
<form action="">
<select id="country">
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
<option value="russia">Russia</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit"
onclick="makeRequest(document.getElementById('country').value)" />
<div id="error"> </div>
</form>
<h3>Cities:</h3>
<div id="cities">
<pre>
City Population
------------------ ---------------
<span id="cityList"></span>
</pre>
</div>
</body>
</html>
.js file:
var httpRequest;
var countryOption;
function makeRequest(option)
{
countryOption = option;
if (window.XMLHttpRequest) // Modern Browsers
{
httpRequest = new XMLHttpRequest();
}
else // older IE browsers
{
try
{
httpRequest = new ActiveXObject("Msxm12.XMLHTTP");
}
catch (e)
{
try
{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert('ERROR - Unable to make XMLHttpRequest');
}
}
}
if (!httpRequest)
{
alert('ERROR: httpRequest failed -- try a different browser');
return false;
}
else
{
var url = "http://157.201.194.254/~ercanbracks/" + option + ".txt";
alert('Ready State = ' + httpRequest.readyState);
httpRequest.onreadystatechange = getCities;
httpRequest.open("GET", url, true)
httpRequest.send(null);
}
}
function getCities()
{
alert('Ready State = ' + httpRequest.readyState);
if (httpRequest.readyState == 4)
{
alert('Ready State = ' + httpRequest.readyState);
if (httpRequest.status == 200)
{
var response = httpRequest.responseText;
document.getElementById("cities").innerHTML = response;
}
else
{
alert('problem with request');
alert('Ready State = ' + httpRequest.statusText);
}
}
}

ajaxupload el is undefined

i haved trying to use ajax upload image. here is my code
$(function () {
var btnUpload = $('#post_pd_thumnail');
if ($("#id").val()) var post_id = $("#id").val();
else var post_id = 0;
new AjaxUpload(btnUpload, {
action: site_root_domain + "/product/upload_image/" + post_id,
name: 'file_upload',
onSubmit: function (file, ext) {
if ($('#post_pd_thumnail').val() != '') {
if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
jAlert(lang_error_upload_avatar, lang_alert_notice);
return false;
}
}
$('#preview').html('<img style="margin-left:45px;margin-top:45px;" border="0" width="16" height="11" src="' + site_root_domain + '/templates/images/icons/loading_2.gif" />');
},
onComplete: function (file, response) {
if (!response) {
jAlert(lang_error_upload_avatar, lang_alert_notice);
} else {
img_upload = 1;
$('#preview').html(response);
}
return;
}
});
});
And my HTML is:
<div id="preview">{$preview}</div>
<div class="fileupload">
<input type="file" name="post_pd_thumnail" id="post_pd_thumnail" value="" />
</div>
<input type="hidden" name="id" id="id" value="{$data['product']['post_id']}" />
and i got this error when upload image "el is undefined" and the function does not work correctly can anyone help me solve this problem please
Try to change the file element to button like,
<div class="fileupload">
<input type="button" name="post_pd_thumnail" id="post_pd_thumnail" value="" />
</div>
Here is the solution.
* Attaches event to a dom element
*/
function addEvent(el, type, fn){
// 610 BUG
if (el == undefined) return;
if (w.addEventListener){
el.addEventListener(type, fn, false);
} else if (w.attachEvent){
var f = function(){
fn.call(el, w.event);
};
el.attachEvent('on' + type, f)
}
}

Resources