У меня есть HTML-страница с формой в нем. В этой форме у меня есть 1 поле ввода, доступное для пользователей, с типом, установленным на file. Форма обычно скрыта.
Форма появляется, когда пользователь нажимает кнопку, которая вызывает функцию jQuery.dialog(). Диалог get создан просто отлично, но поле ввода никогда не отображается. Я не могу точно знать, отображается ли он вообще или просто выводится из экрана.
То же самое происходит с таблицей, которая автоматически генерируется JavaScript. Таблица состоит из нескольких элементов ввода (хотя и разных типов) и 1 элемента выбора в строке. Теперь элемент select отображается правильно, все элементы ввода не отображаются.
Это проблема с Internet Explorer? Потому что все другие (основные) браузеры отображают его просто отлично. Под основными браузерами я имею в виду Chrome, FF, Safari & Opera.
Редактировать> Источник
Форма на странице:
<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>
Функция, которая превращает форму в диалог:
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(){
}
});
}
Из-за сложности таблицы для ее создания требуется совсем немного кода. По сути, js get - это отформатированная в json коллекция записей. Эта коллекция получает декодирование, и для каждого типа столбца создается соответствующая ячейка и добавляется в документ страницы. Основной бит всего этого:
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);
Метод AddCell() определяет тип ввода, который следует использовать (флажок, текст и т. Д.).
Редактировать 2> Дополнительные изображения
Для дальнейшего объяснения происходящего:
Изображения показывают разницу в отображении таблицы на заднем плане и способ отображения диалога на переднем плане.
Редактировать 3> Проверка DOM
Я проверил структуру DOM в Internet Explorer и увидел, что элементы помещаются на страницу ... Они просто не отображаются. Кажется, что они не получают соответствующую высоту и ширину. Несмотря на проверку их стиля, он показывает, что для этих атрибутов установлено значение 'auto':
