UpdateProgress not working with AssociatedUpdatePanelID - asp.net

I cannot get the update progress to work at all, here is my code:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="updProgress" AssociatedUpdatePanelID="myUpdatePanel" runat="server">
<ProgressTemplate>
<div class=".uk-icon-spin"></div> Processing...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="myUpdatePanel">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Create Instance" />
</ContentTemplate>
</asp:UpdatePanel>
Does anyone know what could be causing it? Thanks

Related

Confusion about UpdatePanel Loading image

I am trying to learn how to use UpdatePanel And this is my code.The problem is everything is ok but I cant see Loading.gif image .when code excatues Its wisible aspx page .What am i missing out here
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="load.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
You should have trigger in UpdatePanel like this:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
Try to use asp:Image:
<ProgressTemplate>
<asp:Image ID="loader" runat="server" ImageUrl="~/img/loader.gif" />
</ProgressTemplate>

UpdatePanel doesnt work with script manager. There is a postback happening for the code below. How do I do Ajax behavior?

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Repeater ID="rpChat" runat="server" OnItemDataBound="rpChat_ItemDataBound" OnItemCommand="rpChat_ItemCommand">
<ItemTemplate>
<div id="divChatWindow" title='<%# Eval("username") %>' runat="server" class="clChatWindow">
<div>
<asp:Label runat="server" Text='<%# Eval("username") %>' class="divHeader"></asp:Label>
<img src="../../Menu/close.jpg" onclick="HideDiv(this)" style="float: right; width: 20px;
height: 20px;" /></div>
<div class="chatText">
<asp:Repeater ID="rpChatMessages" runat="server">
<ItemTemplate>
<asp:Image ID="imageForFriend" runat="server" CssClass="clFriendsImage" ImageUrl='<%# "HttpImageHandler.jpg?username=" + DataBinder.Eval(Container.DataItem,"fromusername").ToString() %>' />
<asp:Label ID="chatMessage" runat="server" Text='<%# Eval("Message") %>'></asp:Label>
<br>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:TextBox ID="txtChatMessage" runat="server" Width="115px"></asp:TextBox>
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("username") %>'>Send</asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
I have edited the code... Now what should I do? I have the linkbutton inside contenttemplate. Still a postback is happening
Any postback coming from any control outside an UpdatePanel will trigger a full postback unless you add those events as triggers of your UpdatePanel
In your example,
<asp:LinkButton ID="btnSendChat" runat="server" CommandName="Insert" CommandArgument='<%# Eval("Username2") %>'>Send</asp:LinkButton>
It's outside of the UpdatePanel and since you do not have triggers in your panel that will always cause a full postback
Solutions:
Approach 1
Place the LinkButton inside the UpdatePanel.ContentTemplate
Approach 2
Add triggers to your UpdatePanel
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSendChat" EventName="Click" />
</Triggers>

modal popup extender not showing panel on button click

I'm trying to use a modal popup extender on my page so when I click a button, it must show a panel. Here is what I have:
<asp:UpdatePanel runat="server" ID="updPanel">
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender ID="mpeEmailComplete" runat="server" TargetControlID="btnTesting"
PopupControlID="pnl" OkControlID="btnOk"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnl" runat="server" style="display:none;">
<asp:UpdatePanel ID="udp" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">
<asp:Label runat="server" ID="lblTest" Text="Testing testing testing"></asp:Label>
<asp:Button runat="server" ID="btnOk" Text="OK" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="btnTesting" Text="Testing"/>
</ContentTemplate>
</asp:UpdatePanel>
but i can't get the panel to popup when the button is clicked. Anybody know why?
Your innermost panel has Visible=false.
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false"> *(change here)*
So, when you press the TESTING button, the ModalPopupExtender correctly causes the outer panel to display, but it's displaying an invisible inner panel, hence you see nothing on screen.
<asp:Panel ID="pnl" runat="server" style="display:none;"> *(this is ok)*
To fix, just yank the Visible=false from the outer panel (pnlEmailComplete)
Hope that helps!
Do you have any JavaScript errors and is pnl.Visible=False; set on the server-side anywhere?
Make sure you have the AjaxControlToolkit referenced properly, NuGet is the easiest way to add the reference.
http://nuget.org/packages/ajaxcontroltoolkit
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Modalpopup with UpdatePanel

I have an autocompleteextender that displays the list of countries. In the same textbox, when I type something and click on "Search" button, a pop-up should be opened and should display the matching countries. I am using modalpopupextender for the popup.
aspx code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:TextBox id="TextBox1" runat="server" Width="250px"></asp:TextBox>
<asp:ImageButton id="ImageButton1" onclick="imgBtnSearch_Click" runat="server" ImageUrl="~/Images/Lab/search.jpg"></asp:ImageButton>
<cc1:AutoCompleteExtender id="TextBox1_AutoCompleteExtender" runat="server" EnableCaching="true" CompletionSetCount="10" MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" UseContextKey="True" TargetControlID="TextBox1" ServiceMethod="GetCountryInfo">
</cc1:AutoCompleteExtender>
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="updatePanel2" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
</contenttemplate>
</asp:UpdatePanel>
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
And in my codebehind:
protected void imgBtnSearch_Click(object sender, ImageClickEventArgs e)
{
LoadCountryPopUp();
ModalPopupExtender1.Show();
}
I am not getting any countries in my popup, although I get results via my autocompleteextender. On clicking the imagebutton, I get the popup without any content. Pls help!
Place your popup contents inside panel like this:
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel id="pnlPopup" runat="server">
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
and replace UpdatePanel's controls Id with this Panel's id:
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="pnlPopup" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
and check if it works?
Try putting the extenders outside of the update panel, it should not be a child of what it is extending

Updateprogress not working with PostBackTrigger-ASP.NET

hi I'm having a problem with "Updateprogress" in ASP.NET . If i set the PostBackTrigger the progress loading image is not displayed but if i exclude the PostBackTrigger it's working. The code is as follows :
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="Submit" />
</Triggers>
<ContentTemplate>
<asp:FileUpload runat="server" ID="Up"></asp:FileUpload>
<asp:Button runat="server" Text="Upload" ID="Submit" OnClick="Submit_Click" CausesValidation="false" />
<asp:UpdateProgress ID="upd" runat="server">
<ProgressTemplate>
<img alt="Checking Status" src="ajax-loader(2).gif" />
<%--<asp:Image runat="server" ImageUrl="~/ajax-loader(2).gif" ID="img" />--%>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

Resources