I am using below code to share link on google plus.
<html>
<head>
<script type="text/javascript">
window.onPlusStart = function(x) {
console.log('ops', x)
}
window.onPlusDone = function(x) {
console.log('opd', x)
}
</script>
</head>
<body>
<div class="g-plus" data-action="share" data-href="http://test.com"
data-onstartinteraction="onPlusStart"
data-onendinteraction="onPlusDone">
</div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
ISSUE : Right now i am getting response four times in console log for onPlusDone at the time of successfully share(response 1 : before login window, response 2 : after close login window, response 3 : after close login window, response 4 : after share successfully).
But i need response only one after successfully share.
Related
I'm trying to get an if statement going to get api results.
First I put eventlisteners(click) on my images and when they are BOTH clicked, the get-api-results function should run.
I know I asked something similar before but I got that one screwed up, with this I`m a little closer I think.
Here`s the code
import axios from 'axios';
const container = document.getElementById('container')
let img = document.createElement("img");
img.src = "https://picsum.photos/200/301";
let img2 = document.createElement("img2");
img2.src = "https://picsum.photos/200/300";
const imgCheck = img.addEventListener("click", function(e) {
console.log("check")
})
const img2Check = img2.addEventListener("click", function(e) {
console.log("ok")
})
img.onclick = function () {location.href = "http://localhost:1234/pageTwo.html";};
document.body.appendChild(img);
document.body.appendChild(img2);
if (imgCheck && img2Check){
async function fetchRecipeOne() {
try {
const result = await axios.get('https://api.spoonacular.com/recipes/complexSearch?query=pasta&maxFat=25&number=2&apiKey=0b4d29adff5f4b41908e8ef51329fc48', {
headers: {
"Content-Type": "application/json"
}
})
console.log(result);
} catch (e) {
console.error(e);
}}
fetchRecipeOne();
} else {
console.log('no results');
}
And the html pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Title</title>
</head>
<body>
<img ><img/>
<script type="module" src="app.js"></script>
</body>
</html>
And page 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Title</title>
</head>
<body>
<img id="img2"><img/>
<script type="module" src="app.js"></script>
</body>
</html>
Again, I`m pretty new to this stuff so if can give me enough details to sort this out you would do me a big favour.
Thanks!
Tom
addEventListener() does not return anything.
Maybe you can create a variable and change it in the eventlistener, like so:
let imgCheck = false;
img.addEventListener("click", function(e) {
imgCheck = true;
});
let img2Check = false;
img2.addEventListener("click", function(e) {
img2Check = true;
});
Also you redirect the user when he click on img, reset the click so to say. Maybe delete that
And the where you define img2 you try to create an element with the name 'img2' which isn't a valid element.
So change:
let img2 = document.createElement("img2");
To:
let img2 = document.createElement("img");
Lastly you check is the user has clicked on both the images when the script runs, what you can do is set the if statement in the async function, and call the function when the user clicks on a img.
So it could look something like:
import axios from 'axios';
const container = document.getElementById('container')
let img = document.createElement("img");
img.src = "https://picsum.photos/200/301";
let img2 = document.createElement("img");
img2.src = "https://picsum.photos/200/300";
let imgCheck = false;
img.addEventListener("click", function(e) {
imgCheck = true;
fetchRecipeOne();
});
let img2Check = false;
img2.addEventListener("click", function(e) {
img2Check = true;
fetchRecipeOne();
});
document.body.appendChild(img);
document.body.appendChild(img2);
async function fetchRecipeOne() {
if (imgCheck && img2Check) {
try {
const result = await axios.get('https://api.spoonacular.com/recipes/complexSearch? query=pasta&maxFat=25&number=2&apiKey=0b4d29adff5f4b41908e8ef51329fc48', {
headers: {
"Content-Type": "application/json"
}
})
console.log(result);
} catch (e) {
console.error(e);
}
} else {
console.log('no results');
}
}
This is my first time working with AJAX, and I cant seem to figure out WHY the .txt file will NOT load? but instead goes to a new page with just that text displayed) ie: not loading in the same page:
my index.html page:
<html>
<head>
<meta charset="utf-8">
<title>Learning Ajax</title>
</head>
<body>
<!-- my first AJAX script -->
<h1>Learning Ajax</h1>
Load Text Files
<script src="js/main.js"></script>
</body>
</html>
here is my main.js script:
var message = "Test";
(function() {
var link = document.getElementsByTagName("a")[0];
link.onClick = function(){
var xhr = new XMLHttpRequest();
//handle the 'onreadystatechange" event
//0 = un-initialized
//1 = loading
//2 = loaded (sent to server)
//3 = interactive (server is responding)
//4 = complete (request finished)
xhr.readystatechange = function(){
if((xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304)){
xhr.responseText;
var body = document.getElementsByTagName("body")[0];
var p = document.createElement("p");
var pText = document.createTextNode(xhr.responseText);
p.appendChild(pText);
body.appendChild(p);
};
//open the request
xhr.open("GET", "files/ajax.txt", true);
//send the request
xhr.send(null);
return false;
};
};
})();
alert(message);
in my ajax.txt file.. I just have some random plain text: This is Ajax text to be loaded.
I am NOT running this locally, but through localhost using WAMP web server..
What am I missing? or overlooking here?
Tutorial link: tutsplus.com/lesson/the-simplest-ajax-script
to solve your problem:
Make this replacement to your code:
onClick -> onclick (js is case sensitive)
readystatechange -> onreadystatechange
then put this piece of code out of the onreadystatechange function:
//open the request
xhr.open("GET", "files/ajax.txt", true);
//send the request
xhr.send(null);
return false;
This is the new main.js:
var message = "Test";
(function() {
var link = document.getElementsByTagName("a")[0];
link.onclick = function(){
var xhr = new XMLHttpRequest();
//handle the 'onreadystatechange" event
//0 = un-initialized
//1 = loading
//2 = loaded (sent to server)
//3 = interactive (server is responding)
//4 = complete (request finished)
xhr.onreadystatechange = function(){
if((xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304)){
xhr.responseText;
var body = document.getElementsByTagName("body")[0];
var p = document.createElement("p");
var pText = document.createTextNode(xhr.responseText);
p.appendChild(pText);
body.appendChild(p);
};
return false;
};
//open the request
xhr.open("GET", "files/ajax.txt?aiai", true);
//send the request
xhr.send(null);
return false;
};
})();
alert(message);
I think its easier to do it like that:
first, HTML:
<html>
<head>
<meta charset="utf-8">
<title>Learning Ajax</title>
</head>
<body>
<!-- my first AJAX script -->
<h1>Learning Ajax</h1>
Load Text Files
<div id="textFiles"><!-- files display here --></div>
</body>
</html>
JS:
<script>
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest();
}
else {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function loadText() {
var message = "Test";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById("textFiles").innerHTML = xmlhttp.responseText;
alert(message);
}
else{
document.getElementById("textFiles").innerHTML = "Loading Files...";
}
};
xmlhttp.open("POST",'files/ajax.txt',true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
</script>
Look at this code:
This creates four circles on the map in a same position and it creates addListener click event for each one too but I just can click on the last one. I want to fix it in a way that I can click on all of them to make setEditable(true) for each one.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var selectedShape;
function clearSelection()
{
if(selectedShape)
{
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape)
{
clearSelection();
selectedShape = shape;
shape.setEditable(true);
}
</script>
<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {center:amsterdam, zoom:7, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myArray = [];
var myCity;
for(var i = 0; i < 4; i++)
{
myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myArray.push(myCity);
google.maps.event.addListener(myCity, 'click', function() {setSelection(myCity)});
myArray[i].setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Use this instead of myCity :
google.maps.event.addListener(myCity, 'click', function() {
setSelection(this)
});
Using setSelection(myCity) will refer to the last myCity created.
I have trouble in this code (I am working from my local PC).
Thks for your help.
My code is below:
<html>
<head>
<title>My Test</title>
<script src="../jquery/js/jquery-1.9.0.min.js"></script>
</head>
<body>
<script>
var _canvas = document.createElement('canvas');
_canvas.width="100";
_canvas.height="100";
var _context = _canvas.getContext("2d");
var _img = new Image();
_img.src = "image/myImgTest.png";
var _url;
_img.onload = function() {
DrawScreen(); // just some process: drawing image
_url = _canvas.toDataURL();
alert("test"); **// this alert is printed on FF not on Chrome ???**
// window.location = url; **// With this command on FF, I show my Image**
document.write("<img src='"+url+"' >"); **// on FF, I show my image but when I would like to see the source code on my current page, there is nothing just blank ?? And on Chrome, I never show my image.**
**// In fact, I am expected to generate something like this: <img src="data:image/png;base64,iVBORw0KGgo....."> at this place **
};
function DrawScreen() {
// my process
}
</script>
</body>
</html>
*// In fact, I am expected to generate something like this: at this place *
As you are "working on your local PC" ... do you have a webserver on your local PC or do you just open the HTML file directly from your hard drive?
You might want to move the assignment of .src to after the .onload event handler, because otherwise it might be possible that .onload never gets triggered.
var _img = new Image();
var _url;
_img.onload = function() {
...
};
_img.src = "image/myImgTest.png";
I make payment with Paymill API using 3D secure:
paymill.createToken(params, paymillResponseHandler, tdsInit, tdsCleanup);
this part from documentation complitely don't work:
var tdsInit = function(iframeUrl, cancelFn) {
var body = document.body || document.getElementsByTagName('body')[0];
var iframe = document.createElement('iframe');
iframe.id = 'tdsIframe';
iframe.src = iframeUrl;
iframe.width = 600;
iframe.height = 500;
iframe.style.zIndex = 0xffffffff;
iframe.style.background = '#fff';
iframe.style.position = 'absolute';
body.insertBefore(iframe, body.firstChild);
};
So i do this way:
function tdsInit(iframeUrl, cancelFn) {
var body = document.body;
var div3D = document.createElement("div");
div3D.id = "div3Dsecure";
body.insertBefore(div3D, body.firstChild);
var pareq = decodeURIComponent(iframeUrl.params.PaReq.replace(/\+/g, " "));
var termurl = decodeURIComponent(iframeUrl.params.TermUrl.replace(/\+/g, " "));
div3D.innerHTML='.$dot.'<form id="3Dsecureform" action="'.$dot.'+iframeUrl.url+'.$dot.'" method="POST"><textarea name="PaReq" style="display:none">'.$dot.'+pareq+'.$dot.'</textarea><input type="hidden" name="TermUrl" value='.$dot.'+termurl+'.$dot.'><input type="hidden" name="MD" value='.$dot.'+iframeUrl.params.MD+'.$dot.'></form>'.$dot.';
var iframe = document.createElement("iframe");
iframe.id = "tdsIframe";
iframe.src = "";
iframe.width = 600;
iframe.height = 500;
iframe.style.zIndex = 0xffffffff;
iframe.style.background = "#fff";
iframe.style.position = "absolute";
iframe.scrolling = "no";
body.insertBefore(iframe, body.firstChild);
document.forms[0].target = "tdsIframe";
document.forms[0].submit();
};
Payments go ok, but when client do payment using card from Sberbank we have problem :
iframe instead of showing 3D Secure page from ACS only make a response about successfully auth this payment.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Return to Merchant's site</title>
<SCRIPT>
function onLoadHandler() {
document["PAResForm"].submit();
}
</SCRIPT>
</head>
<body onLoad="onLoadHandler();">
<BR>
<BR>Processing...
<FORM NAME="PAResForm" METHOD="post" ACTION="https://ctpe.net/payment/threedsecure?ndcid=8BE948ADB647AF64A9C2640B81DC4B82.lon-vm-fe05&jsessionid=.lon-vm-ps02">
<INPUT NAME="PaRes" TYPE="hidden" VALUE="eJxVkLFuAjEMhl/Fyt7kOAnRwRcGKBtT6YyinI+LlMSVExCP30OEVpW82L/9/bZxe08RbiQlcB7USncKKHseQ74M6ut0eHtXW4unWYj2n+SvQhaPVIq7EIRxUPcprc+bc69XXdd3G2XxQ4TFYmPaBal7NK8U6SHveCS7RvOXPOuNbA8syVXgCTgTsEBiIaBIiXItEJbINxfDCM57lse2UBnqTFC+yYcpeFcXO90sXtyny56qC9EeSfzsctVXia2vKWjaEeZ30Px7wQ9uC2z4"><INPUT NAME="MD" TYPE="hidden" VALUE="8a8394823cd8c78d013cf365e77a3ac5">
</FORM>
</body>
</html>
First I think that there was some mistakes in Sberbank, but client make another payment using another PSP and have 3D secure window from Sberbank :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<SCRIPT LANGUAGE="JavaScript" SRC="/sberbank/common/global.js"></SCRIPT>
<LINK href="/sberbank/common/va_style.css" rel=STYLESHEET type="text/css">
<title>Verified by VISA - Пароль безопасности</title>
<SCRIPT type="text/javascript">
strBeforeUnload = "Ваша транзакция не завершена!\
Для продолжения, нажмите кнопку 'Отмена' и введите пароль на странице проверки безопасности.";
<!-- page for OTP_SMS -->
var PAMs = new Array();
PAMs[0] = new Array("0","None");
I cannot understand where I do a mistake. Maybe anyone can help me ?
Im sorry but there seems to be an outdated code example in the documentation. Please have a look at the following example for the tdsInit() callback (this is a simplified version of the Bridge.js default implementation of this in order to illustrate the process):
var tdsInit = function tdsInit(redirect, cancelCallback) {
var url = redirect.url, params = redirect.params;
var body = document.body || document.getElementsByTagName('body')[0];
var iframe = document.createElement('iframe');
body.insertBefore(iframe, body.firstChild);
var iframeDoc = iframe.contentWindow || iframe.contentDocument;
if (iframeDoc.document) iframeDoc = iframeDoc.document;
var form = iframeDoc.createElement('form');
form.method = 'post';
form.action = url;
for (var k in params) {
var input = iframeDoc.createElement('input');
input.type = 'hidden';
input.name = k;
input.value = decodeURIComponent(params[k]);
form.appendChild(input);
}
if (iframeDoc.body) iframeDoc.body.appendChild(form);
else iframeDoc.appendChild(form);
form.submit();
};
Note however that tdsInit and tdsEnd are both optional parameters. You only need these if you want to customize the look&feel of the iframe.