Issue with Javascript generated html code in Internet Explorer

I have a html page with a form in it. In this form, I have 1 input field available for users, with it’s type set to file. The form is usually hidden.

The form appears when a user presses a button, which calls the jQuery.dialog() function. The dialog get’s created just fine, but the input field is never displayed. I can’t know for sure if it is shown at all, or just placed out of the screen.

  • Play symbol (▶) squished in document.title
  • Do innerHTML create nodes in the DOM tree?
  • How can I retain the scroll position of a scrollable area when pressing back button?
  • Cannot get image to show
  • Protractor Wait for Animation to Complete
  • Facebook SDK: Uncaught SyntaxError: Unexpected token _
  • The same happens with a table which get’s automatically generated by javascript. The table consists of several input elements (although different types) and 1 select element per row. Now the select element is displayed correctly, all the input elements don’t.

    Is this an issue with Internet Explorer? Because all other (major) browsers display it just fine. With major browsers, I mean Chrome, FF, Safari & Opera.


    Edit > Source

    The form in the page:

    <form title="Upload snapshot" class="hidden" enctype="multipart/form-data" id="fileUpload" name="fileUpload">
        <input type="hidden" name="command" value="load" />
        <input type="hidden" name="table" id="formTable" />
        <input type="file" id="uploadedFile" name="uploadedFile" />
    </form>
    

    The function that turns the form into the dialog:

    function LoadDatabase(){
        var form = document.getElementById('fileUpload');
        var table = document.getElementById('formTable');
        $(table).attr('value', Settings['table']);
        $(form).dialog({
            position    : 'center',
            autoOpen    : true,
            width       : 500,
            modal       : true,
            draggable   : true,
            buttons     : {
            "Ok"    : function(){
                // Code to hande the file upload...
                $(form).dialog('close');
            },
            "Cancel" : function(){
                $(form).dialog('close');
            }
            },
            close       : function(){
            }
        });
    }
    

    Due to the complexity of the table, it is quite a bit of code to generate the table. Basically, js get’s json formatted collection of entries. This collection get’s decoded and for each type of column, an appropriate cell is created and added to the page’s document. The core bit of this all is:

    var tbodyNew =  document.createElement('tbody');
    $(data.Data).each(function(value) {
        row=this;
        var trRowNew =  document.createElement('tr');
        $(trRowNew).attr('id', row['id']);
        var tdNew = document.createElement('td');
        var rowSelect = document.createElement('input');
        $(rowSelect).attr('type', 'checkbox');
        $(rowSelect).addClass('row-selector');
        $(rowSelect).addClass('hidden');
        $(tdNew).append(rowSelect);
        $(trRowNew).append(tdNew);
        for (var columnId in Columns) {
            tdNew = document.createElement('td');
            if (Columns[columnId].Name == 'id') {
                $(tdNew).addClass('hidden');
            }
            $(tdNew).attr('id', Columns[columnId].Name);
            $(tdNew).append(AddCell(columnId, row));
            $(trRowNew).append(tdNew);
        }
        $(tbodyNew).append(trRowNew);
    });
    $(tableNew).append(tbodyNew);
    $(form).html('');
    $(form).append(tableNew);
    

    The AddCell() method determines the type of input that should be used (checkbox, text, etc).


    Edit 2 > Extra images

    To further explain what is happening:

    The images show the difference in the rendering of the table in the background, and the way the dialog is displayed in the foreground.

    enter image description here

    enter image description here


    Edit 3 > DOM inspection

    I’ve checked the DOM structure in Internet Explorer, and I’ve seen that the elements are put in the page… They just aren’t rendered. It seems that they don’t get an appropriate height & width. Though inspecting their style, it shows that these attributes are set to ‘auto’:

    enter image description here

  • Get latest ajax request and abort others
  • Is there a way in javascript to detect if an element has any events attached to it?
  • How can I pause a web page?
  • Truncate string based on pixel width
  • Storing arbitrary data in HTML
  • Are there any CSS properties that can not be inlined?
  • One Solution collect form web for “Issue with Javascript generated html code in Internet Explorer”

    In the pursuit of solving this issue, I’ve found that when an input has it’s display property set to table-row, Internet Explorer will choke on it. Removing said property will fix the issue. It seems though, that according to the documentation, that this is actually the desired functionality. Though it is strange that it are the other browsers that didn’t follow the documentation….