webshim polyfill localStorage undefined in IE6 - html

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+.

Related

How to make Adyen SDK work on IE and Edge

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.

Caja / Apps Scripts jQuery $(document).ready not firing

I have a project in Apps Scripts where the code in my $(document).ready never gets executed. I also tried with this basic code at http://caja.appspot.com/, which also doesn't work.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("span").text("Working");
});
</script>
</head>
<body>
<span>Not Working</span>
</body>
</html>​
The "Not Working" text shows up. Also tried with jQuery versions 2.x.x
Any ideas?
Thanks
This works if you use a slightly older jQuery version.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").text("Working");
});
</script>
</head>
<body>
<span>Not Working</span>
</body>
</html>
I'm not sure why, since the documentation says Caja works with all recent jQuery versions: https://developers.google.com/apps-script/guides/html/restrictions#jquery_and_jquery_ui

CSS, HTML - Site displays very wrong in Internet Explorer

Please look at this link - http://sklepylaserowe.test.dih.pl/.
It displays well in Firefox, Chrome and Opera - but it's messed up in Internet Explorer (8 and 9). What could be a reason of it? (From list "Wybierz województwo", please select "śląskie", click "Dalej >>", and click on link that appears, to hide that overlay window)
Many basic CSS commands don't work, like:
margin:0 auto;
You are failing to start the document with a Doctype, this triggers Quirks mode in which browsers emulate the bugs of their ancient ancestors.
Not supporting auto margins for centring is one of these bugs in IE (it was fixed in IE 6).
Validate your HTML. You cannot put any tags before the Doctype.
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/geo.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Change above code to
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/geo.js"></script>
...

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).