Can´t open word file with XMLHttpRequest - ms-word

I'm trying to open a word file with XMLHttpRequest with javascript and I can't.
Can anyone help to solve it?
The code I'm using is:
Untitled 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 5</title>
<script type="text/javascript">
try{
var abreficheiro = new XMLHttpRequest();
abreficheiro.open('GET', 'cir_entidade.doc');
abreficheiro.setRequestHeader('Content-disposition', 'attachment');
abreficheiro.setRequestHeader('Content-type', 'application/msword');
abreficheiro.send();
}
catch(err) {
var strErr = 'Error:';
strErr +='\\nNumber:'+err.number;
strErr +='\\nDescription:'+err.description;
document.write(strErr);
}
</script>
</head>
<body>
</body>
</html>

I found this way to do it
Just replace ${filename} with the name of the file.
Works in chrome and edge
var request = new XMLHttpRequest();
request.open("GET", "${filename}.doc");
request.responseType = "blob";
request.onload = function() {
// set `blob` `type` to `"text/html"`;
var blob = new Blob([this.response], {type:"application/msword"});
var url = URL.createObjectURL(blob);
var w = window.open(url);
}
request.send();

Related

getJSON - Loading Image Gallery From Public Server - Flickr

I have tried so many URL variations for Flickr and all attempts have failed to load my image gallery into my own webpage.
I am pretty sure its the URL. If I replace the URL with:
"api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"
all works fine to load public photos from Flickr, but to load my own album (URL below), it won't work.
Yes I have a valid API from Flickr. I also checked the script syntax in "jsbin.com" and all of that is good.
Can anyone help resolve this?
Here is the jQuery script:
(function() {
var flickerUrl = "https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=<removed by edit>&user_id=135938131#N02&format=json&jsoncallback=?";
$.getJSON(flickerUrl)
.done(function(data) {
$.each(data.items, function(i, item) {
var image = $("<img>")
.attr("src", item.media.m)
.attr("title", item.title);
$("<a>")
.attr("href", item.link)
.attr("target", "_blank")
.html(image)
.appendTo("#images");
if ( i === 8 ) {
return false;
}
});
});
})
();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flickr Image Gallery</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Natural Scenery</h1>
<br>
<div id="images"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/flickrgallery.js"></script>
</body>
</html>

Use svg element as bingmap pushpin icon

Is there a way to use an svg element as an icon for the Microsoft.Maps.Pushpin?
I created an svg
element like this:
var fillcolor = "#ff0222";
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("height",50);
svg1.setAttribute("width",50);
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",25);
circles.setAttribute("cy",25);
circles.setAttribute("r",25);
circles.setAttribute("fill",fillcolor);
svg1.appendChild(circles);
On the Microsoft.Maps.Pushpin it is possible to set the options (PushpinOptions) where you can specify the htmlContent property to the value of your choice.
See: http://msdn.microsoft.com/en-us/library/gg427629.aspx
And the iSDK sample: http://www.bingmapsportal.com/isdk/ajaxv7#Pushpins15
The code should be inspired by something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Add pushpin with options</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
}
function addCustomPushpin()
{
var pushpinOptions = {width: null, height: null, htmlContent: "<div style='font-size:12px;font-weight:bold;border:solid 2px;background-color:LightBlue;width:100px;'>Custom Pushpin</div>"};
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
map.entities.push(pushpin);
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>
<input type="button" value="AddCustomPushpin" onclick="addCustomPushpin();" />
</div>
</body>
</html>

How to use dropbox datastore API without memory leaks?

I have following simple code that tests Dropbox datastore API:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://www.dropbox.com/static/api/dropbox-datastores-1.1-latest.js"/></script>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', function() {
client = new Dropbox.Client({key: 'mykey', token: 'mytoken'});
var manager = client.getDatastoreManager();
manager.openDefaultDatastore(function(err, store) {
if (!err) {
setInterval(function() {
var table = store.getTable('foo');
var record = table.get('bar');
record.update({baz: 0});
console.log(record.getSize());
}, 1000);
}
});
});
</script>
</head>
<body>
</body>
</html>
If i execute it, the reported record size will start increasing by 100 bytes on each update. Upon reaching 100kb code will fail with internal "record too big" error. Is it any way to update single Dropbox Datastore record in a loop without memory leaks? Maybe i'm doing something wrong?
Bug in the library, need to wait for a fix: https://forums.dropbox.com/topic.php?id=119469

oauth facebook within page tab reloads

I have an app on facebook, I am using only pagetabs, everything is going all right. I click like, I allow application, request permissions, I allow, but now it comes back to page and there is an error, it reloads over and over... The page cannot load because browser reloads it always, I don't know how to fix it...
Thanks very much
Here is my code:
<?php
require_once "sdk/facebook.php";
$app_id = "MY_APPID";
$app_secret = "MY_SECRET";
$is_fan = false;
// Init facebook api.
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
// Get and decode signed request.
$signed_request = $facebook->getSignedRequest();
if (isset($_REQUEST['signed_request'])) {
$encoded_sig = null;
$payload = null;
list($encoded_sig, $payload) = explode(
'.', $_REQUEST['signed_request'], 2
);
$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
$data = json_decode(
base64_decode(strtr($payload, '-_', '+/'), true)
);
$signed_request = $data;
}
else {
$signed_request = false;
}
// Determine if we have a fan request.
if($signed_request) {
if($signed_request->page->liked) {
$is_fan = true;
}
}
// for fans
if ($is_fan) { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script>
var oauth_url = 'https://www.facebook.com/dialog/oauth/';
oauth_url += '?client_id=414328901957674';
oauth_url += '&redirect_uri=' + encodeURIComponent('https://www.facebook.com/pages/null/167838393340757/?sk=app_414328901957674');
oauth_url += '&scope=user_birthday,user_likes,photo_upload,publish_stream,user_about_me,user_photos,user_hometown,user_location'
window.top.location = oauth_url;
</script>
</head>
<body background="images/fanda.jpg" style="overflow:hidden;"">
</body>
<?php }
// for non-fans
else { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/klikni-like.jpg" style="overflow:hidden;">
</body>
<?php } ?>
When someone is a fan your script is always doing:
window.top.location = oauth_url;
This will cause the page to reload infinitely if someone is a fan.
I have found the solution to your problem. Update this when you check if($is_fan):
$user_id = $facebook->getUser();
if ($is_fan) {
if($user_id)
{
code after authentication and page Liked
}
}
else {
<script>
var oauth_url = 'https://www.facebook.com/dialog/oauth/';
................ Next 4 lines same as the above code ..............
</script>
}

Webapp that uses "UIScrollView" in html

I would like to make a webapp that uses the "UIScrollView" xcode-function but in html.
There's no problem making a html page that puts a bunch of images in one row.. I just want to make a iphone horizontal scroll with swipe gesture to show the next image.
Can this be made?
You'll need to watch for touchstart and touchend (or touchmove) to figure out the direction, then just replace the image with the next/previous. Here are some links:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/
Untested:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var startX;
var endX;
var pic=0;
var pics = ['pic1.png','pic2.png','pic3.png'];
document.getElementById('picture').setAttribute('src',pics[pic]);
function touchStart(event){
startX = event.touches[0].pageX;
}
function touchEnd(event){
endX = event.touches[0].pageX;
deltaX=endX-startX;
if(deltaX>0){
next();
}
else{
prev();
}
}
function next(){
pic++;
if(pic>pics.length){pic--;}
document.getElementById('picture').setAttribute('src',pics[pic]);
}
function previous(){
pic--;
if(pic<0){pic++;}
document.getElementById('picture').setAttribute('src',pics[pic]);
}
</script>
<style>
#pictureFrame{height:460px; width:320px; top:0; left:0;}
</style>
</head>
<body>
<div id="pictureFrame"><img ontouchstart="touchStart(event);" ontouchend="touchEnd(event);" id="picture"/></div>
</body>
</html>