Add ASP.NET Element to JQuery Dialog dynamically

Question

I am placing some ASP.NET html elements(that upload a file) inside a JQuery Dialog.

My Problem: When I click the button to upload the file, nothing happens. I create the query dialog dynamically AFTER the page has loaded. My solution is to place the HTML/ASP elements(for uploading a file) in a div at the bottom of the body of the page & set its display to none.

Then upon opening the dialog, I move the HTML/ASP elements into the JQuery dialog. But my problem is that when I click my ASP.NET button to upload the file from within the dialog, nothing happens?

Note if I click the button whilst its outside the JQuery dialog is sucessfully uploads the file.

Whats going wrong & how do I fix this? Is there an easier way to add ASP.NET code to a JQuery dialog AFTER the page has loaded?

This sits in the body

<div id="test">
    <input class="ui-button ui-widget ui-state-default ui-corner-all 
       ui-button-text-only" 
      style="display: inline-block;" id="fileUpload" type="file" Runat="server" 
       NAME="fileUpload"/>

    <asp:button id="btnSave" OnClick="bt1Clicked" style="display: inline;" 
      class="ui-button ui-widget ui-state-default ui-corner-all 
                                                 ui-button-text-only" 
      runat="server" Text="Upload File" ></asp:button>

    <asp:label id="lblMessage" runat="server" style="height:20px;width:390px;"
    </asp:label> 
</div>

Then on dialog open I grab the above HTML & move it into the dialog:

$(this.dialog).dialog('open' function()
{
   var e = $("#test");
   $(body).remove(e);
   $(this).append(e);
});

Do your jquery dialog shows up but the file upload doesn't happen? Do you have any errors in your browser? — gideon, Mar 05 '12 at 06:14
remove takes a selector not an object. You could just do `e.remove();` then the append. http://api.jquery.com/remove/ This also sounds like a frequently seen issue answered here: http://stackoverflow.com/a/768163/701062 — Gary.S, Mar 05 '12 at 06:21

score 1 · Accepted Answer · answered Mar 05 '12 at 06:23

jQuery UI dialog creates the dialog elements at the very end of the document, right before the closing </body> element. So when you open your dialog and move your content div#test into the dialog, it is outside the <form> and does not work anymore with asp.net which requires it.

Try to create your dialog and move it back inside the <form> element:

$("#myDialog").dialog({
    ...
}).parent().appendTo($("form"));

Add ASP.NET Element to JQuery Dialog dynamically

1 Answers1