Загрузка файлов не работает в диалоговом окне пользовательского интерфейса jQuery

Question

Итак, у меня есть довольно странная проблема, которую я хотел увидеть, если кто-то имеет представление.

У меня есть страница, на которой я показываю сетку файлов, которые были загружены на наш сервер. Панель инструментов для сетки дает им возможность загружать больше файлов. Когда они нажимают кнопку «Добавить файл» на панели инструментов, появляется модальное окно jQuery UI Dialog с простым управлением загрузкой файлов. После того, как они выбирают файл, они нажимают кнопку «Загрузить» в диалоговом окне, который представляет базовую форму для загрузки. Также обратите внимание, что, поскольку я использую asp.net, на странице есть только одна форма, поэтому я не представляю неправильную форму.

Теперь ... когда я пытаюсь найти загруженные файлы на бэкэнд, файлы не загружаются. Хуже того, если я перемещу элемент управления загрузкой из диалогового окна div и использую его прямо со страницы без диалога, загрузка будет работать нормально.

Это приводит меня к мысли, что хотя я определяю div, который станет моим диалогом в основной форме, чтобы позволить ему отправить с помощью обратной передачи, jQuery каким-то образом перемещает его или отделяет его от формы.

Возможно ли это? Или есть что-то еще, что я могу потерять? Кажется, я не могу найти документацию, которая говорит в любом случае. Заранее спасибо!

Answer 1

Вы правы. Диалог перемещает его содержимое за пределы его формы и присоединяет его к телу. Вероятно, чтобы лучше контролировать DOM, чтобы он всегда отображался в центре, над всем остальным и не содержался в каком-то абсолютно позиционированном DIV или так ...

Answer 2

Что здесь происходит, так это то, что интерфейс блока удаляет все функции щелчка на кнопках в пределах своего модального. Чтобы обойти это, лучшим решением, которое я нашел, является наличие скрытой кнопки, которая затем выполнит требуемую обработку.

Вот пример:

HTML

<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" /> 
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" /> 

Javascript/Jquery

function UploadFiles() 
{ 
    $.unblockUI({ 
     onUnblock: function() { 
      $('[id$=btn_UploadClick]').click(); 
     } 
    }); 
} 

Answer 3

Вы должны переместить диалог внутри формы.

var dialog = $("#dialog").dialog({ 
 
    autoOpen: false, 
 
    height: 300, 
 
    width: 350, 
 
    modal: true, 
 
    buttons: { 
 
    "Upload": function() { 
 
     __doPostBack('uploadfile', ''); 
 
     $(this).dialog("close"); 
 
    }, 
 
    Cancel: function() { 
 
     $(this).dialog("close"); 
 
    } 
 
    } 
 
}); 
 

 
dialog.parent().appendTo($("form:first"));