1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    33
    Vote Rating
    1
    Beginner1971 is on a distinguished road

      0  

    Default Document object doesn't contain getElementById(). Why???

    Document object doesn't contain getElementById(). Why???


    I have a hidden iframe in my web page, and I'm trying to access the DOM inside the iframe. My code works fine in Firefox, but not in IE. For IE, I get the following error:

    Unable to get value of the property 'getElementById': object is null or undefined

    The document object is missing the getElementById() method. How is this possible?

    My code is long, but here's the key part of the JavaScript that is failing:

    Code:
    var iframe = document.getElementById('ExcelExportIFrame');             //this line of code works fine
    var myContentDocument = iframe.contentDocument;                        //this line of code works fine
    var methodNameField = myContentDocument.getElementById('methodName');  //this line does not work in IE!!!!
    Here's the HTML that gets loaded in the iframe:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        Hello World!
        <form id="hiddenForm" method="post" action="/handlers/Router.ashx" enctype="multipart/form-data" >
            <input type="text" id="EXPORT" name="EXPORT" value="TRUE" />
            <input type="hidden" id="headers" name="headers" />
            <input type="hidden" id="columns" name="columns" />
            <input type="submit" />
        </form>
    </body>
    </html>
    Here's a more complete, but still shortened version of my JavaScript:

    Code:
    CombinedGrid = Ext.extend(Ext.grid.GridPanel, {
        stateful: true,
        enableHdMenu: false,
        plugins: [new Ext.ux.grid.GridViewMenuPlugin(), new GridPanel.Filterable(), new Ext.ux.grid.GridPanel.StaticScrollGridPanel()],
        view: new Ext.grid.GridView(),
    
        initComponent: function() {
            this.view.scrollLeft = 0;
            this.view.scrollTop = 0;
            this.on('filter', this.onFilter, this);
            this.getStore().on('load', function() {
      var storeCount = this.getStore().getTotalCount();
      this.updateTabTitleWithCount(storeCount);
            }, this); 
            Ext.applyIf(this, {
                columns: SearchResultsCombinedGridColumnModel,
                bbar: new Ext.PagingToolbar({
                    pageSize: 15,
                    store: this.store,
                    displayInfo: true,
                    items: ['->', {
                        icon: 'Images/Icons/page_excel.png',
                        text: 'Export',
                        tooltip: 'Export data to an Excel document.',                    
                        handler: function() {                        
                            //this should be refactored, to get the parent
                            //rather than getting it by ID
                            var grid = Ext.getCmp('combinedResultsTab');
                            //this helper function is in Library.js in the framework...
                            var colInfo = GetExportColumns(grid);
                            var headers = colInfo.headers;
                            var columns = colInfo.columns;
    
                            var iframe = document.getElementById('ExcelExportIFrame');                //this line of code works fine
                            iframe.src = "/scripts/ExcelExport.htm";
                            try {
                                var myContentDocument = iframe.contentDocument;                       //this line of code works fine
                                
                                var methodNameField = myContentDocument.getElementById('methodName'); //this line does not work in IE!!!!
                                methodNameField.value = 'ExportCombined';
                                var headersField = myContentDocument.getElementById('headers');
                                headersField.value = ConvertArrayToCommaSeparatedList(headers);
                                var columnsField = myContentDocument.getElementById('columns');
                                columnsField.value = ConvertArrayToCommaSeparatedList(columns);
                                var myForm = myContentDocument.getElementById('hiddenForm');
                                myForm.submit();
                            } catch(err) {
                                window.console && console.log(err.description);
                                alert(err.description);
                            }
                                                                        }
                    },{
                        xtype: 'box',
                        html: '<iframe id="ExcelExportIFrame" src="ExcelExport.htm"\
                              </iframe>'                    
                    }]
                })
            })
            CombinedGrid.superclass.initComponent.call(this);
        }, //initComponent
    });
    Again, this code works fine in Firefox, but in IE, the document object is missing the getElementById() method.

    Does anyone know what's going on here or how to fix it?
    Last edited by Beginner1971; 1 May 2012 at 10:35 AM. Reason: Grammar.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have a look at Ext.get('idElement')

    Regards,
    Scott.

Thread Participants: 1

Tags for this Thread