Refresh MuliView's view every 5 seconds - javascript

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

Related

asp.net c# __doPostBack button in UpdatePanel is working on second click

Situation:
I'm using multiview in my aspx.
in 2 views I have UpdatePanels and literals inside. my UpdatePanels are triggered by a timer (same timer). by c# I'm creating same postback button into these literals.
in my view1 I have 1 updatepanel and when I click the button it should activate view2. in view2 I have 2 different updatepanels. in first one I have this same button.
in this postback button I'm doing something and activating view2. My problem is the button in view1 is working on only second click. in view2, same button is working on first click. from my point of view, the only difference is view. all other details are perfectly same.
if I remove updatepanel from view1, button is working properly. so I'm assuming that problem is about UpdatePanel. in view2, same button is in updatepanel and it works properly. so I'm assuming that problem is view.
c# my button creation:
<td><input type='image' src='images/zoom1.png' id='btn' value='Match' onclick='javascript:__doPostBack(\"Match1\",\"" + dr1.GetValue(0).ToString() + "\");' ></td>
my button action:
private void Match1_Click(object sender, System.EventArgs e)
{
job1
job2
job3
MultiView1.ActiveViewIndex = 2;
}
my page_load:
if (IsPostBack)
{
if (Request.Form["__EVENTTARGET"] != null && Request.Form["__EVENTTARGET"] == "Match1")
{
Match1_Click(null, null);
}
}
my updatepanels are like:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick"/>
</Triggers>
</asp:UpdatePanel>
When I try to do step over and move one by one with f10, I realized something strange. when I click the button at first, it triggers the action, I press f10 and it moves 1 line down then 4 lines up, 5 line down 3 lines up etc... and it doesn't end properly. so action is not ending as expected. when I click the button second time, I can move with f10 properly and everything works as expected.

Page with Update Panels stops working when moved into Content Page

I have a rather complex page that took me some month to work properly and that uses 10 Update Panels. Now for some structural change I had to place this working page as a content page inside a master page.
Unfortunately the buttons in the UpdatePanels don`t fire anymore after migrating to ContentPage.
MasterPage:
<form id="form1" runat="server">
<div class="content">
<asp:ContentPlaceHolder id="contentBody" runat="server">
</asp:ContentPlaceHolder>
ContentPage:
<asp:Content ID="Content3" ContentPlaceHolderID="contentBody" Runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<asp:UpdatePanel runat="server" ID="UpdatePanel_MainButtons" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<div id="DIVMainButtons" runat="server">
<asp:Button ID="ButtonDiaLibre2" runat="server" Visible="true" Text="Dias Libres" BackColor="#CDCDCD" OnClick="DiaLibreList" BorderWidth="0px" Font-Size="11px" Width="150px" useSubmitBehavior="false"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I had tried to place the ScriptManager in the MasterPage instead of the ContentPage, but whatever I tried the button is not firing.
Ok, the button does not fire because of on error in the JavaScript I use in order to safe and write back the scrolling position of a panel inside an update panel. This is the JavaScript that worked in the stand-alone page, but returns a Null reference when run in the Content page. The script is located right after the ScriptManager in the ContentPage.
scrollTop is Null or not defined!
Anyone has a clue why this does not work in the content page?
<script type="text/javascript">
var yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollTop = yPos;
}
</script>

javascript popup in Timer control and UpdatePanel control not working

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>

Javascript not executing after partial rendering

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.

How can I defer loading UpdatePanel content until after the page renders?

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>

Categories