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!

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

<script type="text/javascript">
var aTxt = ['<%txtEquities.ClientID%>','<%txtFixedIncome.ClientID%>'];
function restoreTextBox(){
for (var e=0; e < aTxt.length; e++){
var txtBox = document.getElementById(aTxt[e]);
if (txtBox.value == '')
txtBox.value = '0';
}
}
</script>

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

How can I reset the AJAX Timer component if the mouse is moved!

I have a few pages that use UpdatePanels and Timer components to refresh the content periodically. However I need to have it refresh only when the mouse hasn't been moved for a minute so it doesn't interrupt the user.

I have been using a javascript timer to refresh a custom component that uses callbacks but it is interfering with the AJAX UpdatePanel and causing State Corruption so I would like an all AJAX solution if possible.

Question 1: Can mouse movement reset an Ajax Timer, if so how?

Question 2: Is there a way to trigger the UpdatePanel from Javascript?

1. Use the method show here to get a refrence to the behavior for the timer, thenhttp://ajax.asp.net/docs/ClientReference/Sys.UI/BehaviorClass/BehaviorGetBehaviorsByName.aspx, call

Sys$UI$_Timer$_stopTimer & then this

Sys$UI$_Timer$_startTimer

Not sure if that will work exactly, but, through that or somthing similar you should be able to manipulate the timer on the client side.

2. Take a look at this post, it has a few differnt examples of how to do an update from javascript:http://forums.asp.net/thread/1541012.aspx

Thanks for the help there. I now need to figure out which behaviour name to look for in the timer, i guess?

Easily referencing behavior instances

It used to be tricky to get a reference to a behavior from client script, but now you can simply add a "BehaviorID" attribute to your control's property specification and it will be easily accessible on the client via ASP.NET AJAX's Sys.Application.findComponent(id) method or its $find(id) shortcut. (Note: If BehaviorID isn't specified, the behavior's ID on the client will be the same as the extender control's ClientID.) See DynamicPopulate or ResizableControl for examples.

I guess I should have added... that its used for the AJAX toolkit, so you might not be able to specify the BehaviorID, but you still should be able to get it with the find method.

I have tried the following code but it doesn't change the timer, it still goes off after a minute:

code = "function MainMenuPage_onmousemove(){"
code += " var b = $find('" & MT.ClientID & "');"
code += " if(b){"
code += " mouse_moved=1;"
code += " b.Sys$UI$_Timer$_stopTimer;"
code += " b.Sys$UI$_Timer$_startTimer;"
code += " }"
code += "}"

Please excuse the code formatting above (I create strings of the code snippets I need for the page and then useRegisterClientScriptBlock)

I'm not receiving any Javascript errors when I move the mouse. I know it's finding MT.ClientID as I use another javascript timer to display the mouse_moved variable. Perhaps I'm not changing the actual instance of the timer? Wild guess here. I really need to have more time to study the nitty gritty bits of AJAX but as it is I hardly have time to do this much.

I appreciate your time on this. I hope you have more bright ideas because I'm fresh out.

I tested the below code & it seems to work ... notice how i removed the Sys$UI$_Timer$ from the method call and added a () at the end

 code ="function MainMenuPage_onmousemove(){"; code +=" var b = $find('" + Timer1.ClientID +"');"; code +=" if(b){"; code +=" mouse_moved=1;"; code +=" b._stopTimer();"; code +=" b._startTimer();"; code +=" }"; code +="}";

Awesome. That worked.

Thank you very much.

how can i make ajax work this way?

on my form, clicking on the navigation items on the left of screen will filter/refresh the gridview on the right hand side,

how can i achieve this using Ajax and not let the navigation items to reload themselves? (only the gridview refreshes)

Just make sure you only wrap the content you want to be dynamic with theUpdatePanel. That should be all you need. Start there and let us know if you're not getting what you want.

Thanks flanakin, in my applicaton, the dropdownlist has already been placed outside of UpdatePanel. the whole page reloads because the dropdownlist is "autopostback".

I found 3 lines of code that helped me to stop the whole page reload:

<Triggers>

<asp:AsyncPostBackTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/></Triggers>

I put the code inside the code of UpdatePanel, it worked, This can also be achieved by setting "Triggers" property of the UpdatePanel in design view