I've been trying to figure this out for a few weeks, off and on. Maybe someone else will see the obvious thing I'm missing.
At this point I'm simply trying to verify that the function is working; I'm not doing anything other than checking the passing of arguments from the HTML button to the function.
There are two buttons in play here. The first one sends the arguments, but does not work--the Logger.log("yeeHa") statement is not called. The seconds button sends no arguments, but does allow the Logger statement to be called.
function runSetup(projectTitle,projectMgr,projectSponsor,datepicker,weeks) {
//function runSetup() {
Logger.log("before the vars");
var ptitle = projectTitle;
var pMan = projectMgr;
var pSpon = projectSponsor;
var date = datepicker;
var wks = weeks;
var tHeader = "Project";
var mHeader = "Project Manager";
var sHeader = "Project Sponsor";
Logger.log("yeeHa");
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<base target="_top">
</head>
<body>
<div id="container" style="padding: 10px; text-align:center;">
<strong>Project Information</strong>
<p></p>
<div class="inline form-group">
<label for="projectTitle">Project Title</label>
<input type="text" id="projectTitle" style="width: 150px;">
</div>
<p></p>
<div class="inline form-group">
<label for="projectMgr">Project Manager</label>
<input type="text" id="projectMgr" style="width: 150px;">
<br>
</div>
<div class="inline form-group">
<label for="projectSponsor">Project Sponsor</label><br>
<input type="text" id="projectSponsor" style="width: 150px;">
<p></p>
</div>
<input type="text" id="datepicker" value="start date">
<div class="inline form-group">
<label for="state">Weeks</label>
<input type="text" id="state" style="width: 40px;">
</div>
<p></p>
<!-- THIS BUTTON DOES NOT WORK -->
<input type="button" class="create" name="ganntSetup" value="Setup Gannt" onClick="google.script.run.runSetup
(document.getElementById('projectTitle').value;
document.getElementById('projectMgr').value;
document.getElementById('projectSponsor').value;
document.getElementById('datepicker').value;
document.getElementById('weeks').value;
)" />
<!-- THIS BUTTON WORKS BUT DOES NOT SEND NEEDED INFORMATION -->
<input type="button" class="create" name="ganntSetup2" value="Setup Gannt2" onClick="google.script.run.runSetup()"/>
<div>
<p></p>
<p></p>
<input type="button" name="Main Menu" value="Main Menu" onClick="google.script.run.mainSidebar()" />
</div>
</div>
<div style=
"width: 100%;
position: fixed;
bottom: 0;
width: 100%;
text-align:center;
background-color:black;
text-color:white;">
<p><b>©FastAdmin Solutions</b></p>
</div>
</div>
</body>
</html>
Not sure what I'm missing that is not allowing this to process.
You should separate the values of the variables you are setting as the parameters of the function with commas (,), not semi-colons (;). Also, the input with the weeks value has an id of state, yet you are trying to get its value by using document.getElementById("weeks").
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<base target="_top">
</head>
<body>
<div id="container" style="padding: 10px; text-align:center;">
<strong>Project Information</strong>
<p></p>
<div class="inline form-group">
<label for="projectTitle">Project Title</label>
<input type="text" id="projectTitle" style="width: 150px;">
</div>
<p></p>
<div class="inline form-group">
<label for="projectMgr">Project Manager</label>
<input type="text" id="projectMgr" style="width: 150px;">
<br>
</div>
<div class="inline form-group">
<label for="projectSponsor">Project Sponsor</label><br>
<input type="text" id="projectSponsor" style="width: 150px;">
<p></p>
</div>
<input type="text" id="datepicker" value="start date">
<div class="inline form-group">
<label for="weeks">Weeks</label>
<input type="text" id="weeks" style="width: 40px;">
<!--Changed id to weeks instead of state.-->
</div>
<p></p>
<!–– THIS BUTTON DOES NOT WORK ––>
<input type="button" class="create" name="ganntSetup" value="Setup Gannt" onClick="runSetup
(document.getElementById('projectTitle').value, document.getElementById('projectMgr').value, document.getElementById('projectSponsor').value,
document.getElementById('datepicker').value,
document.getElementById('weeks').value
)" />
<!–– THIS BUTTON WORKS BUT DOES NOT SEND NEEDED INFORMATION ––>
<input type="button" class="create" name="ganntSetup2" value="Setup Gannt2" onClick="google.script.run.runSetup()"/>
<div>
<p></p>
<p></p>
<input type="button" name="Main Menu" value="Main Menu" onClick="google.script.run.mainSidebar()" />
</div>
</div>
<div style=
"width: 100%;
position: fixed;
bottom: 0;
width: 100%;
text-align:center;
background-color:black;
text-color:white;">
<p><b>©FastAdmin Solutions</b></p>
</div>
</div>
<script>
function runSetup(projectTitle,projectMgr,projectSponsor,datepicker,weeks) {
//function runSetup() {
console.log("before the vars");
//Logger.log("before the vars");
var ptitle = projectTitle;
var pMan = projectMgr;
var pSpon = projectSponsor;
var date = datepicker;
var wks = weeks;
var tHeader = "Project";
var mHeader = "Project Manager";
var sHeader = "Project Sponsor";
//Logger.log("yeeHa");
console.log("yeeHa");
}
</script>
</body>
</html>
You have semi-colons after each item in the call to the function, I'm no JS pro but a semi-colon is a line terminator so shouldn't they be commas?
onClick="google.script.run.runSetup
(document.getElementById('projectTitle').value,
document.getElementById('projectMgr').value,
document.getElementById('projectSponsor').value,
document.getElementById('datepicker').value,
document.getElementById('weeks').value
)"
Outside of that, what exactly are the values the functions is receiving? Maybe try comparing what it is getting versus what you think you are sending.
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
I am new to Five9. I want to make a Script where there is some Fields where the agents can write some text, and after pressing a button, the text from the Field will go to the List updating the current record. Is there any possibility to realize this without using any CRM or something. Like there is any API request which can do this thing?
Thank you for your help!
<html>
<head>
<title> Script </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="nav_bar">
<button onClick="toggle('target', 'replace_target','replace_target2')">Adatlap</button>
<button onClick="toggle('replace_target', 'target','replace_target2')">Sugo</button>
<button onClick="toggle('replace_target2', 'target', 'replace_target')">Script</button>
</div>
<div>
<span id="target">Test</span>
<p> This is Test</p>
</div>
<div style="display:none" class="Sugo">
<span id="replace_target">Test2</span>
</div>
<div style="display:none" class="script">
<span id="replace_target2">SCript</span>
<p> This is SCript</p>
<div class="page1">
</div>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
function toggle(target, source, source2) {
this[target].parentNode.style.display = 'block'
this[source].parentNode.style.display = 'none'
this[source2].parentNode.style.display = 'none'
}
</script>
</body>
</html>
This is my html file where I'm trying to use the autocomplete function where I want to use the data which I get from MySQL query which is first_name and last_name. I'm passing this data using flask but I'm unable to use it for autocomplete function.
Data format:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
<html>
<head>
<title>Autocomplete</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
</style>
</head>
<link rel="stylesheet" href="/static/style.css" type="text/css">
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
<script>
var first = {{ first|tojson }}
var last = {{ last|tojson }}
console.log(first)
$(function() {
$("#firstname").autocomplete({
source: first
});
$("#lastname").autocomplete({
source: last
}).autocomplete("widget").addClass("fixed-height");
});
</script>
</div>
</div>
</div>
</form>
</html>
The data format of your:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
is wrong. For details see option source.
If you cannot change the array on your server you can always flatten it on the client:
[].concat.apply([], first)
var first = [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]];
$(function() {
$("#firstname").autocomplete({
source: [].concat.apply([], first)
});
$("#lastname").autocomplete({
source: [].concat.apply([], first)
}).autocomplete("widget").addClass("fixed-height");
});
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="firstname"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="lastname"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
</div>
</div>
</div>
</form>
I'm trying to create a Login page. The problem is when i try to minimize the page the save copy check box and the send button are overlapped. i'm assuming i need to change something in the CSS. But i'm not sure exactly what. Here is the link : https://jsfiddle.net/talamusiclover/ctqgkxcw/
<!DOCTYPE>
<html ng-app="myApp">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="C:\Users\etashah\Desktop\email.css">
<div class="container" >
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<form name="myForm" ng-controller="emailController">
<div class="form-group1" >
<label for="exampleInputEmail1">Contacts</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" ng-model="email.text" >
</div>
<div role="alert">
<span class="error alert" ng-show="myForm.$error.required">
Required!</span>
<span class="error alert" ng-show="myForm.$error.email">
Not valid email!</span>
</div>
<div class="form-group2">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Subject">
</div>
<div class="form-group3">
<label for="message">Message</label>
<textarea class="form-control" id="message"></textarea>
</div>
<div class="blueBox">
<div class="form-group">
<div class="col-sm-offset-8 col-sm-10">
<div class="checkbox">
<label class="checkboxLable"><input type="checkbox">Save a copy</label>
</div>
</div>
</div>
<div class= "button">
<div class="col-sm-u-8 col-sm-10">
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
<div style="clear: both;"></div>
</div>
</form>
</div>
<div class="col-md-4"></div>
</div>
<br><br><br>
</div>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"> </script>
<script src= "C:\Users\etashah\Desktop\email\controller.js"> </script>
</body>
</html>
You can use pull-right class to keep the checkbox in right side. Then it will.
Delete the position: relative; from your button css, then your css for the button is:
.button {
color: #4CAF50;
font-size: 25px;
border-radius: 30px;
color: black;
right: 10px;
bottom: 30px;
}
The problem is, that your HTML code used bootstrap grid system while you overwriting them in your css file.You can read more about Bootstrap here Bootstrap
Please help me, I have tried a lot of search but useless.
<div class="articleWraper">
<div id="demo2">
<?php
$sSql='SELECT * FROM tbl_images';
$result=mysql_query($sSql);
?>
<ul id="slider3">
<?php while($row=mysql_fetch_assoc($result)){?>
<li class="panel1">
<div class="caption-bottom"><?php echo $row['line1_desc'];?><br/><?php echo $row['line2_desc'];?></div>
<img src="../propertyImages/<?php echo $row['image'] ?>" /><br />
</li>
<?php }?>
</ul>
</div>
<div class="mpCaptionRow">
<input id="createLink" class="createLink" type="submit" name="submit" value="Yes, I'm Interested" />
</div>
</div>
The above code is for a button and a manual slider. The slider contains pictures and a panel for picture description which are getting from database. I want when the user clicks on button and jQuery dialog appears then some part of description containing slider panel will be show in the jQuery dialog. My jQuery dialog code is as follows:
<head>
<link href="Content/main.css" rel="stylesheet" type="text/css" />
<link href="Content/blitzer/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/page.css" />
<link rel="stylesheet" href="Content/anythingslider.css" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.js"></script>
<script src="Scripts/jquery.anythingslider.fx.js"></script>
<script src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jqxmaskedinput.js"></script>
<script type="text/javascript" src="Scripts/jquery.timepicker.js"></script>
<script>
$(document).ready(function(){
$("#createLink").click(function (event) {
event.preventDefault();
$("#mpDialog").dialog(
{
title: "I want to be a future homeowner",
width: 520,
modal: true,
position: {
at: "top",
my: "bottom",
of: "#createLink"
}
}
);
});
$("#mpDialog").hide();
});
</script>
</head>
<body>
<div class="dialogSec" id="mpDialog">
<form id="createProductForm" name="myForm" action="futureHomeowner.php" method="post" enctype="multipart/form-data">
<div id="productDetails">
<div id="basicInfo">
<p style="text-align: center">Hey Mike and Juan<br />
I am interested in learning more about the property at:
<br />
**I want the panel description here**
<br />
and specifically how your program works to allow me to become a homeowner.</p>
<div class="fieldControl">
<label style="margin-right: 25px">First Name </label>
<input id="fname" type="text" class="textBox" name="fname" style="width: 350px" />
<div id="fname_error"></div>
</div>
<div class="fieldControl">
<label style="margin-right: 25px">Last Name </label>
<input id="lname" type="text" class="textBox" name="lname" style="width: 350px" />
<div id="lname_error"></div>
</div>
<div class="fieldControl">
<label>Email Address </label>
<input id="email" type="text" name="email" class="textBox" style="width: 350px" />
<div id="email_error"></div>
</div>
<div class="fieldControl">
<label>Phone No. </label>
<input id="phoneNo" type="text" name="phoneNo" class="textBox" style="width: 350px" />
</div>
<div class="fieldControl">
<p>Please answer the questions below and we will be in touch.</p>
<p style="text-align: left;"><b>What is the best time to call you to discuss?</b></p>
From <input id="timeformat1" name="timeFrom" type="text" class="textBox" style="width: 205px" placeholder="Time from" /> To <input id="timeformat2" placeholder="Time to" name="timeTo" type="text" class="textBox" style="width: 205px" />
<p style="text-align: left;"><b>Also, do you have any other comments?</b></p>
<textarea name="comments" style="width: 489px" class="textBox" placeholder="Write your comments..."></textarea>
</div>
</div>
<div class="clearSection"></div>
</div>
<div class="buttonsRow">
<input type="submit" value="Submit" class="button1" />
</div>
</form>
</div>