Using Ajax with modal popup

[Matthew Schneider]

After much searching I cannot find an answer to the following issue.  I have the following in my .aspx file:

      <asp:Button ID="cmdDisplayPopup" runat="server" style="display:none"/>
      <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
        TargetControlID="cmdDisplayPopup" PopupControlID="pnlModal"
        DropShadow="True"></cc1:ModalPopupExtender>
      <asp:Panel ID="pnlModal" runat="server"
            BackColor="LightGray" Height="150px" Width="550px" style="display:none" CssClass="modalPopup">
            <div align="center">
                Some inputs
            </div>
            <div align="center">
                <asp:Button ID="cmdOK" runat="server" Text="OK" />
                <asp:Button ID="cmdCancel" runat="server" Text="Cancel" />
            </div>
            <div align="center">
                <br /><asp:Label ID="lblError" runat="server" CssClass="red"></asp:Label>
            </div>
      </asp:Panel>

To get the modal to display initially, I have the following js:

      function DisplayModal() {
         var btn = document.getElementById("cmdDisplayPopup");
         btn.click()
         }

In a Radgrid on the parent page, I have icons that have onclick("DisplayModal()").  Clicking the icon causes the modal popup to display as expected.  Everything is fine to this point.  There are some input fields on the page.  When the user clicks OK, these fields are used to do some processing and if there is an error, I need to redisplay the popup with the error message.  I can do this, but I get a page refresh.  The popup disappears and reappears during a postback. 

Paraphrased, the codebehind is:

     Protected Sub cmdOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdOK.Click
        Execute some code here....
        If ERROR Then
            lblError.Text = ERROR MESSAGE TEXT
            ModalPopupExtender1.Show()
        End If
     End Sub

I have done much searching and made several attempts to Ajaxify this popup and have not been successful.  I would think the following would work:

                <telerik:AjaxSetting AjaxControlID="cmdDisplayPopup">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlModal"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>

But when I click the icon that fires the modal popup, it displays for an instant and then disappears.  Any help would be appreciated.  Thanks.

[Matthew Schneider]

No need to look that this.  I determined how to make this work correctly.  I had to make a few adjustments, but the most important thing was getting the Ajax settings correct.  I found I was specifying the wrong control ID and update control.  It should have been:

                <telerik:AjaxSetting AjaxControlID="cmdOK">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="lblError"/>
                        <telerik:AjaxUpdatedControl ControlID="RadEditor1"/>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>

Then to get the main page to update after hiding the modal popup from my code behind, I had to include the rest of the controls that I updated while processing the information in the modal popup.