IE8 reports an error [Archive] - Dynamic Drive Forums

Max Patmoy

09-04-2012, 01:10 AM

1) Script Title: METS.Widget({id: 'MSwidgetOne',

2) Script URL (on DD): www.hawkesbay.co.nz

3) Describe problem: Every time my homepage loads with Internet Explorer 8 the following message is displayed, bottom right, in the Task Bar
"unidentified" is nul or not an object
ms.widgit.js Line 179
Code 0 Char 28
HRI: http//www.metservice.com/assets/js/ms.widgit.js

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; BTRS124447; GTB7.4; EasyBits GO v1.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; Alexa Toolbar)
Timestamp: Tue, 4 Sep 2012 01:04:55 UTC

Message: 'undefined' is null or not an object
Line: 179
Char: 28
Code: 0
URI: http://www.metservice.com/assets/js/ms.widget.js

The script I am using is as follows:

<center><script type="text/javascript" src="http://www.metservice.com/assets/js/ms.widget.js"></script><script type="text/javascript"></script><div class="cleanslate MSwidget" id="MSwidgetOne"></div><div class="cleanslate MSwidget" id="MSwidgetTwo"></div></center>

Many thanks

Max

jscheuer1

09-04-2012, 03:20 AM

That's not actually a DD script. It's a weather widget from MetService. They do use some DD code though, so the credit should remain. The error occurs in the http://www.metservice.com/assets/js/ms.widget.js file on the line specified (179) as it's trying to convert an undefined object/variable to upper case.

This error occurs in other browsers (IE 9, Opera, Chrome, probably others). IE 8 is just more aggressive in reporting it. The widgets are working in IE 8 and those others. They are the weather reports for Hastings and Napier.

The problem arises because mootools (which is also used on the page) isn't 100% compatible with the mets weather widget. Because of the error, even in those browsers which render the widget, you lose the orange "Warnings in force" link bar of the widgets.

You could put the widget on a separate page and have it shown on the main page via an iframe, you would lose the error, get back the "Warnings in force", but the disclaimer would not display properly (that can be worked out though). Of course you could get rid of mootools from the page, but that seems unlikely.

For iframe, put this in the head of the page (highlighted as indicated):

. . . right: 10px;
z-index: 15;
display: none;
}

-->
</style>
<link rel="stylesheet" href="http://www.metservice.com/assets/css/MSwidget.css" type="text/css">
<style type="text/css">
.MSdisclaimerContainer {
width: 500px !important;
}
.MSdisclaimerContainer .MSdisclaimerInner {
border-radius: 15px !important;
}
</style>
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/plugins/system/jceutili . . .

On the page in the body replace:

<center>
<script type="text/javascript" src="http://www.metservice.com/assets/js/ms.widget.js"></script>
<script type="text/javascript"></script>
<div class="cleanslate MSwidget" id="MSwidgetOne"></div>
<div class="cleanslate MSwidget" id="MSwidgetTwo"></div>
</center>

with:

<script type="text/javascript">
(function(){
function onloadfunc(){
document.getElementById('metsframe').src = 'mets.htm';
}
if (window.addEventListener){
window.addEventListener('load', onloadfunc, false);
}
else if (window.attachEvent){
window.attachEvent('onload', onloadfunc);
}
})();
</script>
<iframe id="metsframe" src="about:blank" style="width: 238px; height: 262px; border-width: 0; overflow: hidden; margin: 0 auto; display: block;" frameborder="0"></iframe>

Create mets.htm in the same folder and put this code in it:

<!DOCTYPE html>
<html>
<head>
<title>Met Service Westher Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
if(self !== parent){
jQuery.fn.jquery = '1.5.1';
var $ = jQuery.noConflict(true), pds, timer;
$('head').append('<style type="text/css">.MSdisclaimerContainer {display: none !important;}<\/style>');
$('.MSdisclaimer').live('mouseenter', function(e){
clearTimeout(timer);
if(pds){pds.remove();}
var $ds =$(this), w = $ds.width(), h = $ds.height(), o = $ds.offset(), po = $(parent.document.body).find('#metsframe').offset();
pds = $('.MSdisclaimerContainer').clone(true).css({display: 'none', position: 'absolute', top: o.top + po.top + h, left: o.left + po.left + w, width: 238, height: 'auto'});
$(parent.document.body).append(pds);
pds.fadeIn('slow');
pds.unbind().hover(function(){clearTimeout(timer);}, function(){timer = setTimeout(function(){pds.remove();}, 1000);});
}).live('mouseleave', function(){
timer = setTimeout(function(){pds.remove();}, 1000);
});
}
</script>
</head>
<body>
<script type="text/javascript" src="http://www.metservice.com/assets/js/ms.widget.js">
// ms.widget.js contains and sometimes uses:
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
new METS.Widget({id: 'MSwidgetOne',
host: 'www.metservice.com',
city: 'Hastings',
type: 'two'});
new METS.Widget({id: 'MSwidgetTwo',
host: 'www.metservice.com',
city: 'Napier',
type: 'two'});
</script>
<div class="cleanslate MSwidget" id="MSwidgetOne"></div>
<div class="cleanslate MSwidget" id="MSwidgetTwo"></div>
</body>
</html>

Some tweaking may be required/desired. The browser cache may need to be cleared and/or the page refreshed to see changes.

One other solution would be to suppress error reporting:

<center>
<script type="text/javascript" src="http://www.metservice.com/assets/js/ms.widget.js"></script>
<script type="text/javascript"></script>
<div class="cleanslate MSwidget" id="MSwidgetOne"></div>
<div class="cleanslate MSwidget" id="MSwidgetTwo"></div>
</center>

But you still miss out on the "Warnings in force".

In fact, if you use the iframe method, or get rid of mootools, you could even use the type: 'one' widget and it would work.