Multiple UpdateProgress Controls In TabContainer, Linked To Single UpdatePanel - javascript

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.

Related

Change iframe src without refreshing parent page

I have a page within an ASP.NET site. The iframe is inside an Ajax Update Panel.
I have a need to change the src attribute of the iframe from javascript which I can do. The problem is that when the src attribute changes, the parent page refreshes.
I need to only have the frame navigate, not the parent page.
HTML:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<iframe id="previewIframe" runat="server" Width="800px"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
javascript:
var frame = $("#previewIframe");
frame.setAttribute('src', "http://www.google.com");
html:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<iframe ClientIDMode="Static" id="previewIframe" src="" runat="server"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
javascript:
$("#previewIframe").attr('src', "http://www.google.com");
forgot that in ASP the element ID's are not sacred, they are prepended eg. "MainContent_previewIframe"
once I added the ClientIDMode="Static" attribute jquery could properly reference the element.
Also updating the jquery method to $("#previewIframe").attr('src','google.com'); - I was mixing straight javascript and jquery. I should know by now to stick to one.

Button click event in aspx

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

Asp.net repeater based Modal with ContentTemplate needs eval passed to parameter

I believe a few friends and I have coded each other into a bit of a corner. Here's what's happening: We have an aspx page building a table of Entries using a repeater, and each row has its respective EntryID. Each row has a link to a modal that displays more detailed information, which we create on the fly with a div template and an eval('EntryID') on the repeater.
The problem now is we have a ContentTemplate we use with an UpdatePanel for a series of LinkButton presses the user can follow to alter the Entry. The issue is that we pass all of the information for the Modal details via a Javascript call that opens the modal, and I need to somehow get this information to the code behind for the LinkButton's onclick call.
<asp:UpdatePanel ID="StatusUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlStatus" runat="server">
<asp:Panel ID="pnlStatusMain" runat="server">
<asp:Label ID="lblStatusText" runat="server" Text="Our validator returned a yellow status for this entry"></asp:Label>
<asp:LinkButton ID="lnkbtnChangeStatusToGreen" runat="server" OnClick="ChangeStatusToGreen_Click">Change status to green</asp:LinkButton>
<asp:Panel ID="pnlStatusConfirm" runat="server" CssClass="hideDiv">
Are you sure?<br />
<asp:LinkButton ID="lnkbtnCancelChangeStatus" runat="server" OnClick="CancelChangeStatus_Click" CssClass="grayText">Cancel</asp:LinkButton>
|
<asp:LinkButton ID="lnkbtnProceedChangeStatus" runat="server" OnClick="ProceedChangeStatus_Click" CommandArgument="">Yes, proceed</asp:LinkButton>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
The link in question being lnkbtnProceedChangeStatus.
The rest of the modal is template divs and tables that we use the Javascript call to populate with the appropriate information using html inserts. I'm thinking some sort of post back, but am not sure what would be the best way to go about it. Any ideas?

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.

Multiple ModalPopupExtenders on one page, each with javascript

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.

Categories