I am trying to put different data from cgi output in different DIV
Did that with below code, but now when new data comes, it appends the DIV,
I want to replace the DIV data and not append it.
I am new to this, As I am a hardware engg. do not know much of coding.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>Console</h1>
<pre>
<div id="d1" style="width: 25%; height: 200px; ">
</div>
<div id="d2" style="width: 25%; height: 200px; ">
</div>
</pre>
<script>
var source = new EventSource('/cgi-bin/data.cgi');
source.onmessage = function(e) {
var o = document.getElementById("d1");
o.innerHTML += e.data1 + '<br>';
var x = document.getElementById("d2");
x.innerHTML += e.data2 + '<br>';
};
</script>
</body>
</html>
Just want to replace existing data in D1 with new data which is coming from CGI.
You just need to do the following.
o.innerHTML = e.data1 + '<br>';
just remove that "+" before "="
Related
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)})
The following code builds 3 datagrids, 2 via markup and one via code.
When you press the "autoheight!" button only the markup datagrids resize.
I don't understand why the code datagrid does not work. As far as i can see, the same attributes are being initialized.
Thanks
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes /claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>
<meta charset="UTF-8">
<title>alubia</title>
<script type="text/javascript">
var test_store;
var layout = [
{name:"id", field:"id", width: '165px', noresize: 'true'},
{name:"data", field:"data", width: '125px', noresize: 'true'}
];
function loadData(gridId, divId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var mi_data = {
items : [],
identifier:"id"
};
for (var i = 0; i < 22; i++) {
mi_data.items.push({id: ""+i, data:"111 ! "+ i});
}
test_store = new ItemFileWriteStore({data: mi_data});
if (divId != null) {
var grid = new DataGrid({
id : gridId,
store : test_store,
structure : layout,
rowSelector : '0px',
autoHeight : false
});
grid.placeAt(divId);
grid.startup();
}
});
}
function fitHeight(gridId) {
var grid = dijit.byId(gridId);
grid.set('autoHeight', true);
grid.set('autoWidth', false);
grid.update();
}
loadData("grid", null);
loadData("grid2", "grid2Div");
loadData("grid3", null);
</script>
</head>
<body class="claro" style="font-family:sans-serif; font-size:12px;">
<button onclick="fitHeight('grid'); fitHeight('grid2'); fitHeight('grid3');">autoheight!</button>
<div id="grid2Div" style="height: 7em;" ></div>
<div id="grid" style="height: 7em;" data-dojo-id="grid" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
<div id="grid3" style="height: 7em;" data-dojo-id="grid3" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
</body>
</html>
again, dojo is a horrible tool. going to datatables (jquery plugin). the sun shines again.
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var currentImage = $('#slider div');
var nextImage = $('#slider').find('div').next;
var animation = .animate({'marginLeft' : "-=900px"}):
$(document).ready(function(){
$(currentImage).click(function(){
$(currentImage).animate();
});
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slider">
<div id="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div id="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
</body>
</html>
and CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#slideshow {
width: 100%;
float: left;
}
#slider {
margin: 10px auto;
height: 360px;
width: 900px;
border: 1px solid #999;
overflow: hidden;
}
#slider #image {
height: 360px;
width: 900px;
float: left;
position: relative;
z-index: 2;
}
This is a HTML (with Jquery in it) and a CSS file.
What i am trying to do is that if you click on an #image, the #image wil animate 900px to the left.
But i have a problem because nothing happen if i click on #image.
Can someone help me?
P.S. I am from the Netherlands, so I apologise if I have bad English.
You have a lot wrong with your script ... try this out:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slideshow">
<div id="slider">
<div class="image">
<img src="slide1.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide2.jpg" height="360px" width="960px">
</div>
<div class="image">
<img src="slide3.jpg" height="360px" width="960px">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var currentImage = $('#slider').find('div').first(),
nextImage = currentImage.next();
currentImage.click(function(){
$(this).animate({marginLeft:"-=900px"});
});
});
</script>
</body>
Couple points:
As was called out, make your images use a class instead of an id if you want to reuse the name. Multiple elements with the same id is invalid HTML.
You did not close <div id="slideshow"> ... I added the closing tag.
Move your script down to the bottom of the body ... this is best practice to improve the speed of page rendering (otherwise the page needs to parse the entire script before displaying any content).
Your use of .next() was incorrect ... it is a function, and all functions are called at bare minimum with open/close parenths.
You were already caching #slider div, so I leveraged that existing cachine when searching for nextImage (I applied the .first() function because it will get all of the divs if you don't filter it somehow.
Your storage of the animation was ... wrong, in about every way possible. You can store the animation in variable as a function, but only for reuse, and clearly you are not ready for that yet. I moved the animation down to where it should be, which is applied to the element in the click event itself.
When referencing the DOM names in the .animate() function, you only need to apply quotation marks if you use the CSS version ('margin-left' instead of marginLeft).
No guarantees that this will do what you think it should do because your CSS is ... too much to handle right now, but at least your HTML and JS will now be valid and you can focus on the problem at hand.
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.