I created a script that operates some functionality(coping rows, parsing rows and cells, changing format and then inserting into new range) . I assigned the script to a drawing, so when I click a drawing(button) it calls the function.
But the only problem that I am now facing is when a user accidentally or on purpose intensively clicks the button twice or more, a function does not work properly because every calling takes some time (about 5 seconds) and a next call of the function operates the wrong range.
So as i know there is no way to call the function asynchronously, is there?
So I need to somehow interact with the button to either disable button once after it clicked and then enable again when it's finished.
Hope i explained it correctly.
// the function is called by drawind from a spreadsheet
function addNewWeek() {
// here is some logic that copies, parses and inserts cells (takes about 5 seconds)
// need to wait for finish of the function
}
this button calls the function
Class Sheet has the method getImages() that returns all over-the-grid images on the sheet. I think that it could be used to get the drawing, then use assignScript(functionName) to change the assigned function.
Related
Resize all images after an edit in google Spreadsheets
Deleting images in Google sheet via script error
Related
Problem: When a function is called, google popup says "Running script blahblah" with cancel, dismiss buttons. This green popup gets dismissed after a while(when?), but many cells still show Loading.. state and values are still being populated, meaning the functions are still being run.
Requirement: Need information on some sort of indicator, spinning circle/loading ui or just a simple percentage wise indication of how much processing/function calls have been done, or something that gives the user some indication as to how much loading left, or when it finishes. I realise I'm being vague because I'm unsure if this sort of process monitoring function exists. I visualise it like a thread monitor, that goes green when all processing is complete. But a cell populated with 0-100% value will also do.
Context: When I click on a button, my code executes a lot of functions on a vast range of cells, which require a considerable amount of processing time even with optimisations, during which the state of many cells remain as "Loading..". After all functions have been executed, and all cells have been populated, only then, the user needs to perform some manual inspection/other activities. But there is no indication given to the user that all processing has been completed, other than manual scrolling and searching for absence of "Loading" indicator in all cells, which is tedious.
Alternative Solutions (in case there is no direct processing indicator function):
Callback or return some value for every function, and validate if all of them have arrived (not feasible I feel, coz the number of times a single function has to be executed changes with user specified input ex: user gives 3 inputs, function executes for 300 cells. Also as explained before, the cell population/Loading state happens even after apparent function execution end)
Function to scan the page for cell display value of "Loading.." and if none, indicate that loading has been completed (This function doesn't work as expected, I'm guessing some sync issues) I know this is most feasible option but I was really looking forward to some kind of value/function that automatically tells me that processing is done.
I don't think code snippet is required for this, as I'm basically asking if a particular feature exists or not. If not, alternatives would be appreciated.
The simplest approach is to display a loading-icon after a button is clicked. My recommendation is something like MaterializeCSS.
I assume there are 2 files:
Front-End HTML which contains the View
Back-End Apps Script File which contains Controller
So in your File #1 you would add the following loading bar:
<!-- this is your existing button -->
<button id="yourTriggerButton">Click here</button>
<!-- in your css file, add #loadingBar{display:none} so that is hidden by default -->
<div class="progress" id="loadingBar">
<div class="indeterminate"></div>
</div>
// we can also add some output message here
<div id="outputDiv"></div>
And at the bottom of your front-end file, within a script tag we state that we want to show the loading element wenn the button is clicked (and your back-end script is running) and the hide it once the process is finished:
const triggerButton = document.getElementById("yourTriggerButton");
const loadingElement = document.getElementById("loadingBar");
const outputElement = document.getElementById("outputDiv");
triggerButton.addEventListener( "click", function(e){
// lets show the loading icon when clicked
loadingElement.style.display = "block";
google.script.run
.withSuccessHandler(handleSuccess)
.backEndFunction()
// this is called once backEndFunction is finished / returned
function handleSuccess( returnValueFromBackEnd ){
// lets hide the loading icon
loadingElement.style.display = "none";
// and show the user some feedback
outputElement.innerText = "Done processing…"; // or you can input something that is returned from the back-end function
}
});
I have an asp.net webpage that contains a gridview with SQL data bound to it using the DataSourceID property. I want to be able to launch JavaScript from various user events (like button clicks and row clicks in a second gridview) and use JavaScript to read the gv1 data and perform some simple actions. My problem is, some of my JavaScript calls see the data in the gridview, but many times all I see in the gridview is a header (no rows of data!).
For example, if I put a call to JavaScript inside Page_Load() using
ScriptManager.RegisterStartupScript(Me, Page.GetType, "Script", "jsPageLoadFirst();", True)
then I always see the gridview data on the initial page load, and also on some postbacks. On other postbacks however the gridview has been stripped and all I see is the gridview header (rows are undefined).
Similarly, if I setup a call to JavaScript in the html body as
<body id="mybody" onload="JavaScript:myJSsub();">
the JavaScript sub never sees the gridview data; only the header, but no rows. I THOUGHT that the client onload event only occurred after the page was fully loaded (including all data binding!) but apparently not! Note that I always see the gridview data showing on the webpage, even right before I click a button to invoke JavaScript, so it's a mystery to me as to why the gridview data sometimes gets stripped!
I've been pulling my hair out for days trying to figure this one out. Can anyone tell me what I'm doing wrong, and how I can make sure the gridview row data is always available to my JavaScript subs, no matter where (or how) I launch them?
Thanks!
-tom
10/7 update: Here's a little bit more info, plus a possible work around I've come up with today using a hidden field. First, I'm primarily accessing the gridview data in JavaScript using calls to document.getElementById("gv1"). So to start things off, since all the gridview data is available to the JavaScript sub I fire from the first server PageLoad event, I tried saving the gridview data in both a global variable "gvar1" and also in a hidden field on my page "hf1". Here is what my JavaScript looks like:
function jsPageLoadFirst() {
// Save gv1 to a global variable
gvar1 = document.getElementById("gv1");
// *** Also save gv1's html to a hidden field
document.getElementById("hf1").value = document.getElementById("gv1").innerHTML;
}
Now in the JavaScript sub I trigger from the onload() event of the body, I check the values of all three. I always find that 1) document.getElementById("gv1") shows only the gridview header (but no rows), 2) gvar1 is undefined and 3) hf1 looks fine - all row data is present. Similarly when firing javascript from server Postback pageloads, sometimes document.getElementById("gv1") shows all the gridview data, but sometimes it only shows the gridview header but no row data. Can someone explain to me why document.getElementById("gv1") does not always show the row data? I think if I understood this, I could see my way clear to get the rest of my code working. Thanks!!!
I'm using an AJAX call to pull filenames from a database which are then used to populate a carousel with images of the same name.
My web app makes use of tabs which when tapped, reload the AJAX and pull from the database a different set of filenames which then repopulate the carousel.
What I'm finding is when the web app initially loads, the carousel works fine, but if I tap any of the tabs, the carousel begins to function incorrectly, i.e. the first time I tap and then use the carousel the carousel moves by two images at at time, a second tap and the images move three at a time, so on and so forth.
If I check console I can see that following the call, when I click either the left or right arrow in the carousel, it's as if there are two instances of the same variable, or as if both AJAX calls are being called in some way. Image attached to show what I mean.
As you can see, following initial load everything is fine, however once any subsequent calls are made it's as if the count from the previous call continues, and a secondary count also starts associated with the new data, or a third or fourth or fifth, dependent on how many calls have been made.
$('.tabs-nav li').on('click', function() {
tabName = $(this).html();
place = 0;
products = getProductDetails(selected); //AJAX call
data = dealWithData(products, place); //Deferred object that works data
});
Sounds like you are having a scoping issue. The easiest way is to have your logic in a closure so your variables get scoped to the particular tab. So instead of something like this:
var place,count
$(".tabs").on('click',function(){/*shares same place & count */});
it would look like this:
$(".tabs").each(function(){
var place,count
$(this).on('click',function(){/*each has their own place,count*/});
});
I have a problem here and it's making me mad. I maintain a legacy php system. It's badly organized, no frameworks are used and a lot of other problems, for example, at least 5 different query versions are used in different parts of the system.
So my problem right now is this, I have a search form, when a button is clicked it shows a list of items, lets call this a list of "A" objects. In each A item, there is an expand /toggle button to show the B items that belong to A (this is done using ajax, by setting a specific div's html to the ajax response). Then each B also has an expand/toggle button to show the C items that belong to B.
What is happening: I click to search, all A are shown. I click on the expand to show the B items of one A object, they are shown. I click B to hide it, it hides and then show again. If I click it one more time, it hides, shows and hide. So it is like every ajax request is including the javascript code and running it.
I think this is pretty much an organization problem, I am not knowing how to include/require and insert the js correctly. I've been trying to solve this issue since yesterday and I think I've seen the code so many times that I can't think out of the box.
So here's some of the organization (I changed the names because there are some business rules):
SearchResults.php -> Declares a class that has static methods to print out HTML of each item A, B and C and some other helper methods. To make stuff "work", it has a require "js.php"; otherwise the A expand button does not work because it does not exist at the time the js is executed and no function is bound.
search.php -> the HTML form with all the search options, nothing important.
js.php -> the javascript stuff, why is it in a ".php"? I can't even remember, but I think it is because with the php I can require/include:
<script type="text/javascript" src="../util/js/jquery/1.8.1/jquery.min.js"></script>
<script>
var jQ = jQuery.noConflict(true);
jQ(document).ready(function() {
jQ(".loadBfromA").click( function(e) {
if (div.style.display == 'none')
alert("was hidden, now is showing");
//call ajax_B.php
//response is put into the div using .html(data)
else
alert("was showing, now is hidden");
...
ajax_B.php -> the ajax that access the database and echoes html code that will be put into the A items div. Here I have to require SearchResults.php, because I call some methods of the class.
Why is it including the jQ(document).ready being executed multiple times? How can I fix it? Is there any way I can reorganize the code?
Is the ajax_B.php, when requiring SearchResults.php, including the js again because SearchResults.php requires js.php? Does this gets echoed and then put into the div?
I can't make a fiddle of this because there is ajax included.
Edit:
I have tried unbind("click").bind("click", ()) and it didn't work.
It looks like the event is being bound multiple times on jQ(".loadBfromA")
I know this is not the cleanest solution out there, but you could rewrite the actual binding:
jQ(".loadBfromA").bind('click.loadbfroma', function(e) {
// Do your code
$(this).unbind('click.loadbfroma');
});
That way you can at least be sure that only one event is bound at all times, no matter how many times the code snippet is being included. I know this doesn't really help you with the underlying issue but it's a start.
I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.
Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}