I'm trying to work out why a simple sidebar is unable to catch the "click" of the button and call another script. In the javascript console in chrome, I am getting an "uncaught" notification:
Here is my apps script code:
function openAppointmentSidebar(){
var html = HtmlService.createTemplateFromFile('appointmentSidebar');
var sidebar_html = html.evaluate();
SpreadsheetApp.getUi().showSidebar(sidebar_html);
}
function setAppointmentSidebar(){
var ok = Browser.msgBox("opened!", Browser.Buttons.OK);
}
And then this is my HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<div class="block form-group">
<table>
<tr>
<th>Action</th>
<th>Zapier Hook URL</th>
</tr>
<tr>
<td width="40%">Not Yet</td>
<td> <input type="text" id="cf1" /></td>
</tr>
<tr>
<td>No</td>
<td> <input type="text" id="cf2" /></td>
</tr>
<tr>
<td>Sale </td>
<td><input type="text" id="cf3" /></td>
</tr>
</table>
<br>
<button class="action" id="btn_submit">Save Settings</button>
<br/>
</div>
</div>
<div class="sidebar bottom">
<span class="gray branding-text">Powered by</span>
</div>
<script>
function dostuff(){
google.script.run.openAppointmentSidebar();
}
document.getElementById("btn_submit").addEventListener("click",dostuff);
</script>
</body>
</html>
I'm almost certain I had this working in previous sidebars but obviously something isn't quite right.
Related
How can i move to the next page after clicking onthe submit button, in my case my submit button is not working. I used some JQuery code inside this html page, is that a reason?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected > Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id = "Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<script>
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if ($("#to_check_recognition").val() == 'yes')
$("#Average_orientation").show();
else
$("#Average_orientation").hide();
}
</script>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>
</body>
</html>
You have given required attribute to input:
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required />
When you select no & input is hidden, due to required attribute, form is not submitted.
Change value of input to 0 then submit form:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected > Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id = "Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<script>
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if($("#to_check_recognition").val() == 'yes'){
$("#Average_orientation").show();$("input[name=Average_orientation]").val("");}else if($("#to_check_recognition").val() == 'no'){
$("#Average_orientation"). hide();$("input[name=Average_orientation]").val("0"); }
}
</script>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>
</body>
</html>
in my case my submit button is not working
When I am testing your code I am correctly redirecting to "form_table_output.html"
What do you mean, when you click nothing happen or when you click something happen but it is not what you want?
submit button is working fine and correctly redirect to "form_table_output.html".
But the error is a bad path i.e. this is path "form_table_output.html" not exist. So please define it in your codebase.
I have HTML content that is both horizontally and vertically centered. It looks just how I want it to whenever my screen window is full size. However, if I shrink the window, the content gets bunched up together. What can I do so that the content will adjust with the shrinking of the window and not bunch together?
This the main CSS that I am using on the content that is horizontally and vertically centered...
#one {
#image {
height: auto;
width: 25%;
}
height: 5em;
margin: 0;
position: absolute;
top: 50%;
left: 40%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
#two {
height: 10em;
margin: 0;
position: absolute;
top: 50%;
left: 60%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
HTML:
<body>
<div id="my-div">
<div id="header">
</div>
<!-- Image and Table Name -->
<section id="one">
<img src="image.png" id="image"><br><br>
</section>
<section id="two">
<u id="text">Table Name:</u><br>
<input type="text" value="Stage_Rebate_Index" id="tableNameInput" readonly><br><br>
<div id="dialog-form" title="Add Supplier ID">
<p class="validateTips">All form fields are required.</p>
<!-- Dialog box displayed after add row button is clicked -->
<form >
<fieldset>
<label for="mr_id">MR_ID</label>
<select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
<?php foreach($user1->fetchAll() as $user2) { ?>
<option>
<?php echo $user2['MR_ID'];?>
</option>
<?php } ?>
</select><br><br>
<label for="supplier_id">Supplier ID</label>
<input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<!-- Form -->
<form name="myForm" action="">
<!-- Dropdown List -->
<select name="master_dropdown" id="mr_id">
<!-- Javascript that sets 2nd dropdown as the value of the selected value in first dropdown -->
<script>
document.querySelector('#mr_id').addEventListener('change', updateSelection, false);
document.querySelector('#mr_id').addEventListener('change', updateSelection, false);
function updateSelection(event) {
// Get the value from this select
var selectedValue = event.target.value;
// find the select object that you want to set the value for
var selectObjectToSet = document.querySelector('#mr_id_dialog');
selectObjectToSet.value = selectedValue;
// Call the function that was in the onChange listener
updatetable(this.form);
}
</script>
<option selected value="select">Choose a MR_ID</option>
<?php foreach($users->fetchAll() as $user) { ?>
<option data-name="<?php echo $user['MR_ID'];?>">
<?php echo $user ['MR_ID'];?>
</option>
<?php } ?>
</select>
</form>
<!-- Table -->
<p>
<div id="table_div">
<table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
<thead>
<tr class="ui-widget-header">
<td>MR ID</td>
<td>Supplier ID</td>
</tr>
</thead>
<?php foreach($users_one->fetchAll() as $supp) { ?>
<tr>
<td class="mr_id"><?php echo $supp['MR_ID'];?></td>
<td class="supp_id"><?php echo $supp['Supp_ID'];?></td>
</tr>
<?php } ?>
</table>
</div><br>
<button class="ui-button ui-corner-all ui-widget" id="insertButton">Add Supplier ID</button>
</section>
<div id="footer">
</div>
</div>
</body>
Read about Responsive Design.
You need to use a viewport for that purpose.
<meta name="viewport" content="width=device-width, initial-scale=1">
I have been reading everything but I'm not sure why i can not get the buttons to center under the top image. The .page_wrap margins are both auto?
I am trying to get the buttons to center on a desktop browser and samsung note 3 browser
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
}
.page_wrap {
border:0px solid black;
width:350px;
height:10px;
margin-left:auto;
margin-right:auto;
}
.space {
border:0px solid black;
width:250px;
height:150px;
margin-left:auto;
margin-right:auto;
}
input[type="button"], input[type="submit"], button {
background: none;
background-image: url(http://i.imgur.com/9qwHx0c.png);
background-position: center center;
background-repeat: no-repeat;
border: 0px;
height: 71px;
width: 227px;
font-weight:200;
font-size: 40px;
color: #FFFFFF;
/* add the rest of your attributes here */
}
img.shedremote {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/shedmine.css" />
<script>
var device = "http://192.168.1.178/";
function reqListener() {
console.log(this.responseText);
}
function setLed(i, state) {
if (state === undefined || state !== 'on') state = 'off';
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
if (i === 'all') {
oReq.open("GET", device + "?all=" + state);
} else {
oReq.open("GET", device + "?led" + i + "=" + state);
}
oReq.send();
}
</script>
</head>
<body>
<div class="space"></div>
<img class="shedremote" src="http://i.imgur.com/wTL0PlY.png" alt="shedremote">
<div class="space"></div>
<div class="page_wrap">
<table style="width:200%">
<tr>
<td> <input type="button" value="Lights on!" onClick="setLed(1,'on')"/> </td>
<td> <input type="button" value="Lights Off!" onClick="setLed(1,'off')"/> </td>
</tr>
<tr>
<td> <input type="button" value="door open" onClick="setLed(2,'on')" /> </td>
<td> <input type="button" value="door locked" onClick="setLed(2,'off')"/> </td>
</tr>
<tr>
<td> <input type="button" value="3 on" onClick="setLed(3,'on')" /> </td>
<td> <input type="button" value="3 off" onClick="setLed(3,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="Disco on" onClick="setLed(4,'on')" /> </td>
<td> <input type="button" value="Disco off" onClick="setLed(4,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="5 on" onClick="setLed(5,'on')" /> </td>
<td> <input type="button" value="5 off" onClick="setLed(5,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="6 on" onClick="setLed(6,'on')" /> </td>
<td> <input type="button" value="6 off" onClick="setLed(6,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7 on" onClick="setLed(7,'on')" /> </td>
<td> <input type="button" value="7 off" onClick="setLed(7,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="8 on" onClick="setLed(8,'on')" /> </td>
<td> <input type="button" value="8 off" onClick="setLed(8,'off')" /> </td>
</tr>
</table>
</div>
</body>
</html>
To horizontally center the div itself:
/* If the div has the class "button-wrapper" */
.button-wrapper {
margin: 0 auto;
}
Or, to horizontally center the buttons within the div:
/* If each button has the class "button-centered" */
.button-centered {
text-align: center;
}
EDIT: I suppose you could keep using tables if you like. However, tables for layout is often not considered "best practice." For example, responsive design becomes more difficult because tables cannot automatically adapt to different screen sizes.
for your desktop problem i would try:
.page_wrap
{
border:0px solid black;
width:500px;
margin: 0 auto;
}
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
width:100%;
}
and remove style from the html document.
another thing you your page is not compatible for Samsung note 3 browser
you can try and work with Media Queries to help fit your page for desktop and smartphone.
.
I have created ASP page, which looks like:
I need something like this center image:
I tried to set background for header, it works fine. However, I am not able to set for next button.
Here is my code snippet:
$(document).ready(function() {
// CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
var container = $(document.createElement('div')).css({
padding: '5px', margin: '20px', width: '170px'});
$(container).append('<input type=text class="input" id="tb1" value="Text Element 1" />');
$(container).append('<input type=text class="input" id="tb2" value="Text Element 2" />');
$(container).append('<input type=text class="input" id="tb3" value="Text Element 3" />');
$(container).append('<input type=text class="input" id="tb4" value="Text Element 4" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
var iCnt = 4;
$('#btAdd').click(function() {
if (iCnt <= 19) {
iCnt = iCnt + 1;
// ADD TEXTBOX.
$(container).append('<input type=text class="input" id=tb' + iCnt + ' ' +
'value="Text Element ' + iCnt + '" />');
$('#main').after(container); // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
}
else { // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)
$(container).append('<label>Reached the limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
$('#btRemove').click(function() { // REMOVE ELEMENTS ONE PER CLICK.
if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }
if (iCnt == 0) { $(container).empty();
$(container).remove();
$('#btSubmit').remove();
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt')
}
});
$('#btRemoveAll').click(function() { // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
$(container).empty();
$(container).remove();
$('#btSubmit').remove(); iCnt = 0;
$('#btAdd').removeAttr('disabled');
$('#btAdd').attr('class', 'bt');
});
});
// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
function GetTextValue() {
$(divValue).empty();
$(divValue).remove(); values = '';
$('.input').each(function() {
divValue = $(document.createElement('div')).css({
padding:'5px', width:'200px'
});
values += this.value + ','
});
$(divValue).append('<p><b>Your selected values</b></p>' + values);
$('body').append(divValue);
}
#tbl-two-columns td.invitation-col2
{
padding-left:0px !important;
}
.cs_pendingInvitation img
{
margin-top:3px;
}
// styles for invite more friends -- selva
.invitation-header
{
background: none repeat scroll 0% 0% #C2EBFF;
z-index: 99;
}
#btAdd
{
color: #00BFFF;
}
#main a{
text-decoration:none;
}
input#nextbutton {
padding: 5px 15px;
background: none repeat scroll 0% 0% #00BFFF;
color: #FFF;
border: 0px none;
cursor: pointer;
border-radius: 5px;
}
.input {
color: #333;
height: 25px;
margin: 5px;
width: 380px;
}
<table class="tblmain atep" style="width: 450px;" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdbodycontent" align="left">
<table class="wrapper" style="width:450px;margin:0 auto;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="tdcontainer" align="left">
<table style="width:450px;" id="tbl-two-columns" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<th class="invitation-header" valign="top"> <!-- th added for invite header --selva -->
Help make your neighborhood safer, Invite friends and family
</th> <!-- END - th added for invite header --selva -->
</tr>
<tr>
<td class="invitation-col2" valign="top">
<table id="tab1" class="tab-container" style="width:400px;" cellpadding="0" cellspacing="0">
<tbody><tr>
<td valign="top">
<form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onsubmit="return GetTextValue()">
<!--START - Invite Buttons - Selvarani-->
<div style="padding: 5px; margin: 0px;"><input class="input" id="tb1" placeholder="Email" type="text"><input class="input" id="tb2" placeholder="Email" type="text"><input class="input" id="tb3" placeholder="Email" type="text"><input class="input" id="tb4" placeholder="Email" type="text"></div><div id="main"><a style="float: right;" href="#" id="btAdd" value="" class="bt">Invite more friends</a></div><table style="margin: 0px auto 10px; width: 350px;" border="0" cellpadding="0" cellspacing="0">
<input id="contact_list" name="contact_list" value="" type="hidden">
<!--END - Invite Buttons - Selvarani-->
</table>
<p style="">Invite from my address book</p>
<img src="Web5/images/invite-your-contacts.png" style="cursor:pointer;" alt="Invite your contacts" onclick="InviteBoxClick();"><br>
<a href="#cs_container" data-cs-init="true" class="cs_import">
</a>
<input name="cnote" value="" type="hidden">
<input name="pkfamilyinvite" value="0" type="hidden">
<input name="vn" value="0" type="hidden">
<input name="gORn" value="1" type="hidden"><br>
<input style="float: right;" id="nextbutton" name="" value="Next" type="submit"> <!-- id="nextbutton" added for button styles -- selva -->
</form>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td class="tdfooter" align="left">
<div class="wrapper">
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
Replace this input#nextbutton { with #nextbutton {
I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).
Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}
Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please