The HTML sidebar get user input and save it in sheet:
with sheet's owner, it works fine (the data from sidebar are
correctly saved in the sheet)
with others sheet editors the data from sidebar is NOT been saved in the sheet.
Owner and users at same domain
Apps Script Dashboard shows NO error
I would be very grateful for any help on how I can fix this issue.
SIDEBAR SOURCE:
<!DOCTYPE html>
<html>
<!-- Style should be in the head -->
<style>
.info {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 14px;
font-weight: bold;
}
.msg {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 13px;
}
.container,
.buttons {
margin: 5px;
width: 95%;
padding: 2px;
font-size: 13px;
}
</style>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<div class="msg">
<p align="justify">Marque todos os motivos que levaram ao indeferimento do requerimento</p>
</div>
<div class="info">
<p id="stdname"></p>
<p id="stamp"></p>
<p id="applied"></p>
<p id="eRange"></p>
</div>
<div class="container">
<?!=rngValid?>
</div>
<div class="buttons">
<p>
<button class="action" id="action" onclick="saveReasons();">Salvar motivos</button>
</p>
<br>
</div>
<!-- These should be in the head. They should be there prior to page loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script>
var stamp = <?= stamp ?>;
var to = <?= to ?>;
var subject = <?= subject ?>;
var stdName = <?= stdName ?>;
var apply = <?= apply ?>;
var eRange = <?= eRange ?>;
document.getElementById("stdname").innerHTML = stdName;
document.getElementById("stamp").innerHTML = stamp;
document.getElementById("applied").innerHTML = apply;
document.getElementById("eRange").innerHTML = eRange;
function saveReasons() {
var selected = [];
//get all checkboxes
var checkboxes = document.getElementsByClassName("ui.checkbox");
console.log("checkboxes length: "+ checkboxes.length);
console.log("checkboxes: "+ checkboxes);
$("input:checkbox[name=sel]:checked").each(function() {
selected.push($(this).val());
$(this).prop( "checked", false );
})
console.log("selected: "+ selected);
console.log("eRange: "+ eRange);
google.script.run
.withFailureHandler(() => {console.log("Error running script")})
.process(selected,stdName, apply, eRange);
}
</script>
</body>
</html>
DEV TOOLS CONSOLE:
Net state changed from IDLE to BUSY 386795301-warden_bin_i18n_warden.js:67
Net state changed from BUSY to IDLE userCodeAppPanel:36
Error running script
On your client-side code there is the following
google.script.run
.withFailureHandler(() => {console.log("Error running script")})
.process(selected,stdName, apply, eRange);
The problem with the above code is that it give very low help to debug the main problem.
To get a meaningful error message replace
.withFailureHandler(() => {console.log("Error running script")})
to
.withFailureHandler((error) => {console.log('%s, %s',error.message, error.stack)})
Related
I have an index.cshtml that includes a partial razor view called "_CustomPartial.cshtml". The view is rendered ok. I included 2 javascript files in my partial view that reference a div from my partial. This part isn't working. I think the scripts are not being loaded. Below is my code:
_CustomPartial.cshtml:
<div style="overflow: auto; width: 100%; height: 100%;">
<div id="gvplayer" style="width:50%;height:400px; float: left; border: thin solid black;">
</div>
</div>
#section JavaScriptIncludes
{
<script type="text/javascript" src='#Url.Content("~/js/PlaybackScript.js")'></script>
<script type="text/javascript" src='#Url.Content("~/js/PlaybackStateMachine.js")'></script>
}
PlaybackScript.js:
console.log('initializing Playback object');
const playbackObject = CustomWindow();
$('#gvplayer').val(playbackObject);
_Layout.cshtml:
<body>
...
#RenderSection("JavaScriptIncludes", required: false)
</body>
The scripts are not loaded because the I don't see the log in my console.
I'm trying to use Vue's on-click directive on a div but it does not fire as intended. When I click the .demo class nothing happens; I should get a 'test clicked' in the console. I don't see any errors in the console, so I don't know what am I doing wrong.
var app = new Vue({
el: '#app',
data: {
title: 'This is the first vue app',
name: 'ALRAZY',
link: 'http://google.com',
attachRed: false
},
methods: {
changeLink: function() {
this.link = 'http://apple.com'
}
}
})
body {
font-family: 'Trykker', 'Spectral SC', serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Spectral SC', serif;
}
p {
font-family: 'Trykker', serif;
}
.demo {
width: 100px;
height: 100px;
background-color: grey;
display: inline-block;
margin: 10px;
}
.red {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Spectral+SC:400,400i,500,500i,600|Trykker" rel="stylesheet" >
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="container">
<div class="row">
<div id="app">
<h1>{{ title }} </h1>
<input type="text" v-model="name" name="">
<p> {{ name }}</p>
<button onclick="changeLink" class="btn btn-danger btn-lg">click to change</button>
<a :href="link" target="_blank">Link</a>
<!-- style-vue -->
<div class="demo" onclick="attachRed = !attachRed" :class="{red: attachRed}"></div>
<p v-if="show">You can see me!!!</p>
<p v-else>Do You see me??</p>
</div>
</div>
</div>
You're using the standard onclick attribute which is not going to trigger vue methods. Try using v-on:click="changeLink()" or #click="changeLink()" (I'm not entirely sure if the second is the correct syntax). That should resolve your problem.
Similarly, you can do #click="attachRed = !attachRed".
I am creating a Pinterest like layout in ASP.NET webform and I followed following two tutorials
Creating Pinetrest like Layout in ASP.NET
How to use Masonry
However, I made changes in the first tutorial based on second and I am getting below output
Clearly, this isn't what I was looking. The gap between two rows and columns is high.
Below is my code:
<
style type="text/css">
body
{
background-color:#EEEEEE;
}
#imgLoad
{
position:fixed;
bottom:0;
left:40%;
display:none;
}
.item {
width: 220px;
margin: 10px;
float: left;
background-color:honeydew;
}
</style>
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<img src="<%# Eval("Url") %>" />
<p><%# Eval("Description") %></p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
How do I fix it?
I believe this is related to the height, may be the row height of repeater control takes the highest among the column.
I did tried to do it with ASp.NET MVC
Controller
IEnumerable<Product> model = ProductRepository.GetData(1, 25);
return View(model);
View
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
.item {
width: 220px;
margin: 5px;
float: left;
background-color:honeydew;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/Mansory.js" type="text/javascript"></script>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: 100,
isAnimated: false
});
});
</script>
#foreach (var item in Model) {
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
}
but same result
EDIT 1
I have changed my script to
<script type="text/javascript">
$(function () {
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
</script>
and code to
#foreach (var item in Model) {
<div id="container">
<div class="item">
<img src="#(item.Url)" />
#Html.DisplayFor(modelItem => item.Description)
</div>
</div>
}
but same result
Ok, a few things:
You have spelled "Masonry" wrong when initializing the script
Put a div with Id "container" around your items list
In stead of using $container.imagesLoaded make the whole javascript section run when page is loaded
Like this:
$(function(){
var $container = $('#container');
$container.masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: false
});
});
Then it should work.
This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.
https://github.com/yury-egorenkov/pins-grid
I set up a simple form to upload files using KendoUI, and looks and works great on my dev machine (OSX Apache), but uploaded to my server (Linux Apache) it looks bad as you can see in the images. I tested with same results in both firefox and chrome, and both are fine from local copy and bad from remote. I have tripple checked that all the files are the same on both local and remote servers.
vs
My code is as follows...
<!doctype html>
<html>
<head>
<title>Test | Animation Tool</title>
<link href="./kendo/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="./kendo/styles/kendo.kendo.min.css" rel="stylesheet"/>
<script src="./jquery.js"></script>
<script src="./kendo/js/kendo.all.min.js"></script>
<style type="text/css">
body{
background-Color: #f78049;
background-image: url(stripe.png);
background-repeat: repeat-y;
margin:0;padding:0;
font-family:sans-serif;
}
#sidebar{
background-Color: #f78049;
border: 3px solid #ef652a;
margin:0;padding:0;
width: 300px;
float: left;
height: 900px;
}
.step{
border-top: 3px solid #ef652a;
}
.step p.first{
display: inline;
}
.step-id{
background-color: #ef652a;
-moz-border-radius: 7px;
font-size: 30px;
margin: .2em .2em .2em 0;
padding: .1em .2em;
}
.t-button{
margin: 0 37px 0 37px;
width:203px;
top: 10px;
}
button.t-button{
margin: .2em 37px .2em 37px;
width:220px;
}
.t-upload-files{
margin: 0.2em 2.6em 1em;
}
#main{
float:left;
}
h1, h2{
margin:0;padding:0 0 0.3em;
text-align:center;
color:#ffd;
}
#phone,#anim{
width:401px;
height:875px;
background-image:url(phone.png);
position: absolute;
top:10px;
left:350px;
}
#anim{
background-image:url("files/spec.png");
background-position:0 0;
background-repeat:no-repeat;
height:480px;
left:391px;
top:144px;
width:320px;
}
a img{
border:none;
}
</style>
<script type="text/javascript">
$(function(){
var i=0, x={timer:null, frames:4, frameWidth:320, frameRate:150};
var addTestFile = function(filename){
$('#test-files').append(
$('<button />').addClass('t-button custom').html(filename).click(function(){
$anim = $('#anim').css({backgroundImage:'url("files/'+filename+'")'})
var loop = function(){
$anim.css({backgroundPosition:"0 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-320px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-640px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-960px 0"}).animate({backgroundPosition:"-640px 0"},250,function(){
})
})
})
})
}
clearInterval(x.timer)
x.timer = setInterval(function(){
loop()
}, 950)
})
)
}
$.get('files.php',function(d){
$.each(d, function(i,file){
addTestFile(file)
})
})
$("#files").kendoUpload({
async: {
saveUrl: "./save.php",
// removeUrl: "./remove.php",
autoUpload: true
},
showFileList: true,
success: function(e){
$('.t-file').last().siblings().remove()
var filename = e.files[0].name.replace(/\s/g,'-')
$('#test-files button').filter(function(){
return $(this).text() == filename
}).remove()
addTestFile(filename)
console.log('uploaded' + e.files[0].name);
// return true;
},
error: function(e){
console.log("Error (" + e.operation + ")");
e.preventDefault(); // Suppress error message
}
});
});
</script>
</head>
<body>
<div id="sidebar">
<h2>Animation Tool</h2>
<div id='one' class='step'>
<span class='step-id'>1</span>
<p class="first">Get the specification image</p>
<p><a href="getspec.php" class='t-button'>Download image...</a></p>
</div>
<div id='two' class='step'>
<span class='step-id'>2</span>
<p class="first">Edit the downloaded image file</p>
</div>
<div id='three' class='step'>
<span class='step-id'>3</span>
<p class="first">Upload your edited file</p>
<input name="files" id="files" type="file" />
</div>
<div id='two' class='step'>
<span class='step-id'>4</span>
<p class='first'>Test you animation</p>
<span id='test-files'></span>
</div>
</div>
<div id="main">
<div id="anim"></div>
<div id="phone"></div>
</div>
</body>
</html>
My guess is one of the css files is not getting pulled in. I created a fiddle here where I left out the kendo.common.min.css and the result is not exactly the same as yours, but too darn close.
http://jsfiddle.net/B4dWB/
Check your css references and make sure they are all correct and loaded in.
The easiest way to validate everything is loading correctly is to use your browser developer tools (Firebug in Firefox, Developer Tools in Chrome/Safari).
On the network tab, you should be able to see if the Kendo UI CSS and JavaScript files are being properly loaded from your remote server. (This is also a good time to make sure you're not seeing a cached version of your page/resources. That's always an easy browser debugging gotcha.)
In general, since Kendo UI runs in the browser, your hosting environment and web server should have no impact. As long as the files reach the browser, the rendering and behavior should function properly.
I copied an example from the dojo site using Borderlayout. However, when I load in the browser , the entire data is shown for all the section . Then after a few second the content is refersh and the data is displayed correctly.
here is code that i copied . Thanks for your help
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; } #borderContainer
{ width: 100%; height: 100%; }
</style>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true"
liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"
style="width: 100px;">
Hi
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Hi, I'm center
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
This looks a bit upside down : you should put your javascripts in the head section and load the dojo libraries in first place. That's not your problem though.
What happens is that when the page loads, dojo loads all the modules that you "dojo.require", then parses all your tags containing the attribute "dojoType" and processes them for rendering, and this takes time.
So the flickering that you're seeing is the difference between the page before and after the widgets are parsed.
You should add a preloader div and hide it once the page is parsed (see this example).
This is what it would look like for your example :
<html>
<head>
<title>Preloader example</title>
<!– every Dijit component needs a theme –>
<link rel="stylesheet"
href="http://o.aolcdn.com/dojo/1.4/dijit/themes/soria/soria.css">
<style type="text/css">
#preloader,
body, html {
width:100%; height:100%; margin:0; padding:0;
}
#preloader {
width:100%; height:100%; margin:0; padding:0;
background:#fff
url(’http://search.nj.com/media/images/loading.gif’)
no-repeat center center;
position:absolute;
z-index:999;
}
#borderContainer {
width:100%; height:100%;
}
</style>
<!– load Dojo, and all the required modules –>
<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var hideLoader = function(){
dojo.fadeOut({
node:"preloader",
onEnd: function(){
dojo.style("preloader", "display", "none");
}
}).play();
}
dojo.addOnLoad(function(){
// after page load, load more stuff (spinner is already spinning)
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
// notice the second onLoad here:
dojo.addOnLoad(function(){
dojo.parser.parse();
hideLoader();
});
});
</script>
</head>
<body class="soria">
<div id="preloader"></div>
<div dojoType="dijit.layout.BorderContainer" id="borderContainer" design="sidebar" gutters="true" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">I'm Center</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
if(dojo.isIE){
addEvent(window, 'load', function(event) {
dojo.parser.parse();
});
}else{
dojo.addOnLoad(function(){
dojo.addOnLoad(function(){
dojo.parser.parse();
});
});
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
disable parseOnLoad and manually add event to parse widgets for ie.