Showing posts with label update. Show all posts
Showing posts with label update. Show all posts

Wednesday, March 28, 2012

How do I wire a javascript function to an update panel so it fires when the panel is updat

I have a list of location in an update panel and a virtual earth map w/ pushpin's representing each of the locations. My update panel works great for paging through the location list using some custom paging where a the panel updates when the paging buttons are clicked. What I'd like to be able to do though is wire up an event handler to the update panel so when it refreshes, my javascript function can make a page method call and get new set of pushpins to display on the virtual earth map.

a) How do I get a reference to the update panel in javascript?

b) What is the update panel event that I wire a call back method to?

Thanks!

Hi there, you can accomplish this by hooking up a client side event handler to the PageRequestManager pageLoading event. The event args will indicate the list of UpdatePanels that are getting refreshed, you can inspec the array and if the UpdatePanel that you are interested in is being refreshed call your function.

More info here:http://ajax.asp.net/docs/tutorials/usingMsAjaxLibrary/default.aspx

Thanks,
Federico


Federico,

Thanks for the reply. Because the ASP.NET forums are moderated, I literally just figured it out before receiveing your reply. The PageRequestManager in Beta 1 is awesome!

- James


Hi Frederico

Your link appears to be broken - do you happen to know a working link for this topic ?

Thanks,
Richard

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 text in a panel using ajax and a timer?

This is a pretty basic question, I just need to update a textbox every few minutes without using a postback. The text is pulled from a sql query. Is there a example for how to do this somewhere? (simialar to how gmail updates, etc...)

Take a look at this: http://encosia.com/index.php/2007/07/25/display-data-updates-in-real-time-with-ajax/

If you're only updating a simple text label, you could skip the UpdatePanel in my example andupdate that text on the client side, using a web method.

A combination of those two examples should give you what you're after.


Thanks for providing links.

How do I update a panel on page load?

I am sure it's something dumb.

Using the december preview. How do I update a panel on page load without a timer or a button? Obviously I want this done after the page loads and renders.

Thx
dB.

You can call the Update method on UpdatePanel.

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 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 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>

<!-- Next Panel -->

<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.

Monday, March 26, 2012

How do I execute JS on page load after postback within an update panel?

I am trying to scroll the page after it loads between postbacks within an Update Panel. I used to have this work with beta 1

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<application load="onAutoScrollControlLoad" />
</components>
</page>
</script>

I am not sure how I came up with this, but it doesn't work with Beta 2 any more. Any ideas of how to implement the same functionality?

Thx
dB.

found a solution for this -http://forums.asp.net/thread/1418207.aspx

<scripttype="text/javascript">
function onAutoScrollControlLoad() { window.location.href ='#<% Response.Write(ScrollLocation); %>'; }
Sys.Application.add_load(function() { onAutoScrollControlLoad(); });
</script>

How Do I Dynamically Update a TabPanel?

New to Ajax, .net and dotnetnuke. I'm trying to figure out something with TabContainers/TabPanels. I want to be fill some form fields on one TabPanel of a TabContainer based on the selected item in a DropDownList on another TabPanel.

Suppose I have something like the code that follows and wanted to put the selected value from the drop down list on Tab 1 into the text box on Tab 2. How would I do that? I am not sure how to access fields on a sibling tab.

Any help would be greatly appreciated.

<asp:UpdatePanel ID="up1" runat="server">

<cc1:TabContainerID="TabContainer1"runat="server"Visible="false">

<cc1:TabPanelID="TabPanel1"runat="server">

<HeaderTemplate>Tab 1</HeaderTemplate>

<ContentTemplate>

<asp:DropDownListID="shopDropDownList"runat="server"

DataSourceID="ShopsDataSource"DataTextField="text"DataValueField="value"

OnSelectedIndexChanged="shopDropDownList_change"AutoPostBack="true" />

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanelID="TabPanel2"runat="server">

<HeaderTemplate>Tab 2</HeaderTemplate>

<ContentTemplate>

<asp:TextBox ID="TextBox1" runat="server" />

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</asp:UpdatePanel>

If you need to do this on the client, something like this should work for you:

<scripttype="text/javascript"language="javascript">function pageLoad() {var ddl = $get("<%=DropDownList1.ClientID %>"); $addHandler(ddl,"change", changeHandler); }function changeHandler(e) {debugger;var ddl = $get("<%=DropDownList1.ClientID %>");var tb = $get("<%=TextBox1.ClientID %>"); tb.value = ddl.value; }</script>
 
-yuriy


Hi bob,

Here is a simple sample. Hope it helps.

ASPX Code

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TabTest.aspx.cs" Inherits="Tab_TabTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>Tab1</HeaderTemplate>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>Tab2</HeaderTemplate>
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

C# Code

using System;using System.Data;using System.Configuration;using System.Collections;using System.Collections.Generic;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass Tab_TabTest : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { List<int> myList =new List<int>(); myList.Add(1); myList.Add(2);this.DropDownList1.DataSource = myList;this.DropDownList1.DataBind(); } }protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) {this.TabContainer1.ActiveTabIndex = 0;this.Label1.Text =this.DropDownList1.SelectedValue; }}

If I misunderstood you, please let me know.


Hi

the provided code works fine for me (it does asynchronous postback to the server and updates the label).

what do you need to change?

-yuriy


Yes. It helps a lot. Thanks.

Saturday, March 24, 2012

How do i access controls inside the update progress or update panel.

How do i access controls under the update progress or update panel.

I have 1 Update progress then i want to access the label inside the update progess. I want to change the text property of the label when my edit image button allter it. thanks

You will need to find the control recursively. However, the FindControl method will not find controls recursviely. Use this cool method FindControlRecursive(Control root, string id) by Jeff Atwood. The reason you cant access them otherwise is because they are child controls. Visit Jeff Atwoods article athttp://www.codinghorror.com/blog/archives/000307.html I use that to find controls. Once you find the control you will need to cast it to the type of control it is. Example:

TextBox tb = (TextBox)FindControlRecursive(Page,"txtNameOfControl");

tb.Text ="Hello there";

The above is an example as if you were finding a textbox.

Let me know if you need more help!

John


hello.

well, yes and no. for updatepanels, you don't need to use findcontrol since the controls are injected on the page as fields (which means you can simply use its id to get a reference to them)

regarding the updateprogress, things get a little messy. here's an example that shows how to change it during a full postback:

<%@. 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">
void E(Object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}

private Boolean update = false;

void J(Object sender, EventArgs e)
{
update = true;
}

protected override void Render(HtmlTextWriter writer)
{
if (update)
{
Label lbl = (Label) progress.FindControl("lbl");
lbl.Text = DateTime.Now.ToString();
}
base.Render(writer);
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="panel">
<ContentTemplate>
<asp:Button runat="server" id="bt" text="partial postback" OnClick="E"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" text="full postback" OnClick="J" />
<asp:UpdateProgress runat="server" ID="progress" AssociatedUpdatePanelID="panel">
<ProgressTemplate>
<asp:Label runat="server" id="lbl" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>


Acutally I am trying to recall my orginal issue and why I used FindControlRecurvively and I beleive it was because I had a Drop Down List in a custom server control which was in an tab panel. The version of Ajax.net at the time had an issue with doing that and it throwing a null reference. This was some months ago so I don't recall all the logistics:

If you use FindControl to access a control inside a TabPanel, it throws a NullReferenceException.This behavior appears in the 10606 release10301. If you compile the same application with the March release (10301) it works well.
http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=11168


hello again.

ok, fair enough. but regarding the controls you've asked about (updatepanel and udpateprogress) my previous observations are correct.


Thanks for the reply, it works I've just create a new instance of label then assign the findcontrol to it.

dim lbl as label

lbl = updatepanel1.findcontrol("label1")

lbl.text = "hello"

thanks


hello again.

hum...why are you doing that? I mean, the controls declared inside an updatepanel are also inserted on the page as fields so you can only use its id to get them (this is not true for controls that are inside an updateprogress control)


Thanks for concern, I try it but it does not work, for example i have label1 inside the updatepanel1. So how do i access the label1 and change the text property?

Can you teach me how... Thanks again...


hello.

well, you just use its id:

label1.Text = "something";

do keep in mind that this code will only work if you're using it frmo the same page or user control that has the updatepanel which has the label inside...


Dim pwdAs ChangePassword

pwd = updatePanel1.FindControl("ChangePassword1")

pwd.Visible =True

This worked for me too, thanks guys.

Sasanka Pinidiya

How do i abort Ajax TabContainer Tab Change?

I have a Ajax TabContainer that has 3 tabs and each of the tab contains a formview to display/update data. When the user modifies any data in the edit mode in the formview and tries to change tab without updating the data, i would like to display a warning message to alert the user that he/she has some unsaved data in the form and abort the tab change. I sort of have an idea how to do it but somehow it's giving me a runtime javascript object reference = null runtime error on sender.set_activeTabIndex(0); in tabChanged(). Can someone help please? Thanks.

Current Code:

<script type="text/javascript">

var isDirty = false;

var prevTabIndex = 0;

function tabChanged(sender, args)

{

if (isDirty)

{

sender.set_activeTabIndex(0);

prevTabIndex = parseInt(sender.get_activeTabIndex());

}

}

function setDirty(objID)

{

if (document.getElementById(objID).value != document.getElementById(objID).defaultValue)

{

//alert("Old Value: "+document.getElementById(objID).defaultValue+", New Value: "+document.getElementById(objID).value);

isDirty=true;

}

}

</script>

<cc1:TabContainerID="TabContainer1"runat="server"Width="818px"Height="260px"ActiveTabIndex="0"OnClientActiveTabChanged="tabChanged">

<cc1:TabPanelID="TabPanel1"runat="server"HeaderText="TabA">

<HeaderTemplate>TabA</HeaderTemplate>

<ContentTemplate>

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

<ContentTemplate>

<asp:FormViewID="fvA"runat="server"DefaultMode="readonly"DataSourceID="dsA"OnModeChanging="changeFormViewMode">

<ItemTemplate>

FieldA :<%# Eval("FieldA") %>

</ItemTemplate>

<EditItemTemplate>

FieldA:

<asp:TextBoxID="TextBoxA"runat="server"Text='<%# Bind("FieldA") %>'onchange="setDirty(this.id)"></asp:TextBox>

</EditItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanelID="TabPanel2"runat="server"HeaderText="TabB">

<HeaderTemplate>TabB</HeaderTemplate>

<ContentTemplate>

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

<ContentTemplate>

<asp:FormViewID="fvB"runat="server"DefaultMode="readonly"DataSourceID="dsB"OnModeChanging="changeFormViewMode">

<ItemTemplate>

FieldB :<%# Eval("FieldB") %>

</ItemTemplate>

<EditItemTemplate>

FieldB:

<asp:TextBoxID="TextBoxB"runat="server"Text='<%# Bind("FieldB") %>'onchange="setDirty(this.id)"></asp:TextBox>

</EditItemTemplate>

</asp:FormView>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</cc1:TabPanel>

Hi Sazabi,

After a quick glance, I found that there maybe a endless loop in your code. When you change the actived Tab, it will raise OnClientActiveTabChanged event and there's set_activeTabIndex() in your code, then it will raise OnClientActiveTabChanged once more.

You should do some modification. For example:

var flag = false;
function tabChanged(sender, args){
if(flag) {flag = false; return;}
flag = true;
sender.set_activeTabIndex(0);
prevTabIndex = sender.get_activeTabIndex();
}

Best regards,

Jonathan

How do add a click handler to a Button in Beta 1?

Hi All,

I must say I'm finding the move to Beta 1 frustrating.. Love to see documentation for something other than update panels :)

Can someone give me a hand with a simple UI event handler?

My Script Manager declaration looks like this:

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

<Scripts>

<asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js"/>

<asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js"/>

<asp:ScriptReferenceAssembly="Microsoft.Web.Preview"Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js"/>

</Scripts>

</asp:ScriptManager>

Problem code :

findButton =new Sys.Preview.UI.Button($get('FindButton'));

findButton.click.add(onFindLocation); // this line fails

Cheers!

Tim

Hi,

findButton.add_click(onFindLocation);

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">
<ContentTemplate>
<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>

<tr> ... </tr>

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

<tr> ... </tr>

</div>

<tr> ... </tr>

</table> )

How can we access a control outside the update panel with an control inside the update pan

Take a very simple example, i have a button inside the update panel along with other controls and i have a textbox on the page.What i want is that when i click the button inside the update panel,it should update the textbox which is present outside the update panel.How can i do this?

To my knowledge you cannot update any control outside of the update panel. If you want to update the control move it inside the update panel.

Do you want to modify the text box with server-side code? If so, put it in its own UpdatePanel. Set the UpdateMode on the panel to Conditional. Then you can either add the button in the other UpdatePanel as an AsyncPostBackTrigger to the new UpdatePanel or invoke the Update method on the new UpdatePanel in your button's Click event handler.

If you want to modify the text box on the client, you're going to have to write JavaScript.


Can you please tell me what javascript should i write for the sition i mentioned in the above example.

I am not getting the idea using javascript for a control inside the update panel.


Are you sure you need to write JavaScript? I gave you the steps to modify the text box using purely server-side code by using a second UpdatePanel control. I highly recommend you read theUpdatePanel tutorials and then re-read what I suggested. This path doesn't require JavaScript, but does require a round-trip to the server which is where your code will be executing.

If you do need to use JavaScript, you're going to need to handle the button's click event, modify the other control, and then prevent the default action for clicking the button from occurring (if necessary). This would all be done on the client so wouldn't require a round-trip to the server, but involves learning JavaScript and the DOM API (which you should want to learn as a web developer, anyways).


i have read it but still i feel i need javascript.Can u help me?

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/>

    Switch from Source Mode Back to Design Mode and observe that there is a line of text ending with a hyperlink in the DIV element box reading "This is the link displayed when the page is loaded: someplace". (someplace is a hyperlink)How do I code the button click event to change the content between the opening and closing DIV tag. For example, suppose I the following to be displayed: "This is a different link: somewhere else". (somewhere else is a hyperlink)

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">

<ContentTemplate>

<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

Wednesday, March 21, 2012

how can i use a textbox with an update panel during textchange

the case is, everytime the textbox will be change it will trigger a process wherin it will look for the data in the databse, after that it will display the data to a grid. the textbox & grid are place inside the update panel. It's just I only want that portion to be refreshed.

When an update panel posts the page back - your entire page is reloaded on the server. The client however only redraws the portions you've specified inside the update panel.

To accomplish this, and fire off the ontextchanged event you're looking for - set your textbox like this

<asp:textbox id="txtSearch" runat="server" autopostback="true" />

Now keep in mind, that this will only fire when the textbox looses focus.

How can I update a detailsview from a gridview in Atlas?

Hi, I have a gridview and a detailsview. The gridview takes a value from a textbox and retrieves rows. It has been atlas enabled and works fine. Now I want to take a value from the gridview and populate the detailsview. I have an asp:commandfield in my gridview for select, but everytime I click it is causes a postback. I don't want a postback (that's the whole reason for atlas). I don't believe I doing this correctly, my design. Also, all my detailsview "stuff" is in an updatepanel for atlas.

Any help is appreciated on how I can populate a detailsview based upon a gridview in atlas. Thanks.

Isn't this a common practice in non-atlas applications? Clicking a row in a gridview and populating a detailsview or formsview?

You need to set the Datakey on the gridview to the ID field of your datatable (hopefully you have one). Then set the datasource on the details view and configure the input parameter to be a control and pickup the Datakey from your gridview. This is a standard master detail setup, you can find good documentation on this in the VS 2005 documentation.(ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.VisualStudio.v80.en/dv_vwdcon/html/e3ab20ae-44c3-43f0-91f3-0f95fff47b48.htm).

I'm guessing the Atlas part of this is the fact your page is doing postbacks. So you need to put an updatepanel around the gridview and another around the detailsview? Then put a trigger on the detailsview updatepanel to point at the griview and the "SelectedIndexChanged" event.

Hope this helps


I am doubtful that the server side UpdatePanel control will provide what you are looking for. However, Atlas provides two client side controls ListView and ItemView which are exactly designed for your scenario.


Xiyuan Shen:

I am doubtful that the server side UpdatePanel control will provide what you are looking for. However, Atlas provides two client side controls ListView and ItemView which are exactly designed for your scenario.

Thank you. I will try it. But this does kind of get rid of my nice drag and drop abilities doesnt it?


you can bind a dragDropList behavior to the ListView and a dataSourceDropTarget to the ItemView to achive the DND

Xiyuan Shen:

you can bind a dragDropList behavior to the ListView and a dataSourceDropTarget to the ItemView to achive the DND

Sorry, I should have been clearer. I was referring to the drag and drop controls of Visual Studio 2005. I paid $800 for it. I don't like not being able to use it like the other controls. Hopefully, there will be a way to add drag and drop Atlas controls in the IDE's toolbox one day.


Checkout Scott Guthrie's video athttp://atlas.asp.net/Default.aspx?tabid=47

It's an excellent tutorial on getting started with Atlas. It combines GridView and Details View, with some filtering. You can also download for offline viewing.


petehbourne:

Checkout Scott Guthrie's video athttp://atlas.asp.net/Default.aspx?tabid=47

It's an excellent tutorial on getting started with Atlas. It combines GridView and Details View, with some filtering. You can also download for offline viewing.

I have watched it, but could not see where he selected a value in the gridview and populated a detailsview. He did it the other way around it looks like.


Hopehttp://forums.asp.net/thread/1247115.aspx can provide you some help

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.