Saturday, March 24, 2012

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

No comments:

Post a Comment