Does anyone know of an effective way of triggering a window refresh for a deployed Google Appscript Web Application using Javascript?
I've searched and tested variations of window.location.href = window.location.href, window.reload(true), etc.
Nothing seems to work.
The only work-around that I've found is creating a hidden web-address link and using the .click() command to navigate to the same page (i.e. refresh), but lately, this is causing issues, especially because I now have to keep track of different link addresses.
Does anyone have a better alternative to this?
HTML:
<html>
<head>
<title>Finance Mileage Entry</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<base target="_top">
<?!= include("page-css");?>
<a id="refreshLink" href="<?= ScriptApp.getService().getUrl() ?>?v=home" style="display:none"></a>
JS:
function refresh(){
var link = document.getElementById("refreshLink")
link.click();
};
In order to refresh the Web App, you can just use Window.open(url, windowName), like this:
window.open("https://script.google.com/macros/s/{your-webapp-id}/exec", "_top");
Update:
You could also retrieve the script URL via ScriptApp.getService().getUrl(), instead of writing it yourself. To do that, you would have to retrieve this information from the server-side (you cannot access classes like ScriptApp from the client-side). You have to use google.script.run to execute server-side functions from the client-side:
function retrieveUrl() {
google.script.run.withSuccessHandler(refresh).getUrl();
}
This way, retrieveUrl will execute a function called getUrl from your server code (.gs), which could be something like this:
function getUrl() {
return ScriptApp.getService().getUrl();
}
Finally, when getUrl returns successfully, the success handler will execute a client-side function called refresh (and its return value –the script URL– will be passed as a parameter):
function refresh(scriptUrl) {
window.open(scriptUrl, "_top");
}
Reference:
Window.open
Related
This example shows how to redirect to a url:
<meta http-equiv="refresh" content="0; url=http://example.com/" />
But, i do not want to redirect to a url, i want to redirect to a javascript snippet:
javascript:(function(){s=document.createElement("script");s.type="text/javascript";s.src="https://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js";document.body.appendChild(s);})();
Goal is to do this with a single file.
I tried replacing the url in the meta redirect above with my js snippet, but it fails. I believe the problem is the double-quotes embedded in the js:
<meta http-equiv="refresh" content="0; url=javascript:(function(){s=document.createElement("script");s.type="text/javascript";s.src="https://www.diigo.com/javascripts/webtoolbar/diigolet_b_h_b.js";document.body.appendChild(s);})();" />
I tried replacing the double-quotes in the js with " but that did not work. Also tried %22, also did not work.
I'm not trying to redirect using javascript, i'm trying to redirect to javascript (using meta or another non-js method). However, if there's a way to execute the above script using another piece of script, that's fine.
Not trying to redirect to a .js file-- i want to embed the js snippet inside the redirect.
This question is not a duplicate, because they are not redirecting a page, they are redirecting a link.
i guess you want to load the js file Dynamically! if so ..,here is my code i used before
(function( window, undefined ){
//设置meta 禁止缓存
document.write('<meta http-equiv="content-type" content="text/html; charset=GBK"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache">');
//加载公共JS文件
var jsFile = [
CONTEXT_PATH_NAME+"/js/jquery-1.4.2.min.js",
CONTEXT_PATH_NAME+"/js/jquery.easyui.min.js",
CONTEXT_PATH_NAME+"/js/jquery.cookie.js",
CONTEXT_PATH_NAME+"/js/Toolbar.js",
CONTEXT_PATH_NAME+"/js/common.js",
CONTEXT_PATH_NAME+"/js/ajax-request.js",
CONTEXT_PATH_NAME+"/js/validator.js",
CONTEXT_PATH_NAME+"/js/tooltip_split.js",
CONTEXT_PATH_NAME+"/js/cattMsg.js",
CONTEXT_PATH_NAME+"/js/watermark.js",
CONTEXT_PATH_NAME+"/html/js/session.jsp"
];
var jsTags = "";
for(var i in jsFile) {
jsTags += '<script type="text/javascript" src="' + jsFile[i] + '"></script>';
}
document.write(jsTags);
})( window );
I have the following code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function loadPhotos(folderName){
var folder = "assets/photos/"+folderName+"/";
$.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
}
</script>
</head>
<html>
<div onclick="loadPhotos('7thAnnual')">7th Annual</div>
</html>
For some odd reason when I click on the div, the loadPhotos function throws a 404 not found error on the ajax call.... but the directory that it is saying it can't find, does exist.
For the record I am running this on localhost (http://127.0.0.1:8020/).
the directory structure is Ljf/assets/photos/7thAnnual ....
so the full path would be http://127.0.0.1:8020/Ljf/assets/photos/7thAnnual
the 7thAnnual directory holds all the images
Any thoughts?
Okay.... so it seems that I have to fully qualify the name in the url like so:
var folder = "127.0.0.1:8020/Ljf/assets/photos/7thAnnual";
instead of using just:
var folder = "Ljf/assets/photos/7thAnnual"
This answer brings a
"Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource."
which is a different issue than this post, but it does solve the
404 not found
So I'll mark it as the answer
You must create the directory assets/photos/7thAnnual/. Be sure you did that
If you run this in chrome and open the nifty little inspector
(right click on the background somewhere, choose inspect, then go to the network tab on the inspection window)
then click the div that should trigger the ajax, it should show you the path it tries to get to. (on your little network panel at the very bottom)
Make sure that the path looks right
Look at the response to see if there is any other potentially useful info
let me know what you find!
I have seen some previous questions, that were similar but I couldn't find anything like this. I have a webpage (on a server) and I would like the user to click a button which will execute a python script. I want this python script to run on the server and then send the results back to the webpage and display it.
When the user clicks the button, the data that will be sent to the server would be an XML file.
I just don't know where to start with all of this. What can I use to accomplish this?
Thanks for your time.
EDIT: I actually have the webpage all done and setup, and it produces the XML. I just need to run the python script when a user clicks on a button on the webpage. Not sure if that helps, but I'm posting it. Thanks
I WOULD LIKE A HIGH-LEVEL EXPLANATION FOR THIS PLEASE AND THANK YOU, since I don't know about what has been suggested to me already.
There is a lot of web libs for python. You may try bottle (work without installing, one-file, just put the „bottle.py” file in your work folder. A simple example:
from bottle import route, run, static_file, post, request
#route('/js/<filename>')
def js(filename):
return static_file(filename, root='js')
#route('/')
def index():return static_file('tst.html', root='./')
#post('/xml')
def xml():
for x in request.forms:
print(x)
return {'return': 'accepted'}
run(host='0.0.0.0', port=8000)
And html:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TTL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<button onclick="test()">Test</button>
<script type="text/javascript">
function test() {
$.ajax({
url: 'xml',
type: 'POST',
data: '<my><xml>string</xml></my>',
dataType: 'json',
success: function (ret) {
alert(ret['return']);
}
});
}
</script>
</body>
</html>
Sorry for JQuery, to lazy to write plain js xhr.
Bottle is well documented, but cherrypy, pyramid, django, tornado also.
I wanted to make my site work offline and I did it. But the problem is that I can't update my manifest file. I have the function that should check for update and update it if is possible but I don't know why it's not working.
This is my index.html
<html manifest="VideoPlayer.appcache" >
<head>
<title>Video Player</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body id='main'>
...
<script>
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {}
}, false);
}, false);
....
</script>
</body>
</html>
And my VideoPlayer.appcache:
CACHE MANIFEST
index.html
style.css
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Can You tell me what's wrong with it?
I don't know whether your Javascript can make it easier (I sure hope so!), but what I have learned from experiments with appcached files is that they are only successfully updated/refreshed/reloaded in Chrome and Firefox under the following conditions:
The in your case VideoPlayer.appcache file itself must also be updated. You can do that by including a date and time in the file and change that to the date and time that you update the web page. See the below code block how to include date and time.
Chrome's normal but total browser cache must be cleared as well; just doing a 'hard reload' with Ctrl + F5 won't do. See here how to clear it: http://www.guidingtech.com/1662/clearing-cache-in-google-chrome/.
In Firefox, that doesn't even do, not even in combination with Ctrl + F5. Firefox's Offline Cache must be cleared: Tools -> Options -> Advanced -> Network -> Offline Web Content and User Data -> Remove [site].
Here is the date and time method for the appcache file:
CACHE MANIFEST
# 2014-06-25 — 15.50
CACHE:
[your to-appcache files here]
Changing the date and/or time will tell the browser that the to-appcache file is updated and should be reloaded.
I have not tested matters in IE, among others things because I don't have IE10, and IE9 doesn't do appcaches.
Let me know how it works out if you will, especially in combination with your Javascript.
Please see these below code which I am using for Facebook Open Graph:
<meta property="fb:app_id" content="XXXXX" />
<meta property="og:type" content="collection" />
<meta property="og:url" content="http://XXXXXXXXXXXXX/" />
<meta property="og:title" content="" />
<meta property="og:image" content="http://XXXXXXXXXXXXXXXXXXXXXXXXXX.jpeg"/>
<script type="text/javascript">
function postCook() {
var parameters = new Array();
parameters["og:title"] = "some_text";
FB.api(
'me/<namespace>:<wwwww>',
'post', {
collection: 'http://XXXXXXXXXXXXXXXXX/'
},
function(response) {
//alert(response.responseText);
console.log(response);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Other22 was successful! Action ID: ' + response.id);
}
});
}
</script>
Here I want to pass og:title and some other also as parameter instead of using in the meta tag. Is there any way to pass some more parameters in FB.api?
Thanks.
While I could be wrong about this (as Facebook shifts their API around mercilessly), they don't allow you to pass in any custom tag information, possibly as it could be used to misrepresent information.
Instead, once the publish action hits Facebook, Facebook will immediatelly scrape the url passed in, and grab all the meta data it can find, prioritising any open graph tags first before falling back to other traditional methods of meta information retrieval (title tags, scraping the body text, etc).
One possible "workaround" would be to pass an "echo" url to Facebook instead of the target url itself. This relies on you using a server-side solution, however, as I don't believe you can do this with the JS SDK.
i.e. Instead of passing http://www.foobar.com to facebook, pass http://www.barbaz.com/echo.php?title=your%20custom%2otitle&description=etcetc&url=myurl
Tailor the url parameters as necessary, and they will be readable in echo.php through $_GET. echo.php would then contain the open graph tags to be read by Facebook, and then redirect the user via javascript to the proper URL. Facebook's scraper won't follow the javascript redirect.
echo.php:
<html>
<head>
<meta property="og:title" value="<?=$_GET['title']?>">
</head>
<body>
<script>
window.location.href = '<?=$_GET['url']?>';
</script>
</body>
</html>
Alternatively, you could check for facebook's user-agent string at the top of echo.php and redirect any non-hits to the proper url using header();, and only render the bounce page for the facebook bot.
Here I want to pass og:title and some other also as parameter instead of using in the meta tag.
This is not how Open Graph objects work.
The URL identifies the object, and any data has to be in the HTML code that this URL delivers.