MasterPage.master
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="10000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
MasterPage.master.vb
Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
'some sql select codes
con.Open()
Dim result As Integer = DirectCast(cmd.ExecuteScalar(), Int32) 'ExecuteScalar() only return 1 row and ignore rest
con.Close()
If result > 0 Then
'Page.ClientScript.RegisterStartupScript(Me.GetType(), "AlertMessageBox", "alert('hello world');", True)
'Page.ClientScript.RegisterStartupScript(Me.GetType(), "AlertMessageBox", "alert('" & result & " hello world');", True)
ScriptManager.RegisterStartupScript(Me.UpdatePanel1, Me.UpdatePanel1.GetType(), "AlertMessageBox", "alert(‘hello world’);", True)
End If
End Sub
Basically I have a Timer control that run a SQL Select on a fixed interval and if the result is greater than 0, there will be a popup alert.
The codes work fine if I do not use an UpdatePanel but without the UpdatePanel, whenever the Timer control runs, the page will refresh, causing whatever the user is working on to be lost.
edit: further clarification
Timer1_Tick does run every 10sec. The problem lies with the pop-up, no pop-up occurs on the browser.
Add OnTick="Timer1_Tick" to your .master markup.
Also, you should not need to, but your could try adding:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
Related
I have create a sample program in Asp.net which updates time on a button click. This time is shown in a label. Button and and label both are inside update panel say upd1.
Following is the aspx code
<script type="text/javascript" >
function fnhn() {
__doPostBack("upd1","");
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="ScriptManager1" runat="server" EnablePageMethods ="true" > </asp:ScriptManager>
<div>
<asp:UpdatePanel ID="upd1" runat ="server" ><ContentTemplate >
<asp:label runat="server" id="lbl_c" ></asp:label>
<asp:button runat="server" id="btn_b" Text="Click" />
</ContentTemplate>
</asp:updatepanel>
</div>
</form>
</body>
and following is the source code.
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
lbl_c.Text = Date.Now.ToString
End Sub
End Class
Now problem which i facing is as follows. I am able to update this time on button click without any postback in any browser other than IE 10. In IE10 my whole page gets refresh. which I obviously dont want to happen. Plz help me guys.
In a thread I also come to know about up leveling the user agent of IE10 through following.
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
If Request.UserAgent.ToLower.ToString.Contains("msie 10.0") Then
Page.ClientTarget = "uplevel"
End If
End Sub
Which didnt help me to come out of this issue.
Any comment suggestion and solution is valuable.
Can you check if your IE10 is allowing cookies? If you disabled cookies at some point the session would not be working (if cookie based) and therefore the AJAX would cause a full postback.
Have you tried adding the EnablePartialRendering? This should be the default, but may be overridden elsewhere.
<asp:ScriptManager id="ScriptManager1" runat="server"
EnablePageMethods="true" EnablePartialRendering="true" />
I have an UpdatePanel with a TabContainer in it. Each TabPanel has a Gridview in it (code not included since it's not important), and I would like to have a different UpdateProgress controls located in each TabPanel. Please see my code below for an example of what I'm trying to do.
I know the standard approach is to locate the UpdateProgress control outside of the UpdatePanel, but I would like it/them to be located inside the UpdatePanel and TabContainer because I want the "Loading..." message to appear right on top of each of my GridViews. Currently the UpdateProgress control works on the first TabPanel (as indicated below in my code), but not on the second or any subsequent TabPanels.
<asp:UpdatePanel ID="updTest" runat="server">
<ContentTemplate>
<ajax:TabContainer ID="conTest" runat="server">
<ajax:TabPanel ID="pnlTest1" runat="server">
<!--This UpdateProgress Control Does work-->
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updTest">
<ProgressTemplate>
Loading, please wait....
</ProgressTemplate>
</asp:UpdateProgress>
</ajax:TabPanel>
<ajax:TabPanel ID="pnlTest1" runat="server">
<!--This UpdateProgress Control Doesn't work. How can I fix it?-->
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="updTest">
<ProgressTemplate>
Loading, please wait....
</ProgressTemplate>
</asp:UpdateProgress>
</ajax:TabPanel>
</ajax:TabContainer>
</ContentTemplate>
I'm open to another approach if the way I'm trying to accomplish this isn't the best way. Thanks for any ideas.
What you can do is still only have one updateprogress but inside of your put an updatepanel to change what your updateProgress shows.
something like this
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
<asp:UpdatePanel ID="up1" runat="server" >
<ContentTemplate>
<!-- put a label of something in here -->
</ContentTemplate>
</asp:UpdatePanel>
</ProgressTemplate>
</asp:UpdateProgress>
hopefully this makes sense, I'm not the best at explaining sometimes.
in the clientside pageLoad() function im trying to get the multiview active index and postback to my updatepanel1 after 5 seconds only if active index is 2
following code:
<script type="text/javascript" language="JavaScript">
function pageLoad() {
if (document.getElementById('MultiViewManage').getAttribute("ActiveViewIndex") == 2) {
window.setTimeout("__doPostBack('UpdatePanel1','')",5000);
}
}
</script>
im getting null exeption or some kind of error what am i doing wrong?
thanks
To auto-refresh your update panel after 5 seconds if user is on MultiView's ActiveViewIndex=2, use an ASP.Net Timer in your UpdatePanel that fires an asynchronous postback every 5 seconds. I would embed the content of the view that should be refreshed in a separate UpdatePanel.
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="5000"></asp:Timer>
<asp:UpdatePanel ID="UpdPanelRefresh" UpdateMode="Conditional" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
.....
Then refresh the content of your UpdatePanel in Timer_Tick event-handler in codebehind.
I would embed all views in separate UpdatePanels beside the outer UpdatePanel. If you switch the view you have to trigger the outer UpdatePanel. But the timer-tick will trigger the inner UpdatePanel that belongs to view with ActiveViewIndex 2
I have a asp.net panel that is initially hidden and is shown when a button is clicked. There is javascript inside that panel and it doesn't execute after the panel is set to be visible. I can see that javascript function gets outputted on page but it is not called. What can I do to make it so that function gets called? Here is an example:
<asp:LinkButton id="lbtn" runat="server" Text="show" OnClick="lbtn_Click" />
<asp:UpdatePanel id="upnl" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:panel id="pnlContent" runat="server" visible="false">
content initially hidden.
<script>
alert('done!');
</script>
</asp:panel>
</contenttemplate>
<triggers>
<asp:AsyncPostBackTrigger ControlID="lbtn"/>
</triggers>
</asp:UpdatePanel>
You'll probably want to have some sort of end request method that gets called whenever an ajax method is called. this would have to be under the script resource.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function(sender, args){ alert("endRequest"); });
</script>
Rather than doing that, why not use Page.ClientScript.RegisterStartupScript()l to trigger it to run.
Old hand at ASP.NET, new to the UpdatePanel. I have a reporting page which executes a fairly length SQL query... takes about 10 seconds right now. What I would like to do is have my page fully render, with some placeholder text (Loading...) and then have the UpdatePanel kick off the actual time-consuming reporting process and render the report when it's done.
So... my theory is to use RegisterStartupScript() to kick this off and drop the string from GetPostBackEventReference() to trigger the UpdatePanel update. Some problems crop up:
1) Can I actually use GetPostBackEventReference w/ the UpdatePanel or do I need to trigger it some other way? Use this method on a button inside the Update Panel?
2) What event gets triggered when the postback reference is the UpdatePanel? It's not clear to me. I've got to call my databinding code somewhere! Again, maybe I need to use a button inside?
I had to do something very similar recently, here's how i did it (right or wrong):
The trick is a "Hidden Async Postback Trigger".
<asp:UpdatePanel ID="upFacebookImage" runat="server">
<ContentTemplate>
<!-- Your updatepanel content -->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hiddenAsyncTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
Then from JavaScript, whenever you want to trigger the async postback, you do this:
__doPostBack('<%= hiddenAsyncTrigger.ClientID %>', 'OnClick');
In my example, i needed to trigger an async postback from a particular JS event. But you could attach it to doc ready.
I seem to remember trying #Marko Ivanovski's way, but for some reason it didn't work. I think you need to specify a "postback-able" control (ie a button) to trigger the postback.
HTH.
Updating this with my solution, I pieced together mostly from the first answer above.
I need my page to load, then then start loading content for my update panel. The panel calls some webservices and we don't want the whole page to crash in the event that the remote server doesn't respond. We don't want the wait either.
My HTML:
<asp:UpdatePanel ID="udpCheckout" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Image ID="imgSpinner" runat="server" Visible="true" ImageUrl="~/images/ajax-loader.gif" />
<br />
<asp:Label ID="lblWait" runat="server" Visible="true" Text="Please wait..."></asp:Label>
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hiddenAsyncTrigger" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
My Code behind snippets:
In page_load:
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType, "LoadUpdate", GetPostBackEventReference(hiddenAsyncTrigger, String.Empty), True)
And the button handler:
Sub LoadUpdatePanels(ByVal o As Object, ByVal e As EventArgs) Handles hiddenAsyncTrigger.Click
System.Threading.Thread.Sleep(5000) 'wait 5 seconds so I can see the page change
imgSpinner.Visible = False
lblWait.Text = "Content is now loaded."
'udpCheckout.Update()
End Sub
This was my test to see if I could get it working. Now to replace all of this with the real code!
Try something like this (not tested).
Set the UpdateMode of the UpdatePanel to Conditional.
Add this to your <head> section:
<script type="text/javascript">
window.onload = __doPostBack('UpdatePanel1', ''); // Replace UpdatePanel1 with the ID of your UpdatePanel
</script>
Simplifying RPM1984's very helpful earlier answer (thanks ;)) and showing some tweaks & a little more of the surrounding detail that I found necessary:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="upFacebookImage" runat="server">
<ContentTemplate>
<asp:PlaceHolder runat="server" ID="PlaceHolderMediaPrompts" />
<asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" OnClick="WasPage_Load" style="display:none;" />
</ContentTemplate>
</asp:UpdatePanel>
Note:
The hidden button's vital OnClick= parameter, this is what specifies the server function to call!
No trigger clause or triggers in the Update-panel, I am using the child controls which are automatically triggers - specifically the button Click event.
And to trigger it from client-side Javascript you can use:
document.getElementById("hiddenAsyncTrigger").click();
However, I found it necessary to prevent this being called on subsequent page loads (as it caused unnecessary page load looping & consequent flicker). See the neat little IsPostBack() check below :)
e.g. To invoke this after page load (as per the original question), I just added a call to invoke the above line of code as the onload-parameter to the main Body-tag thus:
<body onload="DoPostLoad();">
...
<script type="text/javascript">
function DoPostLoad()
{
if ( IsPostBack() != true ) // ***This is NEW and ESSENTIAL! ***
document.getElementById("hiddenAsyncTrigger").click();
}
function IsPostBack() { // Ref. https://stackoverflow.com/questions/26978112/execute-javascript-only-on-page-load-not-postback-sharepoint
var ret = '<%= Page.IsPostBack%>' == 'True';
return ret;
}
. . .
</script>
</body>