jquery function constant monitoring - html

Let's say I got the folloning testing html code:
<button class="button is-small is-danger is-light" id="choose">choose</button>
and the following jquery code:
function c3 () { $("#choose").click(function() { alert("clicked")})}
once a click is registered an alert goes of withe the message "clicked".
this happens when the c3 function is executed.
But suppose I want the c3 function to constantly wait for an click event? How do I get the function to constantly monitor the id tag?

ok, I think I now understand how this works. Every time I click on the button the whole page is reloaded and subsequently the jquery function is gone. All my functions reside in a scripts.js file on the server side. The solution is to have the jquery function on the page that is being reloaded.
I hope this is heplfull for others.

Related

Why can't I use onClick in the trigger of a Popup component in React?

I have a table in which the last column of each row holds a Button that is intended to trigger a popup to "edit and save" certain values of that row in my React app. Part of the criteria was that clicking outside the popup would also close it while preventing the user from clicking things in the background until the popup closed.
To do this, I opted to use a package called reactjs-popup. Currently for all criteria, it works perfectly. The next step, though, was to run a function when the button is clicked so that I could pull data from the API to populate the fields. However, I found that I couldn't call any functions from the onClick of the button used as a trigger. This is the main snippet of code:
import Popup from 'reactjs-popup' // this is the npm package I used
// more react code, including an arbitrary loadInfo function
<Popup
trigger = {
<Button onClick = {() => { loadInfo() }}
}
modal
nested
>
{ close => (
<div className = "modal1" id = "popupForm">
// popup content with input forms with values to be populated
</div>
}
</Popup>
The main problem I have is the "onClick" part of the Button in the trigger. No matter what I put in there, it is never ran when I click it. When I test the same button as a standalone, and not as the trigger for the popup, it works fine.
I also tried using
onClick = {loadData()}
But this just caused the function to constantly run as soon as it was rendered, and inevitable break due to too many renders. Does anyone know why this reactjs-popup component does not allow onClick within its trigger? And if so, how to get around it? Thanks!
I believe you want to loadInfo when the popup opens.
For that, there is a prop onOpen in Popup which accepts a function . You can use that,
Or you can manually set open prop using state. Have a button outside popup and update the open state when it clicked.

How to trigger a function when page is changed in vuejs

I am facing a question/issue.
I want to know on how to trigger a function when a page is changed in VUEJS.
Can someone help in some code snippets to make more understandable?
Thank you
Do you want to trigger the function from one page and let it execute on another one?
Otherwise you could use lifecycle hooks as mounted() or created() when page loads. It will trigger a function as soon as page is loaded.

HTML Dialog don't close in a shared spreadsheet on Google Scripts

I have a spreadsheet that has a function to call an HTML dialog to choose some dates:
htmlDate = HtmlService.createHtmlOutputFromFile('datePicker')
.setHeight(120)
.setWidth(550);
SpreadsheetApp.getUi().showModalDialog(htmlDate, 'Select the dates for presentation:');
This is the part of the HTML code that defines the actions of buttons in datePicker.html:
<input type="button" onClick="submitForm()" value="OK" />
<input type="button" onClick=google.script.host.close() value="Cancel" />
And this is the part of HTML code that calls my function 'newPresentation':
<script type="text/javascript">
function submitForm() {
google.script.run.newPresentation(document.forms[0]);
Utilities.sleep(1000);
google.script.host.close();
}
</script>
The problem is that: When I run the script, it works perfectly. First, it calls my function 'newPresentation', and then it closes itself, running the rest of the script. In function 'newPresentation' there are other HTML dialogs that are called up.
But, when another user runs the script, this HTML dialog doesn't close itself. Even though it doesn't close itself, the rest of the script is executed normally. I have already shared the spreadsheet with another user, with edit privileges.
Both me and the other user are logged in a Google Account.
Some idea how to fix that problem?
PS.: Sorry for some grammatical errors, but I'm not fluent in english.
Try this:
google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.newPresentation(document.forms[0]);
and put a return at the end of newPresentation();
Another possibility is to try using the dummy dialog described here: https://stackoverflow.com/a/55731456/7215091
I'm not certain of the reason that issue occurs. In all tests that i haved make, i used the same computer, with two windows of Google Chrome (one for each user logged in). I can't resolv the problem.
After that, i have tested in a new computer, with one single user logged in, and the script works perfectly.
Aparently, may be some problem related with some cache in browser, or something. I really don't know.

Google Apps script function does not work when implemented via a library

I am right at the beginning of my Google Apps Script programming and I have a real problem that I hope some one can help me with. I spent all yesterday trying to solve this but I am going in circles.
I wrote a script that was bound to a Google Doc. From a custom menu I call a html form where I collect the necessary information.
function initiateInvoice() {
var html = HtmlService.createHtmlOutputFromFile('askQu.html')
.setWidth(800)
.setHeight(500);
DocumentApp.getUi()
.showModalDialog(html, 'Daten Eingabe');
}
This form has a „submit“ button and an "exit" button.
<input class="action" onclick="formSubmit()" type="button" value="Submit" />
<input onclick="google.script.host.close()" type="button" value="Exit" />
The script called when the "submit" button is pressed is
<script type="text/javascript">
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
google.script.host.close();
}
</script>
The function getValuesFromForm then does the stuff that I need doing. And the html form is closed. The stuff that happens is a few calculations and then replacing place holders with text or numbers. I don't think this is relevant but can supply any code needed as required.
This all works exactly as I had hoped.
But now I have moved all the code and html in to an extra library (except the calling of the custom menu). The form still shows when called via the custom menu but the submit button in the form has no function any more. The "exit" button will still work. I have tried stripping everything out of the function that is called so that it does nothing nothing (to be sure it wasn't being called and getting hung up) but this does not help.
I guess that the javascript in the form is not working or not reaching my function getValuesFromForm but I really have no idea where to look or what to do.
I really appreciate any help or tips that any one can give me. Thank you.
Greetings from the Bavarian Alps.
Neill
google.script.run can't run a function from a library, only from a .gs file in the same project.
If you must have your logic code in a library, you will have to create functions in your local .gs file to call the relevant library functions, and these local functions you can invoke with google.script.run

Google UiApp reset UI Application

I have a script I am making that is essentially a form that submits an email. There is a submit and a reset button. My goal I am hoping to accomplish is the the Reset button either reloads the Google Site, or reloads the App Script.
Is there a function in Google Apps Scripts that I can use to accomplish this?
By putting everything in a panel (horizontal, vertical, scroll, etc), you can do the following in your server handler for your form submit
app = UiApp.getActiveApplication().remove(0);
/*add whatever you want here using app */
return app;
This removes the first item in the app (the panel) and lets you add whatever.
You could also use a client handler with an initially invisible item. On submit, hide the form and show a message until the server handler returns.
Unfortunately, there is no way to refresh the page.
Edit: Adding what I wrote in the comment so it's readable:
The way I usually set mine up, doGet and the handler both call another function with arguments for the new/current app and whatever values my listboxes have. For example,
function doGet(e){
return actuallyCreateGadget(UiApp.createApplication(), "default value for listbox");
}
function actuallyCreateGadget(app, selectedValue){
//do stuff here and finish by returning app
}
function serverHandlerFunction(e){
return actuallyCreateGadget(UiApp.getActiveApplication().remove(0), e.parameter.lbFirst);
}