Jean-François Beauchamp Jean-François Beauchamp - 4 months ago 20
jQuery Question

jQuery dialog + iframe gives this error in IE9: SCRIPT5009: 'Array' is undefined

I have been battling for a while with an error that I would only get with IE9. Depending on the version of jQuery and jQuery-UI, the error message would differ a bit. With jquery 1.8.3 and jquery-ui 1.8.24, I would get the following error message:


SCRIPT5009: 'Array' is undefined


However, with jquery 1.7.x and jquery-ui 1.7.x, I would get the following error message:


SCRIPT5009: 'Object' is undefined


Here is the code of the offending page:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog">
<iframe id="iframe1" src="jqtest2.htm"></iframe>
</div>
</body>
</html>


And here is the code of the iframe in that page:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
</body>
</html>


I am not getting these error message in IE 9 using Compatibility View mode, in Google Chrome, or in Firefox.

The jquery inclusion within the iframe seems to be de culprit.

Answer

Here is how I solve my problem. I left my iframe src attribute empty, and I initialized it using jquery only after the call to dialog(). I guess, this way IE loads the iframe content a bit later, and in that case, the problem does not arise. Here is the modified code that works:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<title></title>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#dialog").dialog();
            $("#iframe1").attr("src", "jqtest2.htm");
        });
    </script>
</head>
<body>
    <div id="dialog">
        <iframe id="iframe1" src=""></iframe>
    </div>
</body>
</html>

The iframe html file remained the same.