I have a Smarty templte.
in its php file I registered a block function:
function test1($args){
$str="";
for($i=0;$i<$args['times'];$i++){
$str.="<font color='".$args['color']."' size='".$args['size']."'>".$args['con']."</font>"."<br>";
}
return $str;
}
// register block function
$smarty->registerPlugin('block' ,'hsp', 'test1');
and in the template:
<html>
<head>
<title>{$title}</title>
</head>
<body>
<button>
Click me
</button>
{hsp times="1" size="5" color="green" con="hello,world"}
{/hsp}
</body>
</html>
I have two questions,
why I access the smarty file there gets two hello,world?
{hsp times="1" size="5" color="green" con="hello,world"}
{/hsp}
you see there is only 1 times.
2.I want to click the button, then I invoke the function, how to realize this?
Related
This question already has answers here:
How to view the logging of Google Web App when other users are executing it?
(2 answers)
Closed 1 year ago.
I am trying to replicate a simple Web app tutorial video, but can't get google.script.run.function to create a log in my code.gs. Here is my code:
Code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("clock");
}
function userClicked(){
Logger.log("Log clicked");
console.log("Console click");
}
clock.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function doSubmit(){
google.script.run.userClicked();
document.getElementById("replace").innerHTML = "clicked";
}
</script>
</body>
</html>
When I run userClicked within the editor, the execution logs show up fine. Also, when the button is clicked in the webapp, the "clicked" text shows up just fine. Also, both doGet and userClicked show up in my Executions. The problem is that the logs do not show up in my execution logs when run from the webapp. I have a found a couple threads similar to this, but it never seems to get resolved.
UPDATE: I also tried adding withSuccessHandler and the results are the same - the functions both run fine in the Executions, but no log shows up in the Executions Log (also true of "Logs" if I test in the legacy version). The new html is this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function onSuccess(){
document.getElementById("replace").innerHTML = "success";
}
function doSubmit(){
google.script.run.withSuccessHandler(onSuccess).userClicked();
}
</script>
</body>
</html>
What works then is if you create a function and call that function with your server function, so:
function logHi(){
console.log("hi")
}
// And then use it
function userClicked(){
logHi()
}
Having trouble getting a parameter from the URL of a Web App deployed from Google App Script, passing it through a HTML template, and then getting it again as a parameter for a JS function when a user clicks on a button in the Web App.
Specifically, in the code below, I am having trouble passing the variable "username" from the html back to a JS function defined in my original Google App Script when the user clicks on the button "approveTC"...
Here is the Google Apps Script
function doGet(e) {
if(e.parameters.name === undefined){
var tmp = HtmlService.createTemplateFromFile('entername')
return tmp.evaluate();
} else {
var tmp = HtmlService.createTemplateFromFile('timecard')
tmp.username = e.parameters.name
return tmp.evaluate();
}
}
function timecardApproved(name){
return signAndSendTc(name)
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("timecard-css"); ?>
</head>
<body>
<div>
<h1>Hello <?!= username?></h1>
</div>
<div>
<iframe src=<?!= getTcJpg(username); ?> width="80%" height="800px" frameborder="0"></iframe>
</div>
<div>
<br>
<button id="approveTC">Approve Timecard</button>
</div>
<script>
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC(username){
google.script.run.timecardApproved(username);
}
</script>
</body>
</html>
When you assign the templated value to a variable in your script, make sure that you pass it stringified
This works for me:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<h1>Hello <?!= username?></h1>
</div>
<div>
</div>
<div>
<br>
<button id="approveTC">Approve Timecard</button>
</div>
<script>
var uname = "<?!= username ?>"
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC() {
console.log(uname)
}
</script>
</body>
</html>
After a lot of experimenting, this was the solution that ended up working for me... very close to what #ziganotschka suggested. Except, when I tried #ziganotschka's method earlier, the variable didn't pass through correctly to my Google Apps Script. This code does work for me, though...
<script>
var username = <?= username ?>
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC(){
google.script.run.timecardApproved(username);
}
</script>
I would like to get information when I put buttons, for this I use DOM, but I have errors, how can I solve this problems?
I tried to confirm if name is correct, and search about DOM, but I couldn't figure out it.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="uft-8">
<title>Pomodoro Timer</title>
</head>
<body>
<p class="menu">menu</p>
<p class="timer">0.00</p>
<button data-option='start' class="timer_button" >start</button>
<button data-option='stop' class="timer_button">stop</button>
<button data-option='reset' class="timer_button">reset</button>
<script>
const buttons = document.querySelectorAll('[data-option]');
function test(e){
console.log(e);
}
buttons.forEach(()=>buttons.addEventListener('click',test));
</script>
</body>
I would like to see the results in the console when I put the buttons.
buttons.forEach((button)=>button.addEventListener('click',test))
The buttons is a list. When you iterate over it with forEach you can get each button as the first argument of the method. And that is where you must attach the event handler.
First off, let me beg forgiveness for being such a noob at web development. I have looked everywhere for how to do this and can't find anything that tells me specifically.
Here is my link:
<td><a style="color:red;text-align:left" href=/sponsor/manageuser.htm?user="
+ target=_self"</a></td>
I need the parameter "user" to be appended and I also need the exact same value as user as the link. Like this:
<td><a style="color:red;text-align:left"
href=/sponsor/manageuser.htm?user="12345" 12345</a></td>
The problem is that I have to put the param and the link inside the tag. At least I think that's the problem So you click on 12345 link, it appends 12345 to the URL and passes it as a GET method. My form is a GET:
<form class="frm" method="get" name="currentusers" id="currentusers"
action="currentusers.htm">
And then here's what my URL looks like and of course I get a 404 error:
http://localhost:8080/sponsor/manageuser.htm?user=target=
Any advice is appreciated in advance.
jQuery way:
What you can do is have each link call a function and pass the value of the link into the function. The function append() will then add a hidden input value with the number you clicked on. Finally, the function will submit the form to the manageuser.htm page with the "?user=1234" as you requested.
You can see how the code works by copying and pasting this code and opening it on your computer.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id = "form1" method="get" action="sponsor/manageuser.htm">
<table>
<tr>
<td><button id="1543" onclick="append(1543)">1543</button></td>
<td><button id="3515" onclick="append(3515)">3515</button></td>
<td><button id="1115" onclick="append(1115)">1115</button></td>
</tr>
</table>
</form>
<script>
function append(user_number)
{
$('<input />').attr('type', 'hidden').attr('name', "user").attr('value', user_number).appendTo('#form1');
$('#form1').submit();
}
</script>
</body>
</html>
I'm coding a Windows 8 application in JavaScript and HTML5. I wish to show a dialog box when clicking a button.
I have specified the event handler in the default.js file like so:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().done(function () {
// Get the login button on the home page
var login_button = document.getElementById("login_submit");
// Set an event handler on the login button
login_button.addEventListener("click", UserActionLogin, false);
}));
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function UserActionLogin(mouseEvent) {
var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
}
app.start();
})();
My HTML markup is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HelloWorld</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- HelloWorld references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div class="login_box">
<form method="post">
<input type="text" name="login_username" />
<input type="password" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</form>
</div>
</div>
</body>
</html>
When I click the login_submit button when the application loads, it shows the dialog box just fine.
But when I click it for a second time it doesn't work, it's like it's forgotten about the Event Handler.
The problem is having the element in there, which you don't need in an app because you won't want to have the submit button repost/reload the page with the form contents. You're effectively reloading the page but the activated handler isn't called in that case (the page is loaded as a post rather than a request), so you lose the event handler.
If you delete the element, then it works just fine. I'm also told that if you use type="button" instead of type="submit" then it should work. But in an app, you'll typically collect the data from the controls and save that in other variables, navigating to another "page" in the app using the WInJS navigation and page control mechanisms, which keeps you on default.html without changing script context.
Also, I notice that you're still referring to the RC version of WinJS. Since Win8 is officially released now, be sure to develop against the released version of the system and using the most recent tools.
The problem is your use of the form element, which is causing your HTML to be reloaded when you click the button - this replaces the element you set up the event handler for, meaning that subsequent clicks don't invoke your handler function.
Remove the form element and you will get the behavior you expect, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App7</title>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<div id="wrapper">
<div class="login_box">
<input type="text" name="login_username" />
<input type="password" name="login_password" />
<input type="submit" id="login_submit" name="login_submit" />
</div>
</div>
</body>
</html>
If you really need the form element for some reason (perhaps because you are using a JS library which expects it), then you can prevent the problem by stopping the form being submitted in your event handler function, as follows:
function UserActionLogin(mouseEvent) {
var message_dialog = new Windows.UI.Popups.MessageDialog("Sorry, we were unable to log you in!" + mouseEvent.y.toString()).showAsync();
mouseEvent.preventDefault();
}
The call to preventDefault stops the form being posted but allows you to keep the form element in the document.