Going For AJAX: updatepanel

Showing posts with label updatepanel. Show all posts

Wednesday, March 28, 2012

How do I use javascript to force an UpDatePanel to Update

Hi, I am trying to find a simple way to force a specific update panel to refresh/update from a javascript function. The reason being that I am trying to build a simple calendar control, simular to that on the AJAX Control Toolbox site under PopUpControlhttp://atlas.asp.net/atlastoolkit/PopupControl/PopupControl.aspx, and I want the calendar to update if a date has been manually entered into the text box. I have found that you have to add an atrribute to the date input text box to invoke a call to a javascript function. (I am using the calendar control that I make inside of a gridview control which is enbeded inside of multiple levels of Update Panels and the TextBox.OnChange() event does not fire when inside of a gridview. So I added the following to the Page_Load event:TextBox.Attributes.Add("OnMouseLeave","javascriptFunction()") ) The problem that I am having is what to add to thejavascriptFunction()to force a specific UpDatePanel to refresh. I can get all of the panels to update using a "__doPostBack('DateControl$DateDisplay',''); "but there seems like that should be a simple way to force only one panel to update. I've tried to click on a hidden button using a javascript click() event, but I continuosly get the follwing javascript error: " Microsoft JScript runtime error: '_postbackSettings.async' is null or not an object " Is there a way to implement theUpdatePanel.Update() function directly from Javascript? Am I even going in the right direction? Could I call one of my code behind functions from javascript to perform the UpdatePanel.Update()?

So in simple terms, when building a control how can i update a specific UpdatePanel in the control through a javascript function?

Help Please!! Thanks! Big Smile

There is no direct support for updating just a single panel. You can mostly achieve it by setting all your panels to be Conditional and then calling Update on just the ones you want.

Thanks,

Eilon

HOW DO I update a control from outside the updatepanel

i have an update panel with 4 panels. when the user select panel 2 i need a control outside the updatepanel to become visible. i can not put the hidden div inside the updatepanel because the contents of the div will not work. how do update the div control from panel 2?

To make visible the control outside updatepanel is not possible upto my knowledge. definitely you have to include that control into another udpatepanel or include it with your 1st updatepanel.

Hi CurlyFro,

Here is the sample to indicate how to show a hidden div, which is out of a UpdatePanel, from a panel click event or a button click event in UpdatePanel. Hope it helps.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { } protected void Button2_Click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "showDiv();", true); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <script language="javascript"> function showDiv(){ document.all.myDiv1.style.display=''; //do something here to update the hidden div } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><%=DateTime.Now.ToString()%> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="200px" onclick="showDiv()" BorderColor="AliceBlue" BorderWidth="1px"> <input id="Button1" type="button" value="button" /> </asp:Panel> <br/> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="200px" BorderColor="Black" BorderWidth="1px" > <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="ServerSideButton" /> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <div id="myDiv1" style="width: 200px; height: 100px; display: none"> This is the hidden div </div> </form></body></html>

This sample contains two ways (server side and client side methods) to show the hidden div.

If i misunderstood you, please let me know!

i'm creating a registration form. panel1 is my license, panel2 is the registration form, panel3 is my confirmation. on panel2 i have form hints for specific textboxes. how do i get the form hints to be hidden then shown on panel2?

Since you have many steps, I suggesting to wrap these in an Asp.net Wizard Control then put the Wizard Control in an UpdatePanel.

Hi CurlyFro,

Would you please share your source code here ? It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Hi CurlyFro,

Has your problem been resolved yet?

How do I trigger an UpdatePanel from the ItemCommand event of a data-bound Accordion?

Greetings, clever ASP.NET AJAX users.

I have a data-bound Accordion with a Button in each header. Cliking the button changes a label inside an UpdatePanel. But I don't want a full postback when the Button is clicked. I just want the UpdatePanel itself updated.

I have tried registering the ItemCommand event of the Accordion as a trigger, but I get this error message, which I don't understand:

Control with ID 'accAccordion' being registered through RegisterAsyncPostBackControl or RegisterPostBackControl must implement either INamingContainer, IPostBackDataHandler, or IPostBackEventHandler.

Here is my code:

 <asp:UpdatePanel ID="upUpdatePanel" runat="server" ChildrenAsTriggers="true" > <ContentTemplate> <div style="border:1px solid black;"> Name: <asp:Label ID="lblName" runat="server" /><br /> <asp:Button ID="btnChange" runat="server" OnClick="btnChange_Click" Text="Inside Update Panel"/> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="accAccordion" EventName="ItemCommand" /> </Triggers> </asp:UpdatePanel> <br /> <ajaxtoolkit:Accordion ID="accAccordion" runat="server" RequireOpenedPane="false" OnItemDataBound="accAccordion_ItemDataBound" OnItemCommand="accAccordion_ItemCommand"> <HeaderTemplate> header: <asp:Button ID="btnChange" runat="server" CommandArgument="Inside Update Panel" /> </HeaderTemplate> <ContentTemplate> content:<br /> </ContentTemplate> </ajaxtoolkit:Accordion>

public partialclass _Test : System.Web.UI.Page{protected string[] aNames = {"foo","bar","baz" };protected void Page_Load(object sender, EventArgs e) {this.accAccordion.DataSource =this.aNames;this.accAccordion.DataBind(); }protected void btnChange_Click(Object sender, EventArgs e) {this.lblName.Text =this.btnChange.Text; }protected void accAccordion_ItemDataBound(Object sender, AjaxControlToolkit.AccordionItemEventArgs e) {if (e.AccordionItem.ItemType == AjaxControlToolkit.AccordionItemType.Header) { Button btnChange = (Button)e.AccordionItem.FindControl("btnChange"); btnChange.Text = e.AccordionItem.DataItem.ToString(); btnChange.CommandArgument = btnChange.Text; } }protected void accAccordion_ItemCommand(Object sender, CommandEventArgs e) {this.lblName.Text = e.CommandArgument.ToString(); }}

Obviously if I remove the trigger the error goes away, but then I don't get partial page rendering. I tried adding code to the ItemDataBound event of the Accordion to register the Button with the ScriptManager as an AsyncCallBack or whatever it is, and then added code to the ItemCommand event to call the Update() method of the UpdatePanel, but that doesn't work either -- I still get a full postback.

Any ideas?

If it's not feasible to trap the ItemCommand event of the Accordion or the Click event of the Button, is there a more exotic solution that would let me trigger the UpdatePanel from client script? I would need to be able to somehow pass the CommandArgument from the specific button that was clicked...

FYI, I worked around this problem using the approach described here:http://weblogs.asp.net/rajbk/archive/2007/01/21/refresh-updatepanel-via-javascript.aspx

I used SuppressHeaderPostBasks="true" on the Accordion, then for each Button in the Accordion Pane's header, I used the OnClientClick property to set the value of a hidden input element inside the update panel, then call the __doPostBack method pointing at that element. In the codebehind, I trapped the Change event of the hidden input element and did my processing.

I have an updatepanel inside an Accordion and I think you might have the solution for my problem, but I don't understand you process.

I would be grateful if you could help me.

Here's my code;

codebehind

protectedvoid Page_Init(object sender,EventArgs e)

{

Accordion1.FindControl("nothing");

LinkButton UserLink = Accordion1.FindControl("UserLink")asLinkButton;

ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(UserLink);

//Creates a new async trigger

AsyncPostBackTrigger trigger =newAsyncPostBackTrigger();

//Sets the control that will trigger a post-back on the UpdatePanel

trigger.ControlID ="UserLink";

//Sets the event name of the control

trigger.EventName ="Click";

//Adds the trigger to the UpdatePanels' triggers collection

UpdatePanelUser.Triggers.Add(trigger);

}

protectedvoid Page_Load(object sender,EventArgs e)

{

}

protectedvoid UserLink_Click(object sender,EventArgs e)

{

//UpdatePanel getUserPanel = UserPanel.FindControl("UpdatePanelUser") as UpdatePanel;

//ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(getUserPanel);

String userPanelPath ="~/CMS/_admin/_components/CMS_controls/admin_controls/UserPanel.ascx";Control userPanel = Page.LoadControl(userPanelPath);

PanelUser.Controls.Add(userPanel);

UpdatePanelUser.Update();

}

aspx

<ajaxToolkit:AccordionID="Accordion1"runat="server"HeaderSelectedCssClass="AdminPanelHeaderSelected"RequireOpenedPane="false"SuppressHeaderPostbacks="true"SelectedIndex="0"HeaderCssClass="AdminPanelHeader"ContentCssClass="AdminPanelContent"FadeTransitions="true"FramesPerSecond="40"TransitionDuration="250"AutoSize="none">

<Panes>

<ajaxToolkit:AccordionPanerunat="server"ID="Home">

<ahref=""onclick="return false;">Home</a>

</Header>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="UserPanel">

<asp:LinkButtonID="UserLink"runat="server"OnClick="UserLink_Click">User panel</asp:LinkButton>

</Header>

<asp:UpdatePanelID="UpdatePanelUser"runat="server"UpdateMode="Conditional">

<asp:PanelID="PanelUser"runat="server">

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="STATS">

<ahref=""onclick="return false;">Statistics</a>

</Header>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="GroupEmails">

<ahref=""onclick="return false;">Group Email</a>

</Header>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="Errors">

<ahref=""onclick="return false;">Error reporting</a>

</Header>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

Thanks.

How do I set off a process and display UpdatePanel on page load

I think this should be a simple task: I have a page that does some lengthy processing and I am using an update panel to show the user that something is happening. Currently, I have to load the page and the user has to press a buttong to start processing. Now, for me, this is a pointless step.. I want the page to kick off the server processing on page load and then display a page with the UpdatePanel which is then updated when the process is complete.

What is the best way to do this?.. Any suggestions?

let me try this idea. once processing starts, you had the actual update panel, and show the update progress control, which gives the idea that processing is going on another page, then show the panel back again.

just a suggestion, since Atlas allows us to work with different parts of the page, somewhat like in windows forms.

a trial.

Regards,
formationusa

repost

Hide instead of had
sorry for the mistake, i have to check my spelling more often.

let me try this idea. once processing starts, you hide the actual update panel, and show the update progress control, which gives the idea that processing is going on another page, then show the panel back again.

just a suggestion, since Atlas allows us to work with different parts of the page, somewhat like in windows forms.

a trial.

Regards,
formationusa

How Do I Reset Scroll Position Inside UpdatePanel?

Hello,

I have a UserControl inside an UpdatePanel. The UserControl contains several DIVs that I show and hide through partial postback. I want the contents of each DIV to be scrolled to the top when I show it. I have tried using the ScriptManager to set focus onto the topmost control of each DIV when I show it, but it doesn't work. I have also tried through javascript to no avail. I know this is kind of the opposite of the behavior that many folks want from AJAX, but I need it for this piece of my application. I have tried searching but all examples are page-centric, not usercontrol-centric and speak to SmartNavigation.

Any help is appreciated.

Brendan

not sure if this would help, but I found something interestingin terms of firing off some js code during a partial page update :

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

It was particularly useful for displaying a message to the user to indicate something was happening...

Good luck,

Bob

I ended up just using this in the codebehind of the ascx:

ScriptManager.RegisterStartupScript(Page,typeof(PageTemplate),"Focus","focus();",true);

And including this function in a .js file (one line for each section):

Seems to work on all but the initial page change, which is 'good enough' for me at this stage.

How do I recognize dynamic buttons as triggers for updating updatepanels?

I have two updatepanels on a page each with a datagrid inside the panels. I need updatepanel B to update it's datagrid when a LinkButton is clicked inside udatepanel A's datagrid. The linkbuttons are dynamically generated for each row of the datagrid.

Thanks

Braden

Stripped Down Example:

<asp:UpdatePanel id="pnl1" runat="server">
<ContentTemplate>
<asp:datagrid id="dgA" runat="server" > ... <asp:LinkButton ID="lbtnSelect" CommandArgument=' ... ' runat="server">...</asp:LinkButton> ... </asp:datagrid>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel id="pnl2" runat="server">
<ContentTemplate>
<asp:datagrid id="dgB" runat="server" > ... </asp:datagrid>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnSelect" EventName=" ... "/>
</Triggers>
</asp:UpdatePanel>

Unless I misread your post, I think that all you need to do is add the following line inside of your event handler for the link buttons (lbtnSelect_Click, or similar):

pnl2.update();

This should update your pnl1 because the linkbutton's click event fired inside of pnl1, andprogrammatically updating pnl2 with pnl2.update() should take care of updating the other datagrid (dgB). You can get rid of the <Triggers> definition too.

How do I invoke a suitable event on the client?

I have two TextBoxes above a GridView. The GridView is wrapped in an UpdatePanel and both TextBoxes trigger an ajax GridView refresh OnTextChanged.

This is my problem. The user may sometimes leave nothing in a TextBox - when that happens I assume they mean zero, so I want to put the value of '0' back into the TextBox (which the user has removed, by deleting the entire content of the TextBox). See the javascript: restoreTextBox() function below. What event is available for me to do this and can I just invoke the event or do I need to inherit something. I have tried beginRequest() or pageLoaded() but nothing happens.

PS: The txtAssetPc_TextChanged() server-side method is working fine to update the GridView. I just want to know how I can use a suitable client event.

aspx Code only below (the server code is missing as it is not relevant to this problem).

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<Services>
<asp:ServiceReference Path="~/RedirectService.asmx" />
</Services>
</asp:ScriptManager>
<asp:ValidationSummary ID="vsFunds" runat="server" ValidationGroup="TextPC" DisplayMode="BulletList" ShowSummary="true" /><br />
Equities ≥<asp:TextBox ID="txtEquities" runat="server" Text="0" CssClass="text" MaxLength="3" ToolTip="Enter minimum percentage value of Equities (0 - 100)" OnTextChanged="txtAssetPc_TextChanged" AutoPostBack="true" />% <asp:RangeValidator ID="rvEquities" ControlToValidate="txtEquities" runat="server" ErrorMessage="Valid range for Equities is 0-100" Type="Integer" MinimumValue="0" MaximumValue="100" ValidationGroup="TextPC" /><br />
Fixed Income ≥<asp:TextBox ID="txtFixedIncome" runat="server" Text="0" CssClass="text" MaxLength="3" ToolTip="Enter minimum percentage value of Fixed Income (0 - 100)" OnTextChanged="txtAssetPc_TextChanged" AutoPostBack="true" />% <asp:RangeValidator ID="rvFixedIncome" ControlToValidate="txtFixedIncome" runat="server" ErrorMessage="Valid range for Fixed Income is 0-100" Type="Integer" MinimumValue="0" MaximumValue="100" ValidationGroup="TextPC" />

<asp:UpdatePanel ID="upAssetExposure" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvAssetExposure" runat="server" AutoGenerateColumns="False" DataKeyNames="PensionFundID"
AllowSorting="True" AllowPaging="True" PageSize="50"
OnRowDataBound="gvAssetExposure_RowDataBound" OnPageIndexChanging="gvAssetExposure_PageIndexChanging" OnSorting="gvAssetExposure_Sorting" >
<PagerSettings Mode="NumericFirstLast" />
<Columns>
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol32" NullDisplayText="N/A" DataField="FundName" HeaderText="Investor" SortExpression="FundName" />
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol12" NullDisplayText="N/A" DataField="TotalFundAssetsSterling" HeaderText="Total Fund Assets (GBP)" SortExpression="TotalFundAssetsSterling" DataFormatString="{0:GBP ###,### m; N/A}" HtmlEncode="False" />
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol12" NullDisplayText="N/A" DataField="Equities_Percent" HeaderText="Equities (%)" SortExpression="Equities_Percent" DataFormatString="{0:##; N/A}" HtmlEncode="False" />
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol12" NullDisplayText="N/A" DataField="FixedIncome_Percent" HeaderText="Fixed Income (%)" SortExpression="FixedIncome_Percent" DataFormatString="{0:##; N/A}" HtmlEncode="False" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtEquities" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="txtFixedIncome" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>

Just add onblur="restoreTextBox();" to your textboxes.

Monday, March 26, 2012

How Do I Dynamically Load Pages Into An UpdatePanel

My code is as follows:

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="AnyModule1.aspx.vb"Inherits="_Default" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>My Module</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<asp:ScriptReferencePath="WebRequest.js"/>
</Scripts>
</asp:ScriptManager>
<divstyle="text-align: center">
<tableborder="0"cellpadding="0"cellspacing="0"style="width: 100%">
<tr>
<tdalign="left"style="width: 100px">
<asp:MenuID="Menu1"runat="server"BackColor="#F7F6F3"DynamicHorizontalOffset="2"
Font-Names="Verdana"Font-Size="0.8em"ForeColor="#7C6F57"StaticSubMenuIndent="10px">
<StaticMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>
<DynamicHoverStyleBackColor="#7C6F57"ForeColor="White"/>
<DynamicMenuStyleBackColor="#F7F6F3"/>
<StaticSelectedStyleBackColor="#5D7B9D"/>
<DynamicSelectedStyleBackColor="#5D7B9D"/>
<DynamicMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>
<Items>
<asp:MenuItemText="File"Value="File">
<asp:MenuItemText="Find Patient"Value="Find Patient"NavigateUrl="javascript:PostWebRequest('FindPatient.aspx','divContent1');"></asp:MenuItem>
<asp:MenuItemText="Last Patient"Value="Last Patient"></asp:MenuItem>
<asp:MenuItemText="Find Episode"Value="Find Episode"NavigateUrl="javascript:PostWebRequest('FindEpisode.aspx','divContent2');"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticHoverStyleBackColor="#7C6F57"ForeColor="White"/>
</asp:Menu>
</td>
</tr>
<tr>
<tdstyle="width: 100px"align="left">
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"ChildrenAsTriggers="False">
<ContentTemplate>
<divid='divContent1'style="width: 100px; height: 100px">
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="Menu1"EventName="MenuItemClick"/>
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<tdstyle="width: 100px"align="left">
</td>
</tr>
</table>
</div>
<br/>
<div>
</div>
</form>
<divid='divContent2'style="width: 100px; height: 100px">
</div>

</body></html>
<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="AnyModule1.aspx.vb"Inherits="_Default" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>My Module</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<asp:ScriptReferencePath="WebRequest.js"/>
</Scripts>
</asp:ScriptManager>
<divstyle="text-align: center">
<tableborder="0"cellpadding="0"cellspacing="0"style="width: 100%">
<tr>
<tdalign="left"style="width: 100px">
<asp:MenuID="Menu1"runat="server"BackColor="#F7F6F3"DynamicHorizontalOffset="2"
Font-Names="Verdana"Font-Size="0.8em"ForeColor="#7C6F57"StaticSubMenuIndent="10px">
<StaticMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>
<DynamicHoverStyleBackColor="#7C6F57"ForeColor="White"/>
<DynamicMenuStyleBackColor="#F7F6F3"/>
<StaticSelectedStyleBackColor="#5D7B9D"/>
<DynamicSelectedStyleBackColor="#5D7B9D"/>
<DynamicMenuItemStyleHorizontalPadding="5px"VerticalPadding="2px"/>
<Items>
<asp:MenuItemText="File"Value="File">
<asp:MenuItemText="Find Patient"Value="Find Patient"NavigateUrl="javascript:PostWebRequest('FindPatient.aspx','divContent1');"></asp:MenuItem>
<asp:MenuItemText="Last Patient"Value="Last Patient"></asp:MenuItem>
<asp:MenuItemText="Find Episode"Value="Find Episode"NavigateUrl="javascript:PostWebRequest('FindEpisode.aspx','divContent2');"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticHoverStyleBackColor="#7C6F57"ForeColor="White"/>
</asp:Menu>
</td>
</tr>
<tr>
<tdstyle="width: 100px"align="left">
<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"ChildrenAsTriggers="False">
<ContentTemplate>
<divid='divContent1'style="width: 100px; height: 100px">
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="Menu1"EventName="MenuItemClick"/>
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<tdstyle="width: 100px"align="left">
</td>
</tr>
</table>
</div>
<br/>
<div>
</div>
</form>
<divid='divContent2'style="width: 100px; height: 100px">
</div>
</body>
</html>

As you can see from above I am trying to dynamically load webpages (FindPatient.aspx and FindEpisode.aspx) into UpdatePanel1 which holds a DIV (divContent1) when the relevant menu item is clicked.

I have two problems:

1. Using the javascript function that I call to replace the innerhtml of divContent1 with the selected webpage, causes errors on the page and no popluating of the DIV. However if I point the code to divContent2 - outside the update panel the innerhtml function works.

2. I need the called page to be displayed in the updatepanel because I dont want the menuitems on the base page to be refreshed each time the content pages causes a refresh.

Can anyone help?

Please

hello.

well, this is not the correct way of doing this. the updatepanel will let you refresh parts of a page, but it won't let you load a page on another. if that is what you want, then you should consider using an iframe.

Thanks for your quick response, I have traditionally used iFrames but understood that they were not an ideal solution. Sites such asiGoogle seem to suggest that AJAX does allow webpages to be displayed in an updatepanel because you can click on one of the YouTube videos and it will refresh the embedded page while leaving those areas outside it untouched. That is the kind of functionality that I am trying to achieve.

Any further ideas would be very much appreciated.

hello-

yes, that is correct. if you're into updatepanels, then i'd refactor the site so that each page is transformed into a user control which is loaded by the udpatepanel during partial postbacks. if you do know how to write js, then you shoudl do it all in the client side: you'd use web services to get the data and then js to replace the contents of the place holders. do notice that this is really hard to do and you'll have to be a good js coder (but it's the correct way of doing stuff, if you ask me that is)

Will VS 2008 help with JS coding with its builtin intellisense and debugging?

Help yes, but it's far from perfect. It infers as much as it can, but a lot it just can't guess at.

How do I dynamically create updatepanel and then contenttemplate linkbutton and triggers a

I need to be able to create multiple updatepanels which have a link button in them. I have no idea how many updatepanels I'm going to have which have link buttons as the data coming back is from a database. Right now I'm taking the data from a database and putting that into a datalist.

It all works great until I wanted to add a updatepanel to it; then it said the updatepanel cannot be used in that context. So, if it cannot be as simple as what I tried below, how do I dynamically create an updatepanel for each row of data returned from the database?

Each row in the database has a unique ID so the ID of the linkbutton and the asyncpostbacktrigger controlid could be assigned that unique ID.

This works fine without adding updatepanel:
<asp:ScriptManager ID="ajaxClientComponentMgr" EnablePartialRendering="true" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWebService.asmx" InlineScript="true" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/Javascript/ajaxJScript.js" />
</Scripts>
</asp:ScriptManager>

<asp:DataList ID="DataSource_Stories_Display" runat="server">
<ItemTemplate>
<asp:Table CssClass="stories_table_block" runat="server">
<asp:TableRow runat="server">
<asp:TableCell CssClass="stories_right_content" runat="server">
<span class="stories_content_header"><%#DataBinder.Eval(Container.DataItem, "Title Name:")%></span><br />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:DataList>

This complains of being "not in this context" after adding updatepanel:
(Note: unique_id_for_this_link added just to show that each iteration would have a unique number at that location)

<asp:ScriptManager ID="ajaxClientComponentMgr" EnablePartialRendering="true" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWebService.asmx" InlineScript="true" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/Javascript/ajaxJScript.js" />
</Scripts>
</asp:ScriptManager>

<asp:UpdatePanel ID="something_unique_id_for_this_panel" ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:LinkButton ID="unique_id_for_this_link" OnClientClick="paneDataRequest();return false;" CssClass="story_link" runat="server">Click Me</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="unique_id_for_this_link" />
</Triggers>
</asp:UpdatePanel>

</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:DataList>

UPDATE: Okay...Swapping where UpdatePanel was located fixed part of the issue.

UpdatePanel, if it is outside of Datalist will work as follows:

<asp:UpdatePanel ChildrenAsTriggers="False" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DataList ID="DataSource_Stories_Display" runat="server">
<ItemTemplate>
<asp:Table CssClass="stories_table_block" runat="server">
<asp:TableRow runat="server">
<asp:TableCell CssClass="stories_right_content" runat="server">
<span class="stories_content_header"><%#DataBinder.Eval(Container.DataItem, "Title Name:")%></span><br />
<asp:LinkButton OnClientClick="paneDataRequest();return false;" CssClass="story_link" runat="server">Click Me</asp:LinkButton>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>

New problem discovered!

If I try to assign an ID to the asp:LinkButton (a unique value for each row of database data) I just end up getting all types of errors:

<asp:LinkButton id="some_unique_id" OnClientClick="paneDataRequest();return false;" CssClass="story_link" runat="server">Click Me</asp:LinkButton>

If the ID is omitted, it works fine...not what I'm after.

Next Question:

How do I assign a unique ID number to LinkButton? If I cannot assign it, how can I determine the IDs which are assigned to it so that I can build the <triggers></triggers> part of the updatepanel control?

UPDATE 2:

Visual Studio .Net Beta 2, using the scenario above from second post, does not auto-generate IDs (when you view source of the generated page) for:

<asp:LinkButtonOnClientClick="paneDataRequest();return false;"CssClass="story_link"runat="server"></asp:LinkButton>

Visual Studio .Net Beta 2, using the scenario above from second post, does auto-generate name values (although not IDs) for buttons such as:

<asp:ButtonOnClientClick="paneDataRequest();return false;"Text="default"runat="server"></asp:Button>

How do I Display an Animated GIF when afile is uploaded?

I cant believe how difficult this is to do. I asusmed using an updatepanel and an updateprogress control would handle this easily. My code is below. However "FileUpload1.PostedFile.FileName" is

always set to null. Can anyone suggest how I can display a simple animated gif when Im uploading a file to the server. I dont want a progress bar just a simple animated gif to show that something is a happening. Thanks!

protected void Button3_Click(object sender, EventArgs e)
{
string File1 = FileUpload1.PostedFile.FileName;

}

ASP.NET code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>

<asp:Button ID="Button3" runat="server" Style="z-index: 113; left: 8px; position: absolute;
top: 108px" Text="Button" OnClick="Button3_Click" />
<asp:FileUpload ID="FileUpload1" runat="server" Style="z-index: 101; left: 74px;
position: absolute; top: 438px" />

</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Graphics/CAFQW3B9.gif" Style="z-index: 100;
left: 76px; position: absolute; top: 488px" />

</ProgressTemplate>
</asp:UpdateProgress>

Hi,

there are several controls that don't work asynchronously by putting them in an UpdatePanel controls. FileUpload is one of them so you need to set the uploadbutton to be a postbacktrigger of the UpdatePanel so a normal synchronous postback will occur.

Grz, Kris.

Thanks Kris. Im new to this and Im not really sure what you mean by "postbacktrigger". Can you point me to a url or post a ccode snippet that can explain how to show my animated gif on file upload?

Hi,

rangers99:
Im new to this and Im not really sure what you mean by "postbacktrigger".

You can take a look at the example on this page:http://ajax.asp.net/docs/mref/T_System_Web_UI_PostBackTrigger.aspx.

Grz, Kris.

How do I collapse collapsible panels in UpdatePanel from code-behind?

Hi, all. There are quite a few posts about the collapsible panel here (some are my own), and I did a good amount of going through those, but they didn't seem to address my problem.

I have a master/detail setup in the form of a GridView in one collapsible panel and a FormView in another collapsible panel. The Grid- & FormViews work fine together. My problem lies in getting the collapsible panels to expand/collapse on a button clicked in the appropriate Grid/FormView. Actually, through much testing I found the problem lies in the fact that both the GridView and FormView are in their own UpdatePanels. When I comment those out, the code I have attached to the save button on the FormView does as it should: collapses the FormView panel and expands the GridView panel.

I tried using triggers for each of the UpdatePanels, setting the ControlID property to the FormView for the GridView's panel & vice versa for the FormView's panel. That didn't work...

Here's a code example to show you what I've got:

<asp:UpdatePanel ID="updPnlActCodeFmv" runat="server" UpdateMode="Conditional"><Triggers> <asp:AsyncPostBackTrigger ControlID="gvActCode" /></Triggers><ContentTemplate><asp:FormView ID="fmvActCode" runat="server" DefaultMode="Insert" DataSourceID="dsActCode"DataKeyNames="ActivityCodeID" BorderWidth="0px" Width="600px"> <InsertItemTemplate></InsertItemTemplate><EditItemTemplate> <asp:Button ID="btnSaveActCodeFmvChange" runat="server" CausesValidation="True" ValidationGroup="EditValidation"CommandName="Update" Text="Save Changes & Return to Table" Font-Bold="True" OnClick="btnSaveActCodeFmvChange_Click" /></EditItemTemplate></asp:FormView></ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="updPnlActCodeGv" runat="server" UpdateMode="Conditional"><Triggers><asp:AsyncPostBackTrigger ControlID="fmvActCode" /></Triggers><ContentTemplate><asp:GridView ID="gvActCode" runat="server"> <Columns> </Columns></asp:GridView></ContentTemplate></asp:UpdatePanel>

Here's the code for the click event of the save button in the FormView:

Protected Sub btnSaveActCodeFmvChange_Click(ByVal senderAs Object,ByVal eAs EventArgs)
Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeActCodeFmv
cpeFmv.Collapsed =True
cpeFmv.ClientState ="True"

Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeActCodeGv
cpeGv.Collapsed =False
cpeGv.ClientState ="False"

updPnlCpeActCode.Update()
End Sub

I'm not sure what else I can try - I need UpdatePanels around each of the View controls due to the amount of data being used in them, but with the UpdatePanels, I can't get the CollapsiblePanelExtenders to work they way I need them to!

Any help would be GREATLY appreciated!

Thanks

Anyone have any ideas on this?

Maybe my post was confusing.

In a nutshell, I need to expand & collapse Collapsible Panels via code-behind, while the controls (GridView & FormView) in each of the Collapsible Panels are all in Update Panels. The buttons the use clicks to do this are inside the Grid- & FormViews.

Using triggers doesn't work (at least the way I have them set up) and removing the UpdatePanels makes the collapse/expand code work.

HELP!

Man, Ihate talking to myself!

I was really hoping someone would post something over the weekend with some suggestion on how to deal with this!

Anyone?

Once again I would greatly appreciate it if someone could help me out on this. This is a feature I'm trying to implement on a site for a customer, so it is very important to me (and the customer) to be able to get this working!

PLEASE HELP!

[BUMP]

Eventually someone's GOT to have some clue!

Microsoft guys, where the heck are you?!?!??!

I suspect that is has to do with the conditional update. try always.

Not too sure how these things work with multiple update panels as it seems an event is being fired from one panel and you are trying to update another.

Hey, GSpies, thanks for the suggestion, but originally I didn't specify the UpdateMode and I found out that the UpdatePanles default to Always, which, in the case of my page, defeats the purpose of the UpdatePanels in the first place. As I mentioned in my original post, I have a lot of information being loaded on the page, so I need to control partial page postbacks based on certain events (GridView databinding, button clicks, dropdown selections, etc.). With the UpdateMode on Always, the UpdatePanel is, obviously, Always updated!

No, it's something else. I'm also dealing with trying to get a validation summary control and validatorcallout controls to work on the page within UpdatePanels and that endeavor isn't looking too good either.

Seems UpdatePanels, though very useful in and of themselves, really cause havoc with some other controls!

seeing as I am still stuck on the idea that it wont update if it is conditional, and the button you click is not one of the triggers, I wonder if using a behaviorid for the panel is appropriate and trying to fire that behavior from code-behind

Not having any direct experience in this problem, but sort of understanding how these things work, I would investigate.

Hope this helps

Hey, GSpies

Here's some info on UpdatePanels from the ASP.NET Documentation at:http://www.asp.net/AJAX/Documentation/Live/mref/P_System_Web_UI_UpdatePanel_UpdateMode.aspx

"The content of anUpdatePanel control is updated in the following circumstances:

If theUpdateMode property is set toAlways, theUpdatePanel control's content is updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside otherUpdatePanel controls and postbacks from controls that are not insideUpdatePanel controls.

If theUpdatePanel control is nested inside anotherUpdatePanel control and the parent update panel is updated.

If theUpdateMode property is set toConditional, and one of the following conditions occurs:

You call theUpdate() method of theUpdatePanel control explicitly.

The postback is caused by a control that is defined as a trigger by using theTriggers property of theUpdatePanel control. In this scenario, the control explicitly triggers an update of the panel content. The control can be either inside or outside theUpdatePanel control that defines the trigger.

TheChildrenAsTriggers property is set totrue and a child control of theUpdatePanel control causes a postback. A child control of a nestedUpdatePanel control does not cause an update to the outerUpdatePanel control unless it is explicitly defined as a trigger."

GOT IT!!

Okay, the gist of it was, I had to include the collapsiblepanel controlsinside an updatepanel as well, setting the ChildrenAsTriggers property as true, and then explicitly using the update method from the code-behind:

aspx example:

<ajaxToolkit:TabContainer ID="tabcont1" runat="server"><ajaxToolkit:TabPanel ID="tabPersonnel" runat="server"><ContentTemplate><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><ContentTemplate><ajaxToolkit:CollapsiblePanelExtender ID="cpe1" runat="server" /><asp:Panel ID="Panel1" runat="server"><asp:Label ID="Label1" runat="server" /></asp:Panel><asp:Panel ID="Panel2" runat="server"><asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel3" runat="server"><ProgressTemplate></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:FormView ID="FormView1" runat="server"></asp:FormView></ContentTemplate></asp:UpdatePanel></asp:Panel><br /></ContentTemplate></asp:UpdatePanel><asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"><ContentTemplate><ajaxToolkit:CollapsiblePanelExtender ID="cpe2" runat="server" /><asp:Panel ID="Panel3" runat="server"><asp:Label ID="Label2" runat="server" /></asp:Panel><asp:Panel ID="Panel4" runat="server"><asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel4" runat="server"><ProgressTemplate></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="conditional" ChildrenAsTriggers="True"><ContentTemplate><asp:GridView ID="GridView1" runat="server"><Columns></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel></asp:Panel></ContentTemplate></asp:UpdatePanel></ContentTemplate></ajaxToolkit:TabPanel></ajaxToolkit:TabContainer>

And in the code-behind:

Protected Sub btnSaveClose_collapseCpeFormView(ByVal senderAs Object,ByVal eAs EventArgs)Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeFormViewcpeFmv.Collapsed =TruecpeFmv.ClientState ="True"Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeGridViewcpeGv.Collapsed =FalsecpeGv .ClientState ="False"updPnlPersGvOuter.Update()updPnlPersFmvOuter.Update()End SubProtected Sub btnEditMore_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim cpeFmvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeFormViewcpeFmv .Collapsed =FalsecpeFmv .ClientState ="False"Dim cpeGvAs AjaxControlToolkit.CollapsiblePanelExtender = cpeGridViewcpeGv.Collapsed =TruecpeGv.ClientState ="True"updPnlPersGvOuter.Update()updPnlPersFmvOuter.Update()End Sub

In the GridView there is a button (btnEditMore) to click which populates the FormView with the selected record. That collapses the GV panel & expands the FV panel.

Conversely, when the "btnSaveClose" button is clicked in the FormView, the FV panel is collapsed and the GV panel is expanded.

Hope that info save someone else from the hassel I went through getting this to work!

How do I change mouse pointer for DragPanelExtender?

Hello,

I have DetailsView inside UpdatePanel, when I hover my mouse over title it changes mouse cursor like I'm trying to type something )(

How can I prevent this or what is the best way to give that panel "draggable" look? Also how do I automatically position this window next to specific button on my HTML form?

Thanks,

It seems like you could do this by applying the CSS cursor property to the relevant parts of your page:http://www.w3.org/TR/CSS21/ui.html#cursor-props.

How do I change a labels text (twice) in an UpdatePanel?

Hey,

I would like for a user to click an 'Add to Cart' Button, a message appears 'Adding Item to Cart ...', and then the message changes to 'Item added to Cart' when finished. I have under the AddToCart_Click event changing the label to 'Adding to Shopping Cart ...' then the code to actually add the item to the shopping cart and then changing the label to 'Item added to Cart.' However, only the last label is seen (Item added to Cart). Any suggestions on how to do this? Should I use 2 Update Panels? Or, how do I tell it to display both labels?

Thanks,
Beej

I am not sure about this, but please check Update progress or timer control from Ajax.Net. It may help you.

regards

Anuraj.P

I would suggest using the UpdateProgress component from the AjaxControlToolkit. What you specify in the ProgressTemplate tag of the UpdateProgress control will be visible during the callback, in your case the message 'Adding item to cart...'

SplashMan:
Hey,
I would like for a user to click an 'Add to Cart' Button, a message appears 'Adding Item to Cart ...', and then the message changes to 'Item added to Cart' when finished. I have under the AddToCart_Click event changing the label to 'Adding to Shopping Cart ...' then the code to actually add the item to the shopping cart and then changing the label to 'Item added to Cart.' However, only the last label is seen (Item added to Cart). Any suggestions on how to do this? Should I use 2 Update Panels? Or, how do I tell it to display both labels?

Thanks,
Beej

hi,

Subscribe to add_beginRequest and add_endRequest events of the Sys.WebForms.PageRequestManager like so:

hth

Saturday, March 24, 2012

How do I add a popup window within an AJAX UpdatePanel

Hi, I am new to AJAX and trying to figure out the following:

I am trying to display a popupwindow within an AJAX UpdatePanel, but when I used the following code with ajax no popup window appears. When I take it out of the update panel it works fine.

Any help would be much appreciated! Thanks.

PublicSub DisplayMessage(ByVal objPageAs System.Web.UI.Page,ByVal messageAsString) 'Replace end of line characters with JavaScript \n newline character. message = Replace(message, vbCrLf,"\n") message = Replace(message, vbCr,"\n") message = Replace(message, vbLf,"\n") message = Replace(message,"""","\""") 'Replace ugly database tags with (slightly) more meaningful text. message = Replace(message,"[DataDirect ADO Sybase Provider]","Sybase Error:") message = Replace(message,"Native Warning code","Error #:") Dim pageTypeAs Type = objPage.GetType() Dim displayNameAsString ="displayMessage" Dim csAs System.Web.UI.ClientScriptManager = objPage.ClientScript If (Not cs.IsStartupScriptRegistered(pageType, displayName))Then Dim displayTextAsString ="alert(""" & message &""");" cs.RegisterStartupScript(pageType, displayName, displayText,True) EndIf EndSub

#########################################################################

The above code is getting called from the below code.

IfNot IsDate(txtStartDate.Text)Then

DisplayMessage(Page,"Please enter a valid start date.")

ReturnFalse

EndIf

unfortunently, when firing server side functions from inside an updatepanel, it cannot make changes to the page, only to objects on the page that are inside the updatepanel. With this said, trying to write a startup script or any type of javascript block from a updatepanel partial postback will not work, probably for the same reason you cannot use the response.write method. You will either need to deal with the full page postback or handle the popup window in the javascript events.

-ALan

Hi,

to inject JavaScript during a partial postback, you should use the RegisterXXX methods of the ScriptManager control.

Hi Garbin,

Even I' looking for a similar kind issue. and I tried your suggestion, but not getting it properly. I'm getting an exception like

The Script tag registered for tpe 'ASP.sections_events_myPage_aspx' and key 'Key' has invalid characters outside of the script tags: alert();. Only properly formated script tags can be registered.

In the code behind I'm calling the function as

ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType(), "key", "alert();", False)

I think my parameters are not right. Can you give an example of this function or explain its parameters. I saw the doc on msdn but did't understand it perfectly.

Thanks,

Mehul Mistry

Hi,

Can you please check the following...

Dim script As String = "function test()" & _
" { " & _
" alert('test');" & _
" } "

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "TestFunction", script, True)

I did the above stuff in the method which is called on asyncronous callback in AJAX. It gets executed but there is no alert() msg displayed...

Is this the correct way to do it?

Thanks,

Mehul Mistry

Hiorlash,

I think I figured out the solution.Its working for me. For your situation, What you can do is make a small js file or if you have one then add your window opening javasript function inside the js file. ( Make your javascript function take one string parameter to display your msg from code behind, Like you are doing above ).

Now in you aspx page, you must be having ScriptManager. add one element to the script manager... as follows,

<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="MyJavascriptFile.js" />
</Scripts>
</asp:ScriptManager>

and in the code behind, whichever method is called by the asyncronous call of AJAX, call your function as...

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "OpenWindow", "fnOpenWindow('myMsg');", True)

This should do the job. Its working for me.

Any better ideas and comment are always welcome :-)

Hiorlash,

Above thing works great... Alternately if you don't want to create a js file then then add your javascript function in your aspx page only in the head section as

// or you can use alert

// alert(myMsg);
}
</script>

and in the DisplayMessage function after you build your message string call the function as

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "OpenWindow", "fnOpenWindow(' " & message & " ');", True)

This will also work.

Thanks Mehul,

That works great for me now.

Thanks again,
Orla

Hi, sory to pick up the conversation, but i've got the same problem.

Putting the Javascript on an .JS at the head of the control worked for me. The thing is that i'm using a composite control and i had the javascript inside it. By taking the code and creating an .Js i'm creating dependencies for it.

Is there any way to create the .js, but keeping it inside the composite control?

Thank you.

How catch updatepanel in client?

When back button pressed in browser, updatepanel updates again...

I need catch updatepanel content in client...

can i?

I have an UpdatePanel that update in client with delay. i need catch content of this UpdatePanel in client, because this content is shared in all pages.

Best sample for resolving this problem is Yahoo Mail... update panle update all contet in all CallBack... i need catch contents in client...

Please help me... tnx

i need help Confused

plz......

How can we update a table row using updatepanel?

How can we update a table row using updatepanel? In my example, The whole table is being updated.

asp:UpdatePanelID="upLevel1"runat="server"UpdateMode="Conditional">

<ContentTemplate>

<tableborder="1px"><tr><tdstyle="font-size: medium"><asp:LinkButtonID="LinkButton5"runat="server">LinkButton</asp:LinkButton>

=DateTime.Now %></td><td>

=DateTime.Now %></td></tr><asp:UpdatePanelID="upLevel2"runat="server"UpdateMode="Conditional">

<tr><tdstyle="font-size: medium"><asp:LinkButtonID="LinkButton7"runat="server">LinkButton</asp:LinkButton>

=DateTime.Now %></td><td>

=DateTime.Now %></td></tr></ContentTemplate></asp:UpdatePanel><tr><tdstyle="font-size: medium"><asp:LinkButtonID="LinkButton6"runat="server">LinkButton</asp:LinkButton>

=DateTime.Now %></td><td>

=DateTime.Now %></td></tr></table>

</ContentTemplate></asp:UpdatePanel>

the whole table gets updated because your table is inside the updatepanel. which table row do you want to update? and i assume clicking those Linkbutton will update your row?

Hello,

it seems that you have updatepanels as a direct child of a <table>. This will result illegal markup (rendermode of updatepanel doesn't matter)...

You need something similar which yields to valid markup and I think should works:

<tr><td>Updatepanel here</td></tr>
<tr><td>Updatepanel here</td></tr>
<tr><td>Updatepanel here</td></tr>

In the real app that we are working, the table contains a lot of controls(labels, Input Controls, Grids) and a business rule needs to update a row. I'm trying to optimize the performance especially minimizing the response size to increase the speed of the transmission from server to client.

In my example below, the upLevel2 does not work. I guess update panel does not work in this way. I hope you guys can give me a fix/suggestion on how to best implement this.

Thanks

<asp:LinkButton ID="LinkButton8" runat="server" OnClick="LinkButton8_Click">Toggle 2nd Row Visibility</asp:LinkButton>
<asp:UpdatePanel ID="upLevel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table border="1px">
<tr>
<td style="font-size: medium">
<asp:LinkButton ID="LinkButton5" runat="server">Update Table </asp:LinkButton>
<%=DateTime.Now %>
</td>
<td>
<%=DateTime.Now %>
</td>
</tr>
<asp:UpdatePanel ID="upLevel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<tr runat="server" id="tr2">
<td style="font-size: medium">
<asp:LinkButton ID="LinkButton7" runat="server">Update this Row</asp:LinkButton>
<%=DateTime.Now %>
</td>
<td>
<%=DateTime.Now %>
</td>
</tr>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton8" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<tr>
<td style="font-size: medium">
<asp:LinkButton ID="LinkButton6" runat="server">Update Table </asp:LinkButton>
<%=DateTime.Now %>
</td>
<td>
<%=DateTime.Now %>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

protected void LinkButton8_Click(object sender, EventArgs e)
{
tr2.Visible = !tr2.Visible;
}

for your LinkButton8 to work, you need to add a Trigger to your UpdatePanel:

<asp:UpdatePanelID="upLevel1"runat="server"UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTriggerControlID="LinkButton8"EventName="Click"/>
</Triggers>
...

Every row that you want to update independently, you need to put it in its own Updatepanel. The link button needs to be outside and set the trigger to it. LinkButton8 is a good example that you can follow.

The updatepanel renders as a div or a span element. Because the div and span is an illegal child of the table element, I think your sample won't work. Put the updatepanels inside the td elements. If you want to use updatepanel for hide/show, remove,add or update acomplete tr , I suppose that is not possible (I'm not sure about this, but seems logical). However you can achieve this using javascript or you can change the page layout (do not use table, use divs instead of).

( Currently your example renders the following illegal html:

<table>

<div> <-- not valid html, rendered by the upLevel2 updatepanel

</div>

</table> )

How can I use updatepanel to do a partial page update of the contents of a division (div).

Hello,

I am new to AJAX and know I must be missing the obvious with this question. I would like to dynamically change the HTML content between opening and closing HTML DIV tag. The partial page update examples that I have seen, update controls rather than content such as HTML with in a division. The example used to illustrate the problem is trivial. In my actual application, the updated content will actually come from a database and include HTML tags.

Thanks in advance for your assistance.

The following steps lead to an example of my question:

Start a new AJAXEnabled Web Application using Visual Studio 2005.

In design mode, drag an Updatepanel from the AJAX Extensions tools to the designer.

Drag a DIV from the HTML Tools to the Updatepanel.

Drag a Button from the Standard Tools to the Updatepanel, but outside the DIV box.

Switch from Design to Source Mode and type the following line between the Opening and Closing Div tags:
This is the link displayed when the page is loaded: <ahref="http://www.someplace.com">someplace</a><br/>

Here is all of the generated code up to and including step 6:

<%@dotnet.itags.org.PageLanguage="vb"AutoEventWireup="false"CodeBehind="Default.aspx.vb"Inherits="AJAXEnabledWebApplication1._Default" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="ScriptManager1"runat="server"/>

<div>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<divstyle="width: 160px; height: 100px">

This is the link displayed when the page is loaded:<ahref="http://www.someplace.com">someplace</a><br/>

</div>

<asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Looks like duplicate post

http://forums.asp.net/t/1125367.aspx

How can I use Fileupload with Atlas

Helle somebody,

well I find that fileupload don't work with updatepanel of atlas, so someone khow how

it′s possible to solve this problem?

Thanks

Kisma

Hi Kisma,

Check this out -

http://forums.asp.net/1356600/ShowThread.aspx#1356600

Goodluck,

ulchris

Wednesday, March 21, 2012

How can I tell when an updatepanel has finished updating?

Hi,

Hopefully this is a simpe question! I have a couple of UpdatePanels on my page, and at the top a "Save all" button that calls the "Update" method on each of these updatepanels which gets them to save their contents. Immediatly after doing the updates, I need to render a graph of the data. The problem I have is that the UpdatePanel "updates" are all asynchronous, so my graph doesn't always pick up the newly saved information - because its still being saved while the graph is created.

What I need to do is either get the UpdatePanels to update synchronously, or have some way to fire server-side code once they have finished.

Is this possible?

Thanks!

Matt

Why not update the graph at the end of your "Save all" event handler, if that's what it is you want to do?

Hi,

You cann't process multi-Asyncpostbacks at the sametime, You can process them one by one when you click "Save all".

Following is a demo:

<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label1.Text = "The time is: " + DateTime.Now.ToString();
}
protected void Button2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label2.Text = "The time is: " + DateTime.Now.ToString();
}
protected void Button3_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label3.Text = "The time is: " + DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanelTutorialIntro1</title>
<style type="text/css">
#UpdatePanel1 {
width:300px; height:100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="padding-top: 10px">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Processing…
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label><br />
<asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Button" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
</div>
</form>
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
var thebutton;
function BeginRequestHandler(sender, args)
{
$get('UpdateProgress1').style.display = 'block';
thebutton = args.get_postBackElement();
thebutton.disabled = true;
}
function EndRequestHandler(sender, args)
{
$get('UpdateProgress1').style.display = 'none';
thebutton.disabled = false;
var str = thebutton.id
if(document.getElementById("Button" + (parseInt(str.substring(6, str.length)) + 1)))
document.getElementById("Button" + (parseInt(str.substring(6, str.length)) + 1)).click();
}
</script>
</body>
</html>

Best Regards,

Thanks very much. Your example shows me that I can call the buttons "click" manually using the EndRequestHandler, to then go and call the next one. I think I can use that information to achieve what I was after :)

I have a similar situation. You'll have to register two events EndRequest, InitializeRequest and queuing system.

Please refer tohttp://forums.asp.net/p/1167326/1944939.aspx#1944939 for the code example.

Let me know if this helped.

how can i restate the focus inside updatepanel

hi,

i have several web controls inside a update panel. But i don't know how to set it so that right after my page come back from a callback, it will lost the focus. i tryed .focus() in asp.net, but it doesn't work... help anyone?

Alan,

after the focus method, try the upatepanel's Update() method.

it should work, although, i hide the same headache.

lblRowCount.Text = gridview1.Rows.Count.ToString();

txtProduitID.Focus();

pnlProduit.Update();

in this sample code, txtproduitID is the textbox where i type in the product code. and pnlProduit is the update panel.
this works for me.

regards,
formationusa

I tried that but it didnt work. Here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void btn_Click(object sender, EventArgs e) { txt1.Text = DateTime.Now.ToString(); txt1.Focus(); up2.Update(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="scriptmanager" EnablePartialRendering="true" runat="Server" /> <atlas:UpdatePanel runat="server" ID="up2" Mode="Conditional"> <ContentTemplate> <asp:TextBox runat="server" ID="txt1"></asp:TextBox> <asp:Button runat="server" ID="btn" Text="Button" OnClick="btn_Click" /> </ContentTemplate> </atlas:UpdatePanel> </form></body></html>

Can you tell me what im doing wrong?

your syntax is correct, it seems to be something which will need more time. i tested your sample, and got the same problem. Also, in the forms i worked on, I have different conditions for setting the focus on the textboxes.
I will keep checking on this problem in more detail.

if others experience the same, please post.

regards,
formationusa

I have the same problem, but I want to set the focus AFTER the UpdatePanel has returned because it is adding the field I want to focus. I've tried using a client-side timeout to wait for the UpdatePanel to finish, but the time would change from one browser/client to another.

Is there a way to tell an UpdatePanel to execute a client-side method after it has updated?

setting the focus in AJAX seems to be working with Fireworks and not IE, please will that be fixed for future releases as its very crucial to have working properly for data entry Web pages.
Sorry, I meant Firefox browser and not fireworks, my apology.

Wednesday, March 28, 2012

How do I use javascript to force an UpDatePanel to Update

HOW DO I update a control from outside the updatepanel

How do I trigger an UpdatePanel from the ItemCommand event of a data-bound Accordion?

How do I set off a process and display UpdatePanel on page load

How Do I Reset Scroll Position Inside UpdatePanel?

How do I recognize dynamic buttons as triggers for updating updatepanels?

How do I invoke a suitable event on the client?

Monday, March 26, 2012

How Do I Dynamically Load Pages Into An UpdatePanel

How do I dynamically create updatepanel and then contenttemplate linkbutton and triggers a

How do I Display an Animated GIF when afile is uploaded?

How do I collapse collapsible panels in UpdatePanel from code-behind?

How do I change mouse pointer for DragPanelExtender?

How do I change a labels text (twice) in an UpdatePanel?

Saturday, March 24, 2012

How do I add a popup window within an AJAX UpdatePanel

How catch updatepanel in client?

How can we update a table row using updatepanel?

How can I use updatepanel to do a partial page update of the contents of a division (div).

How can I use Fileupload with Atlas

Wednesday, March 21, 2012

How can I tell when an updatepanel has finished updating?

how can i restate the focus inside updatepanel

Going For AJAX

Blog Archive

About Me