Update updatepanel from within a ajax modalpopup - asp.net

I have a aspx page with a ajax modalpopup control in it. I need to update the contents inside an updatepanel on the page(not inside modalpopup) when I do a button click inside the modalpopup.
So I can display the changes inside the updatepanel without a full page refresh. I already tried using the UpdatePanel.Update() method inside the code behind of the button click event. But it does nothing.
What I'm doing right now is make a full page refresh inside the button click event.
there anyway that I can update the update panel to display the changes?
Update: Here is the code snippet in the related aspx page.
<div style="width: 400px; height: 200px; float: right;">
<br />
<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateModel="Conditional">
<ContentTemplate>
<asp:Label ID="lblDate" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnGetSelectedDate" />
</Triggers>
</asp:UpdatePanel>
</div>
<ajaxToolkit:ModalPopupExtender ID="mpeUpcomingDaysOff" runat="server" PopupControlID="panelUpcomingDaysOff" BackgroundCssClass="modalBackground" DropShadow="true" Enabled="True" TargetControlID="btnChangeUpcomingDaysoff" OkControlID="btnGetSelectedDate" CancelControlID="btnUpcomingDaysOffCancel" OnOkScript="window.top.location.reload();">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="panelUpcomingDaysOff" runat="server" Height="400" Width="700" BackColor="White" Style="border-radius: 5px">
<div style="height: 50px; width: 700px; padding-left: 100px; font-family: Verdana; padding-top: 5px">
<div>
<span style="font-weight: bold">Upcoming Daysoff for
<asp:Label ID="lblProviderNameDaysOff" runat="server"></asp:Label></span><br />
<span style="font-size: 12px">Select vacation and any other days when this service provider will not be available for online appointments.</span>
</div>
<div style="height: 300px; padding-left: 150px">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black"
Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" OnPreRender="Calendar1_PreRender" Width="330px"
OnSelectionChanged="Calendar1_SelectionChanged" OnLoad="Calendar1_Load" BorderStyle="Solid" CellSpacing="1" NextPrevFormat="ShortMonth">
<DayHeaderStyle Font-Bold="True"
Height="8pt" Font-Size="8pt" ForeColor="#333333" />
<DayStyle BackColor="#CCCCCC"></DayStyle>
<NextPrevStyle Font-Size="8pt" ForeColor="White" Font-Bold="True" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TitleStyle BackColor="#333399" Font-Bold="True"
Font-Size="12pt" ForeColor="White" BorderStyle="Solid" Height="12pt" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
<br />
<asp:Button ID="btnGetSelectedDate" runat="server" Text="OK" OnClick="btnGetSelectedDate_Click" />
<asp:Button ID="btnUpcomingDaysOffCancel" runat="server" Text="Cancel" />
</ContentTemplate>
</asp:UpdatePanel>
</div>

In your update panel you wish to update you need to declare the button of your modal div as async postback trigger.
<asp:UpdatePanel ID="upPanel" runat="server" UpdateModel="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Id_Of_Button_In_ModalDiv" />
</Triggers>
<ContentTemplate>
....
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind though that your modal div should not be part of the update panel. If it is, it will disappear after call back as everything within the ContentTemplate will be replaced with content from server.

Related

AJAX UpdateProgress does not show

I have an update panel that includes a gridview with two buttons and a modal popup. When the user clicks btnView, the modal popup appears displaying the relevant information.
My issue is that I have been trying to get the updateprogress to appear during the partial postback and so far have not managed it. I should mention that the same UpdateProgress code does work in a test page that just comprises of a button with a sleep function in the code behind. Here is the html:
<!-- Placing the GridView in UpdatePanel-->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gv" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
BorderWidth="1px" CellPadding="2" ForeColor="Black" OnRowDataBound="gv_RowDataBound" BorderStyle="Double" HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat">
<AlternatingRowStyle BackColor="#95B9B9" />
<HeaderStyle BorderStyle="Double" BorderColor="Black"/>
<Columns>
<asp:BoundField DataField="FinancialYear" HeaderText="Financial Year" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnView" runat="server" Text="view" OnClick="btnComments_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-info" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Comment</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Details</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
<br />
<asp:Panel ID="pnlComment" runat="server" Width="650px" Height="620px" Style="display: none;" CssClass="modalBox">
<table border="1" class="commentTable" style="border-collapse: separate; border-spacing: 10px; width:100%; height:100%">
<tr><th><asp:Label ID="lblComments" runat="server" Text="Comments" Font-Size="Medium"></asp:Label></th></tr>
<tr><td>
<asp:TextBox ID="txtExistingComments" runat="server" TextMode="MultiLine" ReadOnly="True" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox>
</td></tr>
<tr><th><asp:Label ID="lblNewComment" runat="server" Text="Add Comment" Font-Size="Medium"></asp:Label></th></tr>
<tr><td>
<asp:TextBox ID="txtNewComments" runat="server" TextMode="MultiLine" ReadOnly="False" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox></td></tr>
<tr><td>
<asp:Button ID="btnSave" runat="server" width="100px" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-comment" ValidationGroup="SaveComment" ForeColor="White" Font-Bold="True" />
<asp:Button ID="btnCancel" runat="server" width="100px" Text="Cancel" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True"/></td></tr>
<tr>
<td>
<asp:RequiredFieldValidator ID="rfValidator" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="txtNewComments"
ForeColor="Black" ValidationGroup="SaveComment" Font-Bold="True">You must enter a comment!</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
<cc1:ModalPopupExtender ID="modal" runat="server" TargetControlID="bttnHidden" PopupControlID="pnlComment" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
<br />
<asp:HiddenField ID="Hidden" runat="server" value="-1"/>
<asp:HiddenField ID="bStatus" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional" DisplayAfter="10">
<ProgressTemplate>
<div class="center">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/Images/loader.gif" AlternateText="Please wait ..." ToolTip="Please wait ..." />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
Any help would be most appreciated!
two points you need to check.
First if you have any javascript errors - this Update Progress is base on javascrip, so any javascript error can stop the function of it. Open the console panel and check for javascript errors...
The second point is to check the DisplayAfter property on UpdateProgress, that is 500 milliseconds default value. If anything happens within this time, the UpdateProgress is not show. So add a lower value on DisplayAfter to check it out.

Button in Gridview showing UpdateProgress on Click

I have a gridview that has many columns within an UpdatePanel, 2 of those columns that are populated with buttons. There is a "Update" button outside of the gridview. When the user clicks "Update", there is a UpdateProgress div that shows up, which is expected. However, when the buttons in the gridview are clicked, it also shows up, which is not what I am intending. How can I exclude these buttons from the UpdateProgress if the gridview itself is in the UpdatePanel? I've tried ChildrenAsTriggers=False and UpdateMode=Conditional but doesn't help. See code being used below.
<asp:UpdateProgress id="UpdateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Updating PO, please wait ..." ToolTip="Updating PO, please wait ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click"/>
</Triggers>
<ContentTemplate>
<!-- Gridview is here -->
</ContentTemplate>
</asp:UpdatePanel>
Example of what's in the gridview:
<asp:TemplateField HeaderText="Button Column One">
<HeaderStyle Width="70px" />
<ItemStyle Wrap="False" HorizontalAlign="Center" Width="70px" />
<ItemTemplate>
<asp:Button ID="btnG" runat="server" OnCommand="btnG_Command" Text="View"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="False" HeaderText="Drug Details">
<ItemTemplate>
<asp:Button ID="btnA" runat="server" OnCommand="btnA_Command" Text="View" />
</ItemTemplate>
<HeaderStyle Width="60px" HorizontalAlign="Center" />
<ItemStyle Width="60px" HorizontalAlign="Center" />
</asp:TemplateField>
Put your Gridview in a separate update panel and specify AssociatedUpdatePanelID field for UpdateProgress control.
<asp:UpdateProgress id="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanelForButton">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Updating PO, please wait ..." ToolTip="Updating PO, please wait ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanelForButton" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click"/>
</Triggers>
<ContentTemplate>
<!--Button goes here-->
</ContentTemplate>
</asp:UpdatePanel>

Button not firing inside Accordion Panes inside which is inside Update Panel

I am customizing one website but , while using triggers in update panel the click event is not firing.
SOURCE CODE:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
Also see the Content Template
<ContentTemplate>
<table width="100%">
<tr>
<td>
<cc1:accordion id="Accordion1" runat="server" headercssclass="headeraccordian">
<panes>
<cc1:accordionpane ID="AccordionPane1" runat="server">
<header>
<a href="#">
<asp:Label ID="dailyreport" CssClass="lbl" runat="server" Text="Daily Report"></asp:Label></a>
</header>
<content>
<div>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="True" Width="94px"></asp:TextBox>
<asp:Button ID="btnCal" runat="server" Text="Select Date" OnClick="btnCal_Click" />
<asp:Button ID="btnDownLoads" runat="server" Text="Download" OnClick="btnDownLoads_Click" />
<asp:Calendar ID="cal" runat="server" OnSelectionChanged="cal_SelectionChanged" BackColor="White"
BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black"
Height="190px" NextPrevFormat="FullMonth" Width="350px">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True"
Font-Size="12pt" ForeColor="#333399" />
</asp:Calendar>
</div>
</content>
</cc1:accordionpane>
</panes>
</cc1:accordion>
</td>
</tr>
</table> </ContentTemplate>
Also see the triggers
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDownLoads" EventName="Click"/>
</Triggers></asp:UpdatePanel>
Do let me know why it is not happening
Remove triggers. It will start working fine.
If the button is in the header section you should put:
SuppressHeaderPostbacks="False"
In the AccordionPane.
That worked for me.

why Telerik control won't work within update panel when trigger is set on "selection_changed" event of asp Calendar control?

I am using Telerik's radial linear gauge control under asp update panel in my ASP page.
and its trigger is set on calendar's selection changed event.
Selection changed event is fired and executed successfully, but after that it throws error as "Microsoft JScriptruntime error: Arg: Fraction out of range(0 to 1 allowed).
Unfortunately I can not post image as this is my first post.
my Home.aspx code for both controls is as follows:
<td>
<asp:UpdatePanel ID="updtPanelCalendar" runat="server" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="calActivityEvent" runat="server" BackColor="White" BorderColor="Black"
BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black"
Height="250px" NextPrevFormat="ShortMonth" Width="330px" Style="margin-left: 20px">
<SelectedDayStyle BackColor="#0066ff" ForeColor="BlueViolet" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" />
<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt"
ForeColor="White" Height="12pt" />
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td colspan="2">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="placeHolder" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="calActivityEvent" EventName="SelectionChanged" />
</Triggers>
</asp:UpdatePanel>
</td>
and i have created and placed Telerik control at calendar's event.
It works fine before using update panel. But not works in the Update panel.
Why this happens?

Losing Button.Click events after first partial postback in UpdatePanel

I have a Page that has a single instance of a UserControl that itself has a single UpdatePanel. Inside the UpdatePanel are several Button controls. The Click event for these controls are wired up in the code-behind, in the Init event of the UserControl.
I get the Click event for the first button I push, every time, no problem. After that, I only get Click events for one button (SearchButton) - the rest are ignored. I have included the code for the control below - for sake of brevity, I have excluded the click event handler methods, but they are all of the standard "void Button_Click(object sender, EventArgs e)" variety. Any ideas?
<asp:UpdatePanel ID="PickerUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Container" runat="server">
<div>
<asp:TextBox ID="PickerResults" runat="server" style="margin-right: 3px;" SkinID="Plain" />
<asp:Image
ID="LaunchPopup" runat="server" ImageUrl="~/images/icons/user_manage.png"
ImageAlign="Top" BorderColor="#294254" BorderStyle="Dotted" BorderWidth="1px"
Height="20px" Width="20px" style="cursor: pointer;" />
</div>
<asp:Panel ID="PickerPanel" runat="server" DefaultButton="OKButton" CssClass="popupDialog" style="height: 227px; width: 400px; padding: 5px; display: none;">
<asp:Panel runat="server" id="ContactPickerSearchParams" style="margin-bottom: 3px;" DefaultButton="SearchButton">
Search: <asp:TextBox ID="SearchTerms" runat="server" style="margin-right: 3px;" Width="266px" SkinID="Plain" />
<asp:Button ID="SearchButton" runat="server" Text="Go" Width="60px" SkinID="Plain" />
</asp:Panel>
<asp:ListBox ID="SearchResults" runat="server" Height="150px" Width="100%" SelectionMode="Multiple" style="margin-bottom: 3px;" />
<asp:Button ID="AddButton" runat="server" Text="Add >>" style="margin-right: 3px;" Width="60px" SkinID="Plain" />
<asp:TextBox ID="ChosenPeople" runat="server" Width="325px" SkinID="Plain" />
<div style="float: left;">
<asp:Button ID="AddNewContact" runat="server" SkinID="Plain" Width="150px" Text="New Contact" />
</div>
<div style="text-align: right;">
<asp:Button ID="OKButton" runat="server" Text="Ok" SkinID="Plain" Width="100px" />
</div>
<input id="SelectedContacts" runat="server" visible="false" />
</asp:Panel>
<ajax:PopupControlExtender ID="PickerPopEx" runat="server" PopupControlID="PickerPanel" TargetControlID="LaunchPopup" Position="Bottom" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AddButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AddNewContact" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
public partial class ContactPicker : System.Web.UI.UserControl
{
protected void Page_Init(object sender, EventArgs e)
{
SearchButton.Click += new EventHandler(SearchButton_Click);
AddButton.Click += new EventHandler(AddButton_Click);
OKButton.Click += new EventHandler(OKButton_Click);
}
// Other code left out
}
It seems that adding UseSubmitBehavior="false" to the button definitions has solved my problem. Still don't know why that first button click worked at all.
The most likely reason for this would be the client IDs that .Net generates for its controls changing. These are dynamically assigned and could change between postbacks / partial postbacks.
If controls are being added to the panel dynamically, the ID of your button could be different between postbacks causing .Net to be unable to tie the click event to the correct event handler in your code.
In my case, i had a LinkButton within a dgPatients_ItemDataBound event handler that used the PostBackUrl property.
The moment i changed the LinkButton to a HyperLink, the problem went away.

Resources