How to make Adyen SDK work on IE and Edge - html

I'm setting up online payments using the Adyen SDK 1.9.4.
It works fine on Chrome, Safari, Opera and Firefox but throws a Javascript error on IE and Edge.
SCRIPT5009: 'chckt' is not defined
'chckt' should be an object that is initialised when the Adyen SDK javascript library is loaded.
I've tried stripping the code back to a simple html page and it still errors.
I've also tried contacting Adyen support but after dozens of emails, I'm no closer to solving the issue.
<!DOCTYPE html>
<html class="html">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test checkout</title>
<script type="text/javascript"
src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Test</h1>
<script type="text/javascript">
$(document).ready(function () {
test_chckt();
});
function test_chckt()
{
console.log('chckt is: ' + typeof chckt);
console.log(chckt);
}
</script>
</body>
</html>
The code should output:
chckt is: object
Object
But in IE and Edge the output is:
chckt is: undefined
SCRIPT5009: 'chckt' is not defined
Any help with this issue would be greatly appreciated.

There is no need for the $(document).ready(). You can simply say console.log(chckt) and it works. Maybe the cb has a different scope and it can't find it. If you really want you can try window.chckt.

Related

date-input-polyfill in Safari 5.1.7 browser

I have written a simple HTML file. In that in have included input <date> element which will not be supported by IE, Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Polyfill</title>
</head>
<body>
Date Field :
<input type="date" name="polyfill-date" id="polyfill-date">
</body>
</html>
I wanted to make it work in Safari, So I have included date-input-polyfill by using "npm install --save date-input-polyfill" dependency in my project.
after that, I included this script tag in my HTML file.
<script src="node_modules/date-input-polyfill/date-input-polyfill.dist.js"></script>
then the date filed worked in IE but not in Safari.
The main aim is not to depend on any library like datepicker or anything. I just wanted to create a polyfill / fallback.
I am working in window 10 with Safari 5.1.7.
Kindly help me to resolve this.

d3.geomap Not Working

I have been trying to get the documentation from http://d3-geomap.github.io/ to work but somehow it's not i can't find my mistake.
Here is my Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap()
.geofile('d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>
My HTML File is in the root folder.
Okay if anyone else has the same problem as me - I solved it.
The thing is that windows has some security issues and it blocks some type of code. I couldn't find out the real reason but if u want it to work, just host it on a virtual web server (e.g. www.xampp.com) that did the job for me.

even with the proper use of modernizr, opera is displaying multiple datepickers

i have followed some tutorials and books to work with html5 forms.I used modernizr to provide a fallback for non supporting browsers. Everything is good. Things are even working in IE6. I am facing problem with jquery datepicker ui. currently input type="date" is supported only by opera(i am using the most latest version of opera).
Though i used modernizr for detecting browser support for input type="date", somehow opera is still loading jquery datepicker. Am i doing anything wrong??... should i include scripts in specific order??...
This is the code i have written followed by screenshot of the problem.
html markup:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>date picker</title>
<link rel="stylesheet" href="jquery-ui/css/redmond/jquery-ui-1.8.20.custom.css"/>
</head>
<body>
<form>
<input type="date" name="date-picker" id="date-picker" value="2010-10-06" />
</form>
<script src="modernizr.js"></script>
<script src="webforms/webforms2.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.core.min.js"></script>
<script src="jquery.ui.datepicker.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
jquery code :
$(document).ready(function(){
if(!Modernizr.inputtypes.date){
$('input[type=date]').each(function() {
var $input = $(this);
$input.datepicker({
minDate: $input.attr('min'),
maxDate: $input.attr('max'),
dateFormat: 'yy-mm-dd'
});
});
}
});
screenshot:
http://imageshack.us/photo/my-images/16/operadatepicker.jpg/
source code:media fire download link
Modernizr.inputtypes.date works as expected in Opera 11:
http://jsfiddle.net/feeela/tMUcw/
Maybe the error is, that you haven't included 'Input Types' in you build of Modernizr. GO and download the developer version or build a custom download, but make sure to include 'Input Types'.
http://modernizr.com/download/

Why DHTML behavior not work in IE8 if document.write is executed in <head>?

We have a 3rd party web application which works on in IE6, but not works in IE8.
The sample code is like below, the "message from .htc" message will popup in IE6, but not popup in IE8.
test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript'>
//if comment the following line, or move this script in <body>,
//then HTC will work in IE8
document.write ("<h1>document.write() in <head></h1> some calendar codes");
</script>
</head>
<body style='behavior:url(test.htc)'>
HTML Components test
</body>
</html>
test.htc
<script type='text/javascript'>
alert ("message from .htc");
</script>
Why this happened? Any compatible documents to explain this?
Solution
As #Quentin said or another expert from http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/c1f546f6-d7e1-4b46-a1c9-8f02eaf1286b said, IE8 probably make rules strictly compared to IE6, and IE8 may treat it as an corrupt HTML document.
So, I decide to to use document.createElement to create elements dynamically instead of document.write, and insert these elements to DOM after some seconds delay. After some tests, it finally worked both in this test.html and real application.
test-ie8-compatible.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<script type='text/javascript'>
function Delay_CreateCalendar()
{
var oContainer = document.createElement ("div");
var oCalendarIFrame = document.createElement ("iframe");
oContainer.appendChild (oCalendarIFrame);
document.body.insertBefore (oContainer);
}
setTimeout (Delay_CreateCalendar, 2000);
</script>
</head>
<body style='behavior:url(test.htc)'>
dhtml HTC 测试
</body>
</html>
Presumably, despite the namespace, you are serving the document as text/html. In HTML the start and end tags for the head and body element are optional. H1 elements are not allowed inside the head.
Thus, when you document.write and H1 inside the end, you trigger the end of the head and the start of the body.
I assume that IE then ignores the start tag for the body element as it would create a second body (which also isn't allowed).

webshim polyfill localStorage undefined in IE6

When I run the following code in an IETester IE6 window:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DealingTree</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/modernizr.js"> </script>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/sssl.js"> </script>
<script type="text/javascript" src="/js/webshims/js-webshim/minified/polyfiller.js"> </script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
$.webshims.polyfill('json-storage');
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
//]>
</script>
</body>
</html>
I get the following error in a popup dialog:
Line: 15
Char: 7
Error: 'localStorage' is undefined
Code: 0
URL: http://localhost/problem2.html
The code works fine in IE9 running in IE7 mode.
When I change to use Douglas Crockford's JSON2.js and Remy Sharp's storage polyfill --upon which this is supposedly based-- I do not have the problem.
Please help?
I received an email from the author (Alexander Farkas) explaining that the code using the polyfill must be inside a domready event handler, such as the following:
$.webshims.polyfill('json-storage');
$(function(){
localStorage.setItem('myKey','myValue');
alert(localStorage.getItem('myKey'));
});
For more information:
http://afarkas.github.com/webshim/demos/index.html#polyfill-ready
IE6 doesn't support HTML5 features at all. This is not very surprising for an ancient browser that should already be dead and buried (IE6 was released in the year 2001, and the foundations for HTML5 were only laid in 2004). See this answer for more details.
Note that there are wrappers which are capable of emulating such functionality - e.g. this question suggests jStorage for compatibility with IE6+.