File upload does not work in jQuery UI dialog

Question

So, I have a rather strange problem, and I would like to know if anyone has an understanding.

I have a page on which I show a grid of files that have been uploaded to our server. The grid toolbar gives them the ability to upload more files. When they click the "Add File" button on the toolbar, a jQuery UI Dialog modal window appears with simple file upload control. After they select the file, they click the "Download" button in the dialog box that presents the basic form for downloading. Also note that since I am using asp.net, there is only one form per page, so I am not presenting an irregular form.

Now ... when I try to find the downloaded files on the server, the files are not loading. What's worse, if I move the load control from a dialog div and use it directly from a page without a dialog, loading works fine.

This makes me think that although I am defining a div that will become my dialog in the main form to allow it to obey with postback, jQuery somehow moves it or separates it from the form.

Is it possible? Or is there something else I can lose? I can't seem to find documentation that says anyway. Thanks in advance!

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

You need to move the dialog inside the form.

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"));

Run codeHide result