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>
Related
I'm using Page with tabs, In 3rd tab i have search functionality But whenever i click search button page will reload and it will move to first tab.
I need tab should stay constant after button click, How can i do that?
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
<li style="margin-left: 30px;">UserTickets</li>
<li>JavaServer Pages</li>
<li>Active Server Pages</li>
<li>Python</li>
<li>Perl</li>
</ul>
<div>
</div>
<div>
</div>
<div>
<form runat="server">
<asp:Button ID="button" runat="server" OnClientClick="javascript:search()" Text="search" />
<asp:Label ID="label" Text="" runat="server"></asp:Label>
</form>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
Thank you
Ajax is probably the best bet in the situation you are in. The best way to describe it is that it will just refresh content on the page that you have wrapped the AJAX around. The problem your having it that on button click it is causing the page to reload therefore going back to the 'Starter' tab.
Here is a small snippet of code I have put together for you and I will explain what to do.
You need to add Nugent Package to your project and add the 'Ajax Control Toolkit'.
At the top of your code you need to add this line. (Think of it as saying 'I want to use the toolkit on this page and i will call it using AjaxControlToolkit')
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
Then you need to add the line below to your page.
<AjaxControlToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></AjaxControlToolkit:ToolkitScriptManager>
Then wrap the lines of code for that tab with these lines of code.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
Make sure that you wrap all the information that tab inside the .
This is a very basic way of using AJAX and it can be used more advanced but this will work.
You can set Tab on Page Load conditionally. Look at this code might it will help you.
var TabNum=(Your Tab Number)
function selecttabs() {
$('[id$="dvInvoiceTab"]').tabs("select", TabNum);
}
You can use update panel. In the third add update panel, below is the sample:
<div id="third-tab">
<form>
<asp:ScriptManager runat="server" ID="ScriptMng"></asp:ScriptManager>
<asp:Button ID="button" runat="server" Text="search" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="label" Text="" runat="server"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlId="button" />
</Triggers>
</asp:UpdatePanel>
</form>
</div>
In the code behind try test below code
protected void button_Click(object sender, EventArgs e){
label.Text = "Searching without full reload";
}
Hope it's help
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.
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.
Hello all gurus in the area of ASP.NET AJAX and JavaScript!
Here's the deal: I have a user control (ascx) that currently contains a help Button and a ModalPopupExtender showing a Panel. The idea is that the user clicks the button and the help info is presented in a modal popup on top of the page, with another button to close it.
The help info can very well be larger than the window, so I have to resize the modal popup on show. When the control is coded as below, the Panel is resized initially, however; if the parent page has a validation error and is resent to the client, the javascript on top never executes.
Here's the control markup:
<script type="text/javascript">
// Adjust for popup y = 130 and a small gap.
var myAdjustedHeight = getPageHeight() - 150;
if (document.getElementById('<% =pnlPopUp.ClientID %>')) {
document.getElementById('<% =pnlPopUp.ClientID %>').style.height = myAdjustedHeight;
document.getElementById('<% =pnlScroll.ClientID %>').style.height = myAdjustedHeight - 20;
}
</script>
<asp:button id="btnHelp" runat="server" text="Help" />
<asp:updatepanel id="upPopUp" runat="server">
<contenttemplate>
<asp:panel id="pnlPopUp" runat="server" width="600">
<div class="header" style="float: left;">
Help
</div>
<asp:button id="btnClose" runat="server" text="Close" style="float: right; padding-bottom: 3px;" />
<asp:panel id="pnlScroll" runat="server" scrollbars="Vertical" style="clear: both;">
<asp:gridview id="grv" runat="server" autogeneratecolumns="true" showheader="false" gridlines="None" cellspacing="2" cellpadding="2">
</asp:gridview>
</asp:panel>
</asp:panel>
</contenttemplate>
</asp:updatepanel>
<ajaxtoolkit:modalpopupextender id="popUpExtender"
runat="server" backgroundcssclass="modalBackground" okcontrolid="btnClose"
targetcontrolid="btnHelp" popupcontrolid="pnlPopUp" x="100" y="130" />
(The GridView is filled with data in the Page_Load using a predefined DataSet in a basic fashion.)
I have tried to add this:
function pageLoad() {
document.getElementById('<% =popUpExtender.ClientID %>').add_shown(adjustHeight);
}
(where adjustHeight() is a function containing the code from the top) but when it fires I get null back for the ModalPopupExtender - and indeed it never seems to be included into the markup sent down the wire.
BTW, I need to add at least two instances of this help button to present help info for several elements on the page. Hence, I can't use the BehaviorID property of the ModalPopupExtender, since it is piped straight out to the page and I get an id collision.
So, how do I fix this? Am I to move the ModalPopupExtender to the Page or can I solve this within the ascx control?
If anyone has an idea on how to fix this, I would appreciate it.
Use this in your pageLoad:
$find('<% =popUpExtender.ClientID %>');
add_shown wouldn't exist for the HTML element, which document.getElementById returns.
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>