I am working on a webpage that displays online users in a TabPanel, and I want to have it update every X amount of seconds. This part works; however, all of the other tabs in the TabContainer will update too, which I do not want. Here is the code for the online user tab
<cc1:TabPanel runat="server" HeaderText="Online Users" ID="TabPanel1">
<ContentTemplate>
<div>
<div style="position:relative; text-align:left; width:650px; top: 0px; left: 0px;">
<asp:Label ID="lblUpdate" runat="server" Text="This page refreshed automatically every 10 seconds, or press the update button to the right"></asp:Label>
</div>
</div>
<asp:Timer runat="server" ID="timer1" Interval="10000"></asp:Timer>
<asp:Timer runat="server" ID="timer2" Interval="9000"></asp:Timer>
<asp:UpdatePanel runat="server" ID="updateOnlineUsers" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" />
<asp:AsyncPostBackTrigger ControlID="timer2" />
</Triggers>
<ContentTemplate>
<div style="text-align:right; position:relative; top:-20px">
<asp:Image style="position:relative; display:none; z-index:1" ID="Image1" runat="server" ImageUrl="../images/reload.gif" />
<asp:ImageButton ID="ImageButton1" style="position:relative; z-index:2" runat="server" ImageUrl="../images/reload5.png" />
</div>
<div>
<asp:Label ID="lbluserCount" runat="server"></asp:Label>
</div>
<div>
<asp:Label ID="lblOfflineUsers" runat="server"></asp:Label>
</div>
<div>
<asp:Label runat="server" ID="lblOnlineUsers">Hi Everybody</asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
Thanks in advance!
Move timers out of TabPanel. Possibly you'll need to register timers as AsyncPostbackTriggers manually from code-behind after that.
Related
I have an update panel with UpdateMode set to conditional, and childrenastriggers set to false, but all the controls in the panel are performing async postbacks...
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress ID="pnlUpdateProgress" DisplayAfter="1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="pnlUpdate" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnDoNothing" EventName="Click" />
</Triggers>
<ContentTemplate>
<div runat="server" clientidmode="Static" id="divList">
<asp:Button runat="server" ID="btnDoNothing" Text="Do nothing" OnClick="Unnamed_Click" />
<asp:Button runat="server" ID="btnSync" Text="Sync" OnClick="btnSync_Click" />
<br />
<div class="items_bought_table">
<table style="width: 100%; padding-bottom:24px;">
<thead>
<tr>
<th style="text-align: left;">Description</th>
<th></th>
</tr>
</thead>
<tbody>
<asp:Literal runat="server" ID="litList" />
</tbody>
</table>
</div>
<br />
<asp:Literal runat="server" ID="litDebugText" />
</div>
<div runat="server" clientidmode="Static" id="divEdit">
<asp:HiddenField runat="server" ID="txtEditID" />
<asp:Literal ID="litEditList" runat="server">
</asp:Literal>
<ul>
<li class="full_width pt_10">
Your Product: <em><asp:Literal runat="server" ID="litEditProductName" /></em>
</li>
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Here both btnSync and btnDoNoting are performing async postbacks, where I would expect only btnDoNothing to post back async, btnSync should perform a full postback
AsyncPostBackTrigger only sets controls that are outside of the panel.
Controls on the page outside of an update panel can refresh an UpdatePanel control by defining them as triggers. Triggers are defined by using the AsyncPostBackTrigger element.
Controls that postback will always postback. I think the ChildrenAsTriggers="false" won't stop the postbacks - it will just stop the content from updating.
As #wazz stated in their answer, this is normal behavior in an update panel. To make a full back you need to make a "PostBackTrigger" as documented in the answer to this question.
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="myFullPostBackControlID" />
</Triggers>
</asp:UpdatePanel>
I want to use a update panel to update my repeater when I click om my btnUpload.
When I put my ascynFileUpload in the updatePanel is stop working, though the codebehind is ok.
But when I set my btnUpload as trigger and only put my repeater in the updatepanel, it doesn't refresh (which is good) but my codebehind stops working.
<div id="addEntry" class="row centered" runat="server">
<asp:Label ID="lblFeedback" runat="server"></asp:Label>
<abbr title="Max 20MB">
<asp:AsyncFileUpload ID="uploadEntry" runat="server" CompleteBackColor="White" />
</abbr>
<div id="uploading">
</div>
<asp:TextBox ID="txtEntryDescription" runat="server" TextMode="MultiLine" placeholder="Description upload (optional)"
Width="100%" Height="60px"></asp:TextBox><br />
<asp:Button ID="btnAddEntry" runat="server" Text="Upload" CssClass="btn btn-round"
OnClick="btnAddEntry_Click" />
<hr />
</div>
<div id="competitionRounds" class="row">
<asp:UpdatePanel ID="updatepnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptEntries" runat="server" DataSourceID="dsEntries">
<ItemTemplate>
<%# "<div class=\"imgThumb" + Eval("entryWinner") + " draggable\" style=\"background-image:url('uploads/"
+ Eval("entryImagename") + "');\" data-id=\""
+ Eval("pk_entryId") + "\"></div>"
%>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddEntry" EventName="click" />
</Triggers>
</asp:UpdatePanel>
</div>
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>
<asp:Panel id="container" CssClass="container" runat="server" style="width:850px">
<asp:Panel runat="server" id="header" cssClass="header" >
<div class="msg"> </div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="clearDataKey()" />
</asp:Panel>
<div runat="server" id="whatup">
<asp:Panel ID="Panel2" runat="server" >
<uc1:messageBox ID="InfoBox" runat="server" />
</asp:Panel>
</div>
<asp:updatepanel ID="upcsconfirmation" runat="server">
<ContentTemplate>
<cc1:ModalPopupExtender ID="popupCS" runat="server" BehaviorID="popupCS" TargetControlID="btnTargetCS"
PopupControlID="pnlPopupCS" BackgroundCssClass="modalBackground"/>
<asp:Button ID="btnTargetCS" runat="server" Text="Button" cssClass="hide" />
<cc1:DragPanelExtender ID="DragPanelExtenderCS" TargetControlID="pnlPopupCS" runat="server"></cc1:DragPanelExtender>
<asp:Panel ID="pnlPopupCS" runat="server" SkinID="modal"></asp:Panel>
</ContentTemplate>
</asp:updatepanel>
<div class="body" >
<div class="contentarea" style="height:200px;">
<asp:TextBox ID="datakeyholder" runat="server" style="display:none" Enabled="False" />
<asp:ObjectDataSource ID="odsCopyCustRequirements" runat="server" InsertMethod="InsertSearchRequirement"
TypeName="SearchRequirementsDataObject"
oninserting="Requirements_Inserting" >
</asp:ObjectDataSource>
<div style="height: 100%; width: 100%">
<div id="Div1" style="float: left; width: 45%; padding-left:10px">
<div class="column130">
<asp:Label ID="lblSearch1" runat="server" Text="FAST Region:"></asp:Label></div>
<asp:UpdatePanel ID="UpnlCust" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<div class="column130">
<asp:DropDownList ID="ddSearch1" AutoPostBack="true" DataTextField="Name"
OnSelectedIndexChanged="ddSearch_SelectedIndexChanged" DataValueField="id"
runat="server" Width="150px">
</asp:DropDownList>
</div>
<div class="column130">
<asp:Label ID="lblSearch2" runat="server" Text="Owning Office:"></asp:Label></div>
<div class="column130">
<asp:DropDownList ID="ddSearch2" DataTextField="Name" DataValueField="fastid"
runat="server" Width="150px">
</asp:DropDownList>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddSearch1" />
</Triggers>
</asp:UpdatePanel>
<div class="column">
</div>
</div>
</div>
</div>
<p></p>
The upper update panel (upcsconfirmation) containing modal popup extender should have UpdateMode = "Conditional" - otherwise, asynchronous post-back from bottom update panel will also update its content restoring the modal popup to hidden state.
Yet another way to solve your issue is to use Show method of popup extender on server side when the bottom update panel posts back (for example, you can put the call popupCS.Show() in ddSearch_SelectedIndexChanged to keep the modal popup open).
Inside the update panel I have update progess I want to set stylesheet inside the updatepanel like following I want to set vertical-align to middle but I it is not work how I can repair this code ?
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1" OnTick="Timer1_Tick"></asp:Timer>
<asp:Image ID="Image1" runat="server" Width="400px" Height="300px" Visible="false" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div style="vertical-align:middle;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Styles/img/loading.gif" />
Please Wait...</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
The vertical-align:middle; style will not have any effect on the image. What you probably want to do is add a CssClass="loadingimage" to the image and apply the following to it:
.loadingimage {
float:left;
margin-top: 2px;
}
Also, add some padding to the div:
<div style="padding:4px;">
<asp:Image ID="Image3" CssClass="loadingimage"
runat="server" ImageUrl="~/Styles/img/loading.gif" />
<span>Please Wait...</span>
</div>