Ajax ModalPopup panel just shows at bottom of the page

[mbruyns]

i have been trying (and sometimes succeeding) to use the modalpopupexten der to show various panels of controls on my asp pages. the strange problem that i keep on running into is that sometimes it works, displaying an awesome popup, while other times, it doesn't show a popup at all, but rather just page posts back and the panel becomes visible at the bottom of the page (where it is situated in the designer). what is even stranger to me is that in some instances, the popup works but a few days later i'll come back to find that it has stopped working.

i've been scouring forums, but have found no one who has had this same problem. one post mentioned control validators and on one of the pages where it stopped working after having previously worked, the only thing that i could see as having changed was that control validators were added. i commented out the validators though, and the problem persisted. i also use validators on all my pages, and on some pages, the popup works despite the validators.

in most cases, the panels, how they are called and their content are exactly the same from one page to the next. this is another strange factor: i've literally copied and pasted code from one page to another and it works on the first page, but not on the next. but then it will work on another one i paste the code onto.
this is a brief synopsis of how i've used the popups:

• • pages (which use a master page) have multiple panels and popup extenders
• • controls are inside an update panel, which on a panel, which is then on another panel (this was a suggestion i found when earlier trying to use update panels with the popup)
• • targetid of the mpe is set to a "dummy" button with style="display: none;"
• • .show() method of the extender is then called from the server side click event of a linkbutton (needed to do it like this because the linkbutton is inside a formview, and therefore cannot be directly used as a string name for the targetid...or can it?? at any rate, i didn't know how so i did it by adding an event handler to the linkbutton when the formview changes mode)

the popup shows modal when i show the "dummy" button and then click on that, but then when i close the popup, it displays at the bottom again, and that won't close when i click on the close button.

does anyone have any clues?? please help!!


Below are some code snippets that i thought were relevant. I don't mind posting everything, but it might be a bit of a monster post.
This is one of the pages that had worked before, but now doesn't seem to work anymore...

ASPX PAGE:

<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Forms/Site.Master"
    Codebehind="EventDetailEditForm.aspx.vb" Inherits="UberDB.Web.EventDetailEditForm"
    Title="Untitled Page" %> 
 <%@ Register Assembly="Validators" Namespace="Sample.Web.UI.Compatibility" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
...various other controls, some of which have control validators on them - i've changed these now to the "ajax friendly" validators, but it still doesn't work :(
 
<asp:GridView ID="CalendarEventRemindersGridView" runat="server" AutoGenerateColumns="False"
                                CellPadding="4" ForeColor="#8E9275" GridLines="None" Width="100%" UseAccessibleHeader="true">
                                <FooterStyle BackColor="#DDEB93" Font-Bold="True" ForeColor="#669900" />
                                <Columns>
                                  ...various other collumns, but the one that is important for the panel is this "edit" one: it displays an image button that gets clicked on to show the popup 
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="EditReminderImageButton" runat="server" ImageUrl="~/Images/Edit.png"
                                                Height="20" Width="20" CommandName="Edit" CommandArgument='<%#GetReminderId(GetDataItem())%>'
                                                Visible='<%#GetReminderEditVisible(GetDataItem())%>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                                <RowStyle BackColor="#DDEB93" />
                                <EditRowStyle BackColor="#2461BF" />
                                <SelectedRowStyle BackColor="#669900" Font-Bold="True" ForeColor="#333333" />
                                <PagerStyle BackColor="#DDEB93" ForeColor="669900" HorizontalAlign="Center" />
                                <HeaderStyle CssClass="GridStaticHeader" BackColor="#DDEB93" Font-Bold="True" ForeColor="#669900"
                                    HorizontalAlign="Left" />
                                <AlternatingRowStyle BackColor="#EBF3BE" />
                                <EmptyDataTemplate>
                                    There are no reminders for this event.
                                </EmptyDataTemplate>
                            </asp:GridView> 
 
<asp:Button ID="ModalPopupDummyButton" Text="dummy button" runat="server" />
    <asp:Panel ID="Panel1" runat="server" Height="200px" Width="792px">
        <asp:Panel ID="EditReminderPanel" runat="server" Height="112px" Width="728px" BackColor="#DDEB93"
            BorderColor="#DDEB93" BorderStyle="Solid" BorderWidth="10px" Font-Bold="False">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
 
                   ...various controls... (NO validators on any of these controls)
 
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
            <asp:Button ID="EditReminderButton" runat="server" Text="Save" />
            <asp:Button ID="CancelEditButton" runat="server" Text="Cancel" />
        </asp:Panel>
        &nbsp;
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID="EditReminderModalPopupExtender" TargetControlID="ModalPopupDummyButton"
        runat="server" PopupControlID="EditReminderPanel" BackgroundCssClass="modalPopupBackground"
        DropShadow="true">
    </ajaxToolkit:ModalPopupExtender> 
 

Then in the CODE BEHIND:

 Private Sub CalendarEventRemindersGridView_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles CalendarEventRemindersGridView.RowCommand
        If e.CommandName = "Edit" Then
            Dim calendarEventReminder As New BusinessObjects.CalendarEventReminder
            calendarEventReminder = BusinessObjects.CalendarEventReminder.Load(CInt(e.CommandArgument))
 
            'set sessionstate to store id for saving edited info
            Session.Add("CalendarEventReminderId", calendarEventReminder.EventReminderId)
 
            'populate and show the relevant edit reminder popup
            PopulateEditReminderPopup(calendarEventReminder)
        End If
    End Sub
     Private Sub EditReminderButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles EditReminderButton.Click
 
        'determine which radio button is checked in order to correctly populate the reminder object
        If EditRadioButton.Checked = True Then
            PopulateCalendarEventReminder(EventReminderTypeEditDropDownList, PersonTypeEditDropDownList, PersonEditDropDownList, ReminderEditDropDownList)
        ElseIf Edit2RadioButton.Checked = True Then
            PopulateCalendarEventReminder(EventReminderTypeEdit2DropDownList, PersonTypeEdit2DropDownList, PersonEdit2DropDownList, Nothing)
        End If
 
        'perform page validation
        If Page.IsValid Then
 
            'save reminder
            If mCalendarEventReminder.IsValid Then
                mCalendarEventReminder.IsDeleted = 0
                mCalendarEventReminder.UpdateDate = Now
                mCalendarEventReminder.Save()
            End If
 
            'dispose of session variable holding id of reminder being edited
            Session.Remove("CalendarEventReminderId")
 
            EditReminderModalPopupExtender.Hide()
            LoadRemindersGridView()
        End If
 
    End Sub
 
    Private Sub CancelEditButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CancelEditButton.Click
        EditReminderModalPopupExtender.Hide()
 
        'dispose of session variable holding id of reminder being edited
        Session.Remove("CalendarEventReminderId")
    End Sub
 

There are also some methods for populating the controls on the panel, and enabling and disabling them depending on selection of a radio button also on that panel.

I'd be really keen to find a solution - switching over to the popups was a drastic solution to problems i was having with another "popup" style window, and now its turning out to be just as problematic!!

[acoder]

Welcome to TSDN!

Although it's an AJAX ModalPopup, you'll probably get more help with your problem in the .NET forum to which I've moved this thread (moved from JavaScript/AJAX forum).