Monday, March 26, 2012

Updating an UpdatePanel with Javascript

I've done a lot of googling to find a fix for this - I've found lots of posts about people using something similar however no one gives a clear example of how to do it.

I've created a cut down version of what we're trying to do and you can clearly see the problem with it if you load the test file.

Ok first we have an update panel with a literal and an asp:button with a server onclick function to change the literal text when pushed. Then we have a standard HTML button with a javascript command to click the asp:button. What happens is when the html button is outside the update panel the whole page posts back. When it's inside the update panel it looks as if the update panel is refreshed but the literal valuedoesn't change. I say that the update panel looks like it's being refreshed because previously we had an updateprogress control on this page and it was showing that it was updating.

Anyone that knows what's going on or can suggest another solution?

<%@dotnet.itags.org. Page Language="VB" %><script runat="server" >Sub Page_Load(ByVal SenderAs Object,ByVal eAs EventArgs)If Not Page.IsPostBackThenliTesting.Text ="before postback"End IfEnd SubProtected Sub btnUpdate_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)liTesting.Text ="after postback"End Sub</script><!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" xml:lang="en"><head runat="server"><title>UpdatePanel Test</title></head><body><form runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /><asp:UpdatePanel runat="server" ID="UpdatePanel1"><ContentTemplate><asp:Literal runat="server" id="liTesting" /><asp:Button ID="btnUpdate" runat="server" OnClick="btnUpdate_Click" text="asp button" /></ContentTemplate></asp:UpdatePanel><input type="button" onclick="javascript: document.getElementById('<%=btnUpdate.ClientID%>').click();" value="html button" /></form></body></html>

No one's encountered this before?

*shameless bump*


Not having any problems with your sample. It fires the event and no refresh happens.

the only thing I can see doing is a little tweaking of your js

onclick="javascript: $get('btnUpdate').click();"

Kodo, please excuse my ignorance, but what is the meaning and syntax of the $get function? I must admit I never saw it before...


$get is a crossbrowser version (more or less) of document.getElementByID that is introduced with ASP.NET AJAX. I love it.


Thanks a million. I guess I'll start using it.

Kodo - thanks for reminding me about the $get call - we've only just switched from atlas to microsoft ajax yesterday and I just upgraded the old code from <atlas:... to <asp:...

I just tried the example again and it turns out the refresh ONLY happens in Firefox (I'm using 1.5.0.8 currently). It must be something to do with how Firefox determines if a user clicks the button or if a script does.


I've been trying to do something similar using a LinkButton (not standard form button).

$get works great, but the click event is not accesible using firefox 2. Im guessing this is a security thing, the fox is throwing an error

Error: $get("lnkDoPostBack").click is not a function
Source File:http://localhost:1667/AjaxDigiguru/Display/ImageEdit.aspx
Line: 82

I made a mini workaround that posts the page back if you have firefox, rather than causing an error.

Dim strScriptAsString ="function UpdateThumbnail(x,y,w,h) { " & vbNewLine & _

" if($get('lnkDoPostBack').click){ " & vbNewLine & _" $get('lnkDoPostBack').click();} else {" & vbNewLine & _" document.forms[0].submit()}" & vbNewLine & _" }"

Is there a more elegant fix? I'd love to call an UpdatePanel from a javascript function cross browser. I'm sure theres a real solution, rather than a bodge.


Hi,

I was seeing the same complete page submit on the HTML button in FireFox 1.5. As a test I modified things to manually do a __PostBack() on the asp:button within the panel and that seems to work as expected (a partial page update):

<%@.PageLanguage="VB" %>
<scriptrunat="server"
Sub Page_Load(ByVal SenderAsObject,ByVal eAs EventArgs)

IfNot Page.IsPostBackThen
liTesting.Text ="before postback"
EndIf

EndSub

ProtectedSub btnUpdate_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)

liTesting.Text ="after postback " & system.datetime.now().tostring()

EndSub

</script>

<!

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"xml:lang="en">
<headid="Head1"runat="server">
<title>UpdatePanel Test</title>
</head
<body
<formid="Form1"runat="server"
<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"/
<scriptlanguage="javascript">
function htmlPostBack()
{
__doPostBack('<%=btnUpdate.ClientId%>','');
}
</script>

<

asp:UpdatePanelrunat="server"ID="UpdatePanel1">
<ContentTemplate>
<asp:Literalrunat="server"id="liTesting"/>
<asp:ButtonID="btnUpdate"runat="server"OnClick="btnUpdate_Click"text="asp button"/>
</ContentTemplate>
</asp:UpdatePanel>

<

inputtype="button"onclick="htmlPostBack();"value="html button"/
</form>
</body>
</html
Shawn


Cheers Shawn. Works a treat, but bear in mind that the documentation says it's unsupported, you might need to change it when they release the final version!

No comments:

Post a Comment