Develop Reference

Percentage loading indicator that represents function or thread processing state

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
}
});

AJAX Refresh Blinks Screen

I have an app that has a status screen that is meant to be displayed at all times in various places around the organization. There are probably 50 different users inputting different pieces of data into it, and the status screen updates every 10 seconds with the new information. It's pretty much a tracking board for widgets flowing through a process.
Currently, I do a refresh every 10 seconds which empties all the divs and then loops through the active widgets and places them where every they should go and color codes based on status and stuff like that. However, there's a fraction of a second of a blink from when the javascript empties the divs and when they repopulate, and it's pretty annoying honestly.
My question is how to best update the status screen where there is no blink and things just empty out and pop in as needed.
My thinking at first is there a way to "freeze" the screen for 2 seconds and let it rewrite in the background then unfreeze so there isn't a blink.
OR, which would be MUCH MUCH MUCH cooler, is that some how I only update pieces that get updated within the 10 second intervals. So if a widget goes from staging area to molding, it fades out of staging and fades into molding and none of the other divs are touched. This would be cool because I could add some animations this way. However, I'm not sure how to "efficiently" do this. Maybe I have an "active array" that stores how everything is, and then the AJAX pulls a new array and executes changes where the two doesn't match?
Anyway, I'd like to know if there's a screen freeze, update in the background answer and if there's an like the second one described.
Sorry for the novel =(

This blink or flashing effect is consequence of the asynchronous behavior of ajax.
what is happening is that your divs are emptying, but your new data is not yet ready to fill them.
the solution is to house your divs' emptying and refilling in a callback that is passed to the successful completion of your ajax request.

I think a lot of your problem comes when you clear all the data out before repopulating it.
You could try two methods for fixing this.
Solution 1
Build a string of html when you get your new results back. Do this in a loop, adding to the string variable each time and then replace the html of a "wrapper" div with the new html. You could make it fancy and do a fade in/fade out too.
var htmlString = '';
for(var i=0; i < jsonReturn.length; i++)
{
htmlString += "<p>" + jsonReturn[i].data + "</p>";
}
$('#wrapper-div").empty().append(htmlString);
Solution 2
Give your html id's that are based on an id value from the data you're repopulating. This will be considerably more complicated but it would let you update single items in your display individually or only if they change.
<p id="data-spot-<?php echo $data['id']; ?>">Some display data</p>
Then in your javascript you would do
for(var i=0; i < jsonReturn.length; i++)
{
$('#data-spot"+jsonReturn.id).empty().append("Some html string or data");
}

Highlight last inserted document in Meteor

I have form and list of objects at the same page. When I insert a new row, it is not very easy to see where the newly inserted row is placed. Therefore, I thought I could color/highlight the newly inserted row (and perhaps remove the highlight after a few seconds).
How can I do this? I think a way to do this could be using a method on the server which returns the inserted id (return Collection.insert(doc);) and on the client use a callback with
Meteor.call('insertDoc', function(err,result) {
// do something with result
});
I think I can use a reactive-var to save the id of the last inserted row and in the loop highlight the row with
{{#each docs}}
<li class="{{isActive}}">{{name}}</li>
{{/each}}
and have a helper to return active if this._id equals the reactive var with the last inserted id.
But is this the best way to do it? How can I remove the color after some seconds? I have seen such behaviour on many pages but I cannot find any tutorials/code snippets to achieve this.

I wrote a package that uses Meteor's UI hooks to fade items in and out of a list as they are added and removed, to help users maintain context as data changes:
https://github.com/mizzao/meteor-animated-each
There is a demo at http://animated-each.meteor.com/. You can see that as items are added and removed, they are faded in and out. If items are inserted off the screen, the visible area does not scroll.
This isn't doing exactly what you want, but you can use the same idea to highlight items as they appear as well, as opposed to the simple fade in.
Note that all of this happens at the UI rendering level - not the template/code level. The UI hooks are also not well documented right now, but they've been around for a while.

I don't know if your method is the best, but that's how I'd go about doing it.
As for the animation, I'd use a CSS3 animation. Plenty to choose from ( https://developer.mozilla.org/en-US/docs/Web/CSS/animation ), and you can easily make them fade to the standard color. The animation would also only be applied to the last inserted item (because of the way you did it, only the last item would have the "active" class)

Asynchronous searching with AJAX and Jquery

I have a page I'm building which is powered primarily with AJAX. I want the searching on the page to be asynchronous so that as the user types, the search results change on the fly. I was able to make this work somewhat by sending an AJAX call on keyup from the text box, and it works well in Chrome, FF, etc.
The only problem I'm having is in IE7. The page starts to get really slow as you type, so I'm assuming that perhaps the function to call the AJAX is being opened several times without being closed, causing the page to get slow. Is there an easy way to do this where I can basically end the current AJAX call if another key is pressed? Or is there maybe some other reason that IE could be slow?
The general code is:
$('.search_input').keyup(function(e) { make ajax call and populate results }
Thanks in advance for your help.

Hmm...I have something just like this and I tested it out in IE7 without receiving any slowdowns. Here's what my code looks like:
$("#key").keyup(function(event) {
if(event.which != '13') {
$.get("hash.php", {key: $("#key").val()}, function(hashes) {
$("#hashvalues").html(hashes);
});
}
});
"#key" is a text input field, "hash.php" is the current page, and "#hashvalues" is the main container div on the hash.php page.
Are you returning an insane amount of data for any reason? I've seen IE slow way down if there's a LOT of HTML returned.

Use jQuery.Load() to keep loading a seperate page into a placeholder element (div for example), and pass the value of 'search_input' as a querystring value each time.
This will give that new Google search feel, if thats something youre after

Can EditTextCell's text be reset in a CellTable?

I'm working with GWT-2.1.0 and I've draw a table through CellTable which contains a column, the third, of EditTextCell. I'm trying to modify the value of that cell for each visible rows by code using:
table.getRowElement(i).getCells().getItem(2).setInnerHTML("<div style=\"outline:none;\" tabindex=\"-1\">0</div>");
Window.alert("Pause");
Thanks the alert I can see that all the rows have been updated correctly to the new value, but, once the cycle ends, a refresh of the table restore the user's input nullify the job done.
Is there some temporary cache that EditTextCell uses to mantain the data? Can I erase the text inserted by the user in another way? Can I reach the Column of the CellTable so allowing me to use the setValue(...) field?
Anyone can help?
Thanks in advance!
P.S. Using *.setInnerText("0"); fails too.
P.P.S I've read that GWT2.2.0 should have a CellTable.getColumn(int index) method to do so, but I don't know if it's useful to me - and, more important, when it should comes out.

EditTextCell is a subclass of AbstractEditableCell, which has the clearViewData method. You can call that method for all objects in the table for which you want the data to be cleared.