Automatically refresh Google Apps Script after set period of time - javascript

I'm working on a portal which has a set of forms that can be accessed from the main screen and then a page which has reporting based on a users submissions to said forms.
The forms write to a singular Google spreadsheet where data is manipulated and a "Status" is thrown out.
I have got this status, among other data onto my reporting screen and at the minute it is static until the users physically refreshes the page.
I am wanting to make it so that this report refreshes automatically, say every 60 seconds, so any changes are reflected to the user.
I've spent time researching, and have managed to get two options which seem to be in the beginning stages of working, but I am unable to work out how to solve the issues I'm still having.
One choice was to do a meta refresh. The code for this is:
<meta http-equiv="refresh" content="60;url=HereIsTheURL"/>
This version works, but only in the first instance. i.e the page successfully reloads the first time, but when the second instance comes around all I get is a blank white screen.
The second choice I have been using is with JS. The code is:
<script type="text/javascript">
setTimeout(function () {
location.reload();
}, 60000);
</script>
However, this simply returns a blank white screen every time.
Further information:
I am using HTMLService in Apps Script.
The page on which the Log/report appears has the full script URL + "?page=pagename"
Does anybody have any ideas how to change the code so that the page refreshes properly every time?
Updated below with HTML content:
<div id="content" >
<h1>Change Log:</h1>
<br>
<br>
<div id="users-contain" class="ui-widget">
<table id = "user" style="width:100%" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Change Request Date</th>
<th>Change Request</th>
<th>Status</th>
<th>Completed By</th>
<th>Date Completed</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>

AFAIK, you can't use location.reload because of redirecting security issues (wild guess), but you could reset the whole page, with setTimeouts in the Javascript HTML, and update the page, if you'd share you HTML code we could help on how to update them.

Related

How to open another page in pop up modal on click of hyperlink

I have a page one.html that contains a hyperlink
<a href="#">Open second page<a/>
When this link is clicked I want to open second.html in a pop up modal.
My second page contains a simple table which I want to show, like:
<html>
<div class="table-responsive-md">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>adidas</td>
<td>one of the top sport brand.</td>
</tr>
</tbody>
</table>
</div>
</html>
If the content you want to display is on an other site the only way is to use iframes. So you would have your modal with the iframe inside it pointing to the external source and being set invisible. When clicking on the link, a Javascript Eventlistener would set the modal visible (i.e. manipulate CSS display). The href attribut of the link is empty.
But using iframes ist kind a out of date. Instead modern Web Apps use Rest Endpoints to request the data in a format like json, parse it and render the data within your App.

Stripes: In jsp page html table pagination

I'm using stripes java framework. I have jsp page:
<table id="mlTable" style="">
<col width="200">
<col width="250">
<thead>
<tr>
<th align="center"><p>Name</p></th>
<th align="center"><p>Address</p></th>
</tr>
</thead>
<c:forEach items="${actionBean.mLocations}" var="ml">
<tr>
<td><p>${ml.name}</p></td>
<td><p>${ml.address}</p></td>
</tr>
</c:forEach>
</table>
In my actionbean I'm returning list:
public List<Location> getmLocations() {
mLocations = wrapperBean.getLocations();
return mLocations;
}
What I want is pagination because list is very long. And pagination must be asynchronous without reloading the page. Because I have also search field and that value must stay in field. And I don't want use DISPLAYTAG because I'm adding some custom classes to table. What can I do? please help
You could use a Javascript library such as List.js to paginate a HTML table client-side. This avoids refreshing the page, but if the amount of data is truly staggering, it may cause performance issues, since you're always downloading the whole thing (but only once per loading the page itself).

Get contents of a table row and post on Facebook with a share button using Jquery

I have a basic table on my website which displays the following data in 5 tds in one row:
Event Date
Event time
Event Type
Event Location
Event Organiser
I want to add one final td in the row with a Facebook share button in it, so that the content of the entire row can be shared on Facebook.
I found another SO post which I've tried to tailor to my own but can't seem to get it to work.
ORIGINAL STACK OVERFLOW POST. It opens the dialog box but with an error. Can anyone tell me how this would be done? I no doubt have lots of issues, but any help is greatly appreciated.
$('.fb').on('click', function(event) {
event.preventDefault();
var type = $(this).parent().siblings('.type');
var url = 'http://www.facebook.com/dialog/feed?' + 'app_id=1498631000398156' + 'link=http://developers.facebook.com/docs/reference/dialogs/&' + 'picture=http://fbrell.com/f8.jpg&' + 'name=' + encodeURIComponent(type) + 'caption=date&' + 'description=.type%20on%20.date%20#%20.time%20.location%20organised%20by%20.organiser&' + 'redirect_uri=http://www.my-website.co.uk';
window.open(
url, '_blank' // <- This is what makes it open in a new window.
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="events-list" border="0" cellpadding="0" cellspacing="0">
<tbody>
</tbody>
<thead>
<tr>
<td>DATE</td>
<td>TIME</td>
<td>TYPE</td>
<td>LOCATION</td>
<td>ORGANISER</td>
<td>SHARE</td>
</tr>
</thead>
<tbody>
<tr>
<td class="date">27-November-2014</td>
<td class="time">20.30 - 22.00</td>
<td class="type">Opportunity Event</td>
<td class="location">Tapas Bar La Trinca</td>
<td class="organiser">Stephanie</td>
<td class="share"><a class="fb" href="#" target="_blank">FACEBOOK</a></td>
</tr>
</tbody>
</table>
The only thing you can share on Facebook is a URL.
And within that URL you can have anything you want, and Facebook cares only if that URL exists and if it has some Graph Meta Tags, it has a better clue what's in it.
Which means you have to setup your Application, which I have no clue what you're using on Backend, and create a Route which holds a single Row data, eg : http://example.com/datas/1 where 1 is the ID of that ROW and when it asked it responds only with it's data.
This way you can share a URL on Facebook of each Row.
PS : But you can Post on someone else Feed anything you want, and to do so you have to use Facebook API, instead if doing a simple HTTP Cal on Facebook Dialog Object.
Hope that it makes sense.

How to Update innerHtml of a cell On Separate Pages

I have a footer on my website that lists the date last updated.
<footer>
<table class="foot">
<tr>
<th>Contact information:</th>
<th>Date Last Updated:</th>
</tr>
<tr>
<td>email address</td>
<td>November 31, 2014</td>
</tr>
</table>
</footer>
As you can see the date is hard coded and this has to be changed each time I update the site. The site however is made up of 15 different pages and each one need to be updated because the footer is on everyone of them.
Is there a way to update the date on all the pages if I only update the information on the homepage using javascript. If so how?
Thank you
I was wondering
Changing the date on the home page might not be the best idea.
Instead create a new (maybe json or even just plain text) file to store the date. Then read this file on every page and put the content into your footer.
If the files are part of a solution, you can Replace All in Entire Solution with Visual Studio. If you can connect to a database, you can store the date last modified there, and just call to it from your pages - then you can just update database field when you update the content. Otherwise, you can store it in a separate file and call that for the date.
Short answer: Probably not, but there are other ways to skin a cat.
Create a file "global.js" to include on every page...
inside global.js:
window.onload = updateDate;
function updateDate() {
displaydate = "November 31st, 1999";
fd = document.getElementById('footerdate');
fd.innerHTML = displaydate;
}
include that file on every page:
<script type="text/javascript" src="global.js"></script>
change your footer to be:
<footer>
<table class="foot">
<tr>
<th>Contact information:</th>
<th>Date Last Updated:</th>
</tr>
<tr>
<td>email address</td>
<td id="footerdate"></td>
</tr>
</table>
</footer>
Then you can just update the date in the global.js and it will carry through to all pages every time.
Put the date in a separate html file, then display it using an <iFrame> inside the <td>.

AJAX response with TD tags replacing table row is placed nasty in Chrome

I am trying to use editInPlace JavaScript code with Python & Django on Google App Engine.
After editing the row of the table:
<table>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
<tr id="editme" class="editme">
<td>Date</td>
<td>Description</td>
<td>Details</td>
</tr>
</table>
Which looks like this:
___ ___ ___
|___|___|___|
|___|___|___|
|___|___|___|
I maid that editInPlace JavaScript would save original string like "<td>Date</td><td>Description</td><td>Details</td>" by replacing it with striped string without <td> (ex. "Date Description Details") placing the string in to the <td colspan="3"><form>...</form></td> for editor to edit.
So here I prepared that the Http Response after submitting a new value would also be imitating 3 cols, I mean would have <td></td> tags (ex. "<td>ResponseDate</td><td>ResponseDescription</td><td>ResponseDetails</td>") to be placed in between <tr></tr> tags.
But the problem is such that after AJAX replacing values without refreshing hole page, gives me nasty table.
All the row in Chrome v12 is like moved a side and starts filling from the second col:
___ ___ ___
|___|___|___|___
___|___|___|___|
|___|___|___|
Please use Chrome Developer Tools to inspect the affected row after it has been edited (and displayed in the wrong way) - right-click on any cell and select "Inspect Element" in the popup menu. The DevTools window will show up, and you will be able to examine (in the Elements panel) whether the final DOM is correct. If it is, then it's a Chrome/WebKit bug.
Summary of my problem
After sometime debugging my issue i found my problem was caused by the following situation.
A class with a style content: "" being applied to a target TR prior to an ajax call which would replace the TDs with a fresh set of TDs, then, after removing that class I had the same problem as the OP; The end result was the shifting of the TDs to the right. The HTML on inspection was sound.
In detail this is what I had.
I had a TR which was my targetId container.
I had a TD with an ajax link that then returned a set of TDs to replace the old set within the targetId TR.
I am using jquery ajax and prior to the call I applied a class to the targetId TR, the class of which can be found in this answer and contains the content: "" style.
After the ajax call completes, removing that class.
This is what I ended up doing.
The ajax masking class I was using for the targetId, I replaced with a new class that just did some opacity. I kept the ajax masking class for the sender control.
Relating to the OP's problem
I downloaded and searched the "jquery-editinplace" the OP uses but could not find a content style being applied. Maybe someone with good search tools may find it. As stated in the comments above, the problem disappeared when chrome upgraded. This is my case of it remaining because of something possibly related.
I have not made a fiddle of this situation as I had trouble creating an ajax scenario. I would have liked to to prove it is a chrome bug and to submit it to Google.
Feel free to comment if something is unclear and I will update my answer accordingly.
To me, use same Id on multiple <tr> seems awkward.
It might cause some weird behavior.
Keep your unique Id per DOM.
Also I would use
<div>
Instead of tables
because with <div>, you can get more control with CSS.
HTML:
<div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
<div class="editme">
<div>Date</div>
<div>Description</div>
<div>Details</div>
</div>
</div>
CSS:
.editme { clear:both; }
.editme div { float:left; }
So after changing your HTML and CSS like this
you can simply replace those three divs
with a single DIV with FORM
Here is an example of DIV version

Categories