TreeView with ContentPlaceHolder

I have anapp that uses masterpages. On the masterPages I have a TreeView. I would like to only refresh the ContentPlaceHolder & not the Entire masterPage when a link is clicked on the treeView. Keep in mind I have updatePanel ajax on some of my ContentPlaceHolder (other forms).

Any1 knows how this can be done ?

please help peeps !!!

Trigger a panel refresh from javascript/pure html control

Hi,

I have a pure HTML tree control, that is outside of an ajax UpdatePanel. I want to write a JS function that triggers a particular panel to refresh, *as if* I hit a submit button inside of the panel. I don't want to put the HTML tree control inside an Ajax panel, as it will loose it's state (it will return to a completely collapsed state).

Putting a button inside the panel, and then running the JSelement.click() event from my tree control works in IE, but Firefox submits the entire page(the submit event is not captured by the AJAX framework in FF in this case,apparently).

I have looked into the client reference documentation at http://ajax.asp.net/docs/ClientReference/Global/default.aspx, and it seems like there should be a way to trigger a postback/panel refresh, but I have not found a way.

The PageRequestManager does not help, since it only monitors existing page requests. I need to invoke a page request, and run something like

PageRequest.Invoke('MyUpdatePanel');

or

var ajaxpanel = document.getElementById('AjaxPanelClientID');
ajaxpanel.update();

A related suggestion:

It would be nice if the UpdatePanel supported client side triggers, not just server side triggers. Consider the following hypothetical code:

<ajax:UpdatePanel ID="ajxUpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- CONTENT -->
</ContentTemplate>
<Triggers >
<ajax:AsyncPostBackTrigger ClientTriggerFunction="MyCustomTrigger" OnTrigger="MyCustomTrigger_ontrigger" />
</Triggers>
</ajax:UpdatePanel>

Then the system would automatically generate the JS function (with the appropriate .NET ajax framework calls that I don't need to know about), so I can call it anywhere on the page, from multiple HTML controls if needed.

<input type="button" value="MyHTMLButton" onclick="MyCustomTrigger('argstring');">

The system should enable a code-behind event handler where I can put my server side code:

protected void MyCustomTrigger_ontrigger(object sender, AjaxClientTriggerEventArgs e) {
//run some server side .NET code here
switch(e.ClientArgString){
...
}
}

You can trigger an asynchronous post back by invoking the __doPostBack function. Just pass in the ID of the control that's either inside an update panel or is marked as a trigger for one. Here's an example:

<asp:UpdatePanel ID="up" runat="server">
 <ContentTemplate>
 <asp:Button ID="myButton" runat="server" OnClick="myButton_Click" Text="Click me!" />
 <asp:Label ID="myLabel" runat="server" />
 </ContentTemplate>
</asp:UpdatePanel>
<input id="myOtherButton" type="button" value="No, click me!" />
<script type="text/javascript">
 function pageLoad() {
 $addHandler($get('myOtherButton'), 'click', triggerAsyncPostBack);
 }
 function triggerAsyncPostBack(e) {
 __doPostBack('<%= myButton.UniqueID%>', '');
 }
</script>

One thing to watch out for is that the first parameter to __doPostBack needs to be the full ID of the control. If you're using master pages, your control IDs will be longer than they appear. Use the UniqueID property to get the full ID or the event handlers for your control won't run on the server.

Also, if you have event validation turned on (the default), you'll get an exception if you don't pass in a correct event argument as the second parameter to __doPostBack. For button controls, it should be the empty string. For other controls, it might be different, but you'll have to experiment to find out.

Hope this helps.

Thank you Jason,

That is the behaviour I was looking for, and it works in Firefox as well as IE. I knew about the _doPostBack function in general, but I did not know the syntax to call it.

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

(I am familiar with similar functions from the prototype.js library).

Thanks again :-)

Another related discovery that is slightly more elegant (I am probably repeating what some already know...but I think its great :-)

Is is not necessary to use a button to trigger the post back inside the panel. I updated a hidden input field with a value, and then submitted thehidden field iteself with __doPostBack, and it worked great. I needed a hidden field to pass in a unique ID anyway, so the panel would know how to refresh itself.

Inside the UpdatePanel:

<input id="txtGroupID" type="hidden" runat="server" onserverchange="txtGroupID_ServerChange" />

JS code:

txt = $get("<%=this.txtGroupID.ClientID %>");
txt.value = somevalue;
__doPostBack("<%=this.txtMatGroupID.UniqueID %>","");

Douglas Smith:

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

The ASP.NET AJAX documentation does document all of these functions. You'd have to know where to look, though. All of the $-prefixed functions seem to be documented in the Sys.UI namespace here:

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

Browsing through the source code helps find the undocumented stuff.

That will trigger an asynchronous post back, but no event will be raised on the server with that control as the target. You probably want to execute some code to modify the controls inside the update panel or there'd be little point in triggering the asynchronous post back. That's why I used a button control in the example I gave you. If all you want to do is trigger the asynchronous post back and don't care about raising a specific event on the server, you could use the ID of the update panel control as the event target. To me, that would be stating the intention of what you're trying to do a little clearer.

If you don't want to use a button but do want to raise an event on the server, you can use any control that implements IPostBackEventHandler as the event target. Those controls have a RaisePostBackEvent method that gets invoked when a post back is received with their ID as the event target. For button controls, they raise their Click event in that method. That's where your code gets to do its stuff. You could easily create an "empty" custom control that didn't render anything, but could be used as the event target. (I tried using the page control for this, but there's code that prevents you from registering the page as an asynchronous post back trigger.)

It'd be nice if the UpdatePanel control itself implemented IPostBackEventHandler and raised some sort of custom event on the server that let you do this without having to write much custom code. You could simulate this a bit by putting some code inside one of the event handlers on your page and checking to see if the ScriptManager control's AsyncPostBackSourceElementID is the ID of the UpdatePanel control you used as the event target. If so, execute your custom code.

Hope this helps.

Trigger UpdatePanel using Javascript

Hi everyone, I'm trying to refresh an updatepanel using javascript.

What I did worked out, I put a hidden button inside my panel and set it as a trigger then called mybutton.click() in the javascript. The problem is that this doesn't work with firefox, a full postback happens when my function is called. Anyone know a work around that works fine in IE and firefox?

Thank you.

http://weblogs.asp.net/rajbk/archive/2007/01/21/refresh-updatepanel-via-javascript.aspx

Do you mind telling us what scenario you are using this in?

hello.

the strategy you're using seems to be correct. can you post some demo code?

Thank you for the replies, what i'm doing is I have a modalpopup on my page where a user uploads photos, then when the modalpopup is closed, I have the OnOkScript call the button click event and update my updatepanel which contains thumbnails of images, so when a person uploads a photo using the modalpopup, then closes it, the photo they added shows up on the list of thumbnails.

Here is a code sample...(i'm using a label not photos for testing now)

My Code Behind:

protectedvoid btnRefreshThumbnails_Click(object sender,EventArgs e)

{

lblTest.Text =

"event fired";

}

Javascript:

function

refreshImages()

{

document.getElementById(

'<%= btnRefreshThumbnails.ClientID %>').click();

}

Page Code:

<

asp:UpdatePanelrunat="server"id="upThumbnails"UpdateMode="Conditional">

<

ContentTemplate>

<asp:Labelrunat="server"Text="Label"id="lblTest"></asp:Label><asp:Buttonrunat="server"Text="abc"id="btnRefreshThumbnails"CausesValidation="false"OnClick="btnRefreshThumbnails_Click"style="display:none;"></asp:Button></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="btnRefreshThumbnails"EventName="Click"></asp:AsyncPostBackTrigger></Triggers>

</

asp:UpdatePanel><cc1:ModalPopupExtenderID="ModalPopupExtenderUploader"runat="server"OkControlID="imgBtnClose"DropShadow="false"TargetControlID="btnUploadPhotos"PopupControlID="pnlUploader"OnOkScript="refreshImages() "BackgroundCssClass="bg">

</cc1:ModalPopupExtender>

I'm going to give the hidden field method a shot to see if it works well in firefox...Thanks.

The hidden field worked!! Maybe firefox just always posts back when you call the click() method.

Thank you for all the help.

hello.

hum...well, this code is working ok here:

<%@. 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"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" id="manager" />
<asp:UpdatePanel runat="server" id="panel">
<ContentTemplate>
<%= DateTime.Now.ToString() %>
<asp:Button runat="server" id="bt" style="display: none" />
<input type="button" value="partial postback" onclick="$get('bt').click()" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html

Hire is my solution, that works in IE, FF, Opera:

<script type="text/javascript">function updateTime(param) { var hiddenField = document.getElementById("<%=hidCurrentFileId.ClientID%>"); hiddenField.value = param; __doPostBack('<%=hidCurrentFileId.ClientID%>','');}</script><asp:HiddenField ID="hidCurrentFileId" runat="server" Value="" /><asp:UpdatePanel ID="updPanel" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="hidCurrentFileId" EventName="ValueChanged" /> </Triggers> <ContentTemplate><%= hidCurrentFileId.Value%> <br/><%= DateTime.Now.ToString();%> </ContentTemplate></asp:UpdatePanel>

Hello, I have two questions about the above code:

1) How do you capture this event on the server?

2) If the "ValueChange" of the hidden field causes the updatepanel to post back, doesn't the "__doPostBack('<%=hidCurrentFieldID.ClientID%>',''); cause the ENTIRE PAGE to postback?

Trying to do the above from user controls doesn't work, but I got the above code working with some changes.

1) Added a 'return false;' after the __doPostBack...this stopped the full page postback

2) I placed the hidden field INSIDE the update panel and set a trigger with an OnValueChanged="myCodeBehindFunction"

3) In the code behind I retrieve the parameter passed in using:

Dim myArgumentAsString = Request.Params.Get("__EVENTARGUMENT")

4) I set the clientID in the preRender

The full code is:

ASPX...

<scripttype="text/javascript">function test1(node, eventArgs) {var hiddenField = document.getElementById('<%= hiddenFieldID %>');

hiddenField.value = node.Text;

__doPostBack(

'<%= hiddenFieldID %>',node.ID);returnfalse;

}

</script>

<asp:UpdatePanelID="updPanel"UpdateMode="Conditional"runat="server"><ContentTemplate>

<asp:HiddenFieldID="tbTrigger1"runat="server"OnValueChanged="handleNodeClick"/><asp:LabelID="lblNode"runat="Server"></asp:Label><br/>

<%

=DateTime.Now.ToString()%></ContentTemplate></asp:UpdatePanel>

------------------

Public hiddenFieldIDAsString =""

Sub handleNodeClick(ByVal senderAsObject,ByVal eAs System.EventArgs)

Try

Dim myArgumentAsString = Request.Params.Get("__EVENTARGUMENT")Dim tempLBLAs Label =CType(Me.FindControl("lblNode"), Label)

tempLBL.Text = myArgument

Catch exAs ExceptionEndTryEndSubProtectedSub Page_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.PreRenderTryDim tempHFAs HiddenField =CType(Me.FindControl("tbTrigger1"), HiddenField)IfNot tempHFIsNothingThen hiddenFieldID = tempHF.ClientIDCatch exAs ExceptionEndTryEndSub

I ran into the same problem and after searching I found the answer via a response Garbin gave someone on this thread.

http://forums.asp.net/thread/1275541.aspx

Adding the UseSubmitBehavior="false" then allowed the click() of the hidden button in javascript to work.

Try the extender control I build

http://daron.yondem.com

Trying to implement a thread queue for page with 6 update panels

I am attempting to write a FIFO thread queue for the dashboard portion of a portal application. There are 6 update panels that refresh independent of each other about every 60 seconds, so there are a lot of postback collisions and I need something to save postbacks and re-issue them when the callback from the prior async call is returned.

It looks like there has been quite a bit of effort put into this, but none of the code I could locate would work in my situation because of various "can't find id", "null reference", and "object does not have this function" -related js errors.

Here is what I have so far:
Sys.Application.add_load(ApplicationLoadHandler)

function ApplicationLoadHandler(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (!prm.get_isInAsyncPostBack())
{
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(CompleteRequest);
}
}
// initialize a queue
var myQueue = new Array();

function CompleteRequest(sender, args)
{
if(myQueue.length > 0)
{// fire correspond event again of the item cached
var control = $get(myQueue[0]);
setTimeout('__doPostBack(\'' + control.id + '\',\'\')', 0);
Array.removeAt(myQueue, 0);
}
}
function InitializeRequest(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();

if (prm.get_isInAsyncPostBack())
{
// if it's working on another request, cache the current item that cause the request
args.set_cancel(true);
Array.add(myQueue, args.get_postBackElement().id);
}
}

if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Even if this did work, it wouldn't do what I want it to do because '__doPostBack(\'' + control.id + '\',\'\' would strip out all of the eventargs that were sent along with my postback (for instance, if the user initiated the postback via mouse click) and turn "doPostBack('gridviewSomething', 'Select$1')" into "doPostBack('gridviewSomething')", which is clearly no good.

This code will properly interrupt postbacks and save them to queue, but upon callback and re-initiation I get problems. Anyone have any suggestions? I feel like this is so close and I am loosing my hair over it, so help is much appreciated.

Merry (early) Christmas.

http://disturbedbuddha.wordpress.com/2007/12/12/handling-multiple-asynchronous-postbacks/