Jquery dialog stop closing when error occured?

Question

I am using the jQuery Dialog in ASP.NET. I have it working fine with the exception of when I click the OK button in the dialog and if an error occurred I want to show the error in the label. By the time the dialog closing event is fired it is too late. How do I still show the dialog if an error has occurred. I don't want to close the dialog when there is an error.

   //setup edit person dialog
     $('#uploadPic').dialog({
             autoOpen: false,
             modal: true,
             height: 375,
             width: 400,    
             draggable: true,
             title: "Upload Picture",
             open: function(type, data) {
                 $(this).parent().appendTo("form");
             }
         });
     }

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeDialog(id) {
        $('#' + id).dialog("close");
    }

  <input type=button value="Change Image" onclick="javascript:showDialog('uploadPic')" />



<div id='uploadPic'>     
     <asp:FileUpload ID="InputFile"   runat="server" class="ms-fileinput" 
        size="35" />   
     <asp:Button Id="btnOK" runat="server"  Width="70px" Text="<%
    $Resources:wss,multipages_okbutton_text%>" OnClick="btnOK_Click" />
      <asp:Button Id="btnCancel" runat="server" Width="70px"
      CausesValidation="false" Text="Cancel" 
OnClientClick="javascript:closeDialog('uploadPic')" />
            </div>

In code behind I am not calling any JQuery methods.

Answer 1

The problem is that you are uploading a file from the browser window using a standard POST method on your form - which will cause the browser to navigate to a new page.

You can use a variety of techniques to allow the browser to upload the file without forcing page navigation to happen. I would recommend looking at a library like Plupload to handle the upload. Check out their demo:

http://plupload.com/example_queuewidget.php