IE issue with dialog and datepicker when a dojo datagrid is on the same page
NOTE: Test case is included, rename it to html or htm to view.
Edit 1: Updated issue information per my first reply.
I'm not sure if this is a dojo or jquery issue, but will try to provide as much information as I can to figure it out. I can transfer it to a bug report if deemed valid. The error seems to be related to the 'open' method for the dialog and datapicker. This may affect other UI elements but these are the only two I've actually tried right now.
Last known version issue was not present:
Dojo - 1.3.2, 1.5.0
jQuery UI - 1.7.2, 1.8.5 (when using jQ 1.4.0)
jQuery - 1.4.0
Versions issue has show up on:
Dojo - 1.3.2, 1.5.0
jQuery UI - 1.8.5
jQuery - 1.4.1, 1.4.2
Firefox has no issues but IE (7, 8 Compat, 8) runs into the error below whenever a dojo datagrid is on the page:
'nodeName' is null or not an object jquery-1.4.2.js, line 542 character 3
- nodeName: function( elem, name ) {
- return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
- },
If I comment out the section that initializes the grid everything is fine, but remove the comment and the error will return. The attached file is also printed below and is pretty much the most basic I can make it.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
- <head>
- <title>jQuery UI with Dojo DataGrid Test case</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"></script>
- <style type="text/css">
- @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/soria/soria.css";
- @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojox/grid/resources/Grid.css";
- @import "http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojox/grid/resources/soriaGrid.css";
-
- body {
- font-size: 0.9em;
- }
-
- .gridContainer {
- border: 1px solid #000000;
- width: 10em;
- height: 10em;
- }
- </style>
- <link type="text/css" rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" />
- <!-- Successful in IE -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
- <!-- FAILS in IE
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
- -->
- <!-- FAILS in IE
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
- -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
-
- <script type="text/javascript">
- $(function(){
- // Dialog
- $('#dialog').dialog({
- autoOpen: false,
- width: 600,
- buttons: {
- "Ok": function() {
- $(this).dialog("close");
- },
- "Cancel": function() {
- $(this).dialog("close");
- }
- }
- });
-
- $('#loadDialog').click(function(){
- $('#dialog').dialog('open');
- });
-
- // Datepicker
- $('#datepicker').datepicker({
- inline: true
- });
- });
- /**
- *If you commont out the following starting from here:
- *----------------------------------------------------
- **/
- // Grid
- dojo.require('dojo.data.ItemFileReadStore');
- dojo.require('dojox.grid.DataGrid');
-
- dojo.addOnLoad(function() {
- var dataStore = '';
- var gridJS = '';
- var gridCells = {"items" : [{"field1":"stuff"}]};
- gridLayout = [
- {
- cells: [
- {name: 'field1', field: 'field1'}
- ]
- }
- ];
-
- dataStore = new dojo.data.ItemFileReadStore({ "data" : gridCells});
-
- // Programmatically construct a data grid
- gridJS = new dojox.grid.DataGrid({
- id: 'grid',
- jsId: 'gridJS',
- store: dataStore,
- structure: gridLayout,
- selectionMode: 'single',
- columnReordering: false,
- noDataMessage: ''
- }, 'grid');
- // Tell the grid to lay itself out since it was programmatically constructed
- gridJS.startup();
- });
- /**
- *----------------------------------------------------
- * To here:
- * The error will not occur, so it looks like some sort of conflict
- **/
- </script>
- </head>
- <body>
- <form>
- <!-- jQuery UI Datepicker -->
- <h2>Datepicker</h2>
- <input id='datepicker' type='text' id='showDatePicker' />
-
- <!-- jQuery UI Dialog -->
- <h2>Dialog</h2>
- <input type='button' id='loadDialog' value='Load Dialog' />
- <div id="dialog" title="Dialog Title">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- </div>
-
- <!-- Dojo Grid-->
- <h2>Dojo Grid</h2>
- <div class='gridContainer'>
- <div id='grid' class='soria'></div>
- </div>
- </form>
- </body>
- </html>