34839

Register javascript function after AJAX load (using UpdatePanel)

Question:

In an <asp:UpdatePanel> (in my ASP.NET (4.0) web application) I have both HTML and javascript variables/functions... for example, something along the lines of this...

Note that the javascript/HTML is only to be displayed when the UpdatePanel is updated via an AJAX update... it is not displayed on initial page load

<asp:UpdatePanel runat="server" id="udpMyPanel"> <ContentTemplate> <%If Page.IsPostBack Then%> <script type="text/javascript"> var myVar = "<%=CodeBehindVariable.ToString()%>"; function myFnc() { ... } </script> <a href="javascript:void(0);" onclick="myFnc();return false;">Hello World</a> <%End If%> </ContentTemplate> </asp:UpdatePanel>

The problem is that when the UpdatePage AJAX is loaded, the javascript within the panel is not available to the browser... so calling myFnc() doesn't work, because the function isn't registered. Nor the myVar variable.

Without putting the entire script into a string, and registering it with ScriptManager.RegisterStartupScript in the codebehind, is there any way to register this mark-up based javascript once the panel has been loaded by the browser?

Answer1:

It's not nice, it's not pretty, but this works...

Firstly, I've wrapped the javascript in a <asp:Panel> element.

<asp:UpdatePanel runat="server" id="udpMyPanel"> <ContentTemplate> <%If Page.IsPostBack Then%> <asp:Panel runat="server" id="pnlJavascript"> <script type="text/javascript"> var myVar = "<%=CodeBehindVariable.ToString()%>"; function myFnc() { ... } </script> </asp:Panel> <a href="javascript:void(0);" onclick="myFnc();return false;">Hello World</a> <%End If%> </ContentTemplate> </asp:UpdatePanel>

Then on the PreRender in the code behind, I've captured the contents of the panel, removed the HTML tags, and registered it as script. Then the panel has been hiden as there is no point that being passed to the browser.

Private Sub Page_PreRender(sender As Object, e As System.EventArgs) Handles Me.PreRender Dim sManager As ScriptManager = ScriptManager.GetCurrent(Me.Page) If sManager IsNot Nothing AndAlso sManager.IsInAsyncPostBack Then ' If AJAX postback, hide the DIV and use its content as the Dim sb As New System.Text.StringBuilder pnlJavascript.RenderControl(New HtmlTextWriter(New System.IO.StringWriter(sb))) Dim script As String = sb.ToString() ' Remove div tags (generated from the panel) Dim startTag As String = String.Format("<div id=""{0}"">", pnlJavascript.ClientID) script = script.Replace(startTag, "").Replace("</div>", "") ' Remove script tags script = script.Replace("<script type=""text/javascript"">", "").Replace("</script>", "") ' Register it ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "registerJS", script, True) ' Hide it pnlJavascript.Visible = False End If End Sub

Recommend

  • Eventbus onMessageEvent not getting called
  • Javascript (MVC) load image (byte array) from database
  • Send data from edittext to listview
  • Watson Conversation - Why is the ANYTHING ELSE node not chosen
  • pickle.PicklingError: args[0] from __newobj__ args has the wrong class with hadoop python
  • Jquery Mobile pageLoading() Method how does it work?
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Simulate click Geckofx vb,net
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • HTML download movie download link
  • MySQL WHERE-condition in procedure ignored
  • Where to put my custom functions in Wordpress?
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Web-crawler for facebook in python
  • QuartzCore.framework for Mono Develop
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Arrays break string types in Julia
  • How to format a variable of double type
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • using HTMLImports.whenReady not working in chrome
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • Bitwise OR returns boolean when one of operands is nil
  • EntityFramework adding new object to nested object collection
  • sending mail using smtp is too slow
  • Checking variable from a different class in C#
  • Django query for large number of relationships
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • failed to connect to specific WiFi in android programmatically
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • How can I use threading to 'tick' a timer to be accessed by other threads?