New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Persisting JavaScript



RadAjax controls re-initialize JavaScript code after an AJAX request has been performed. This behavior is very important when working with third party controls inside the RadAjaxPanel that use rich JavaScript functionality.

The example contains a JavaScript code block within the RadAjaxPanel that is evaluated on page load. The code holds some logic for browsing through a web galery of images. When an AJAX request is performed, the RadAjaxPanel re-initializes the JavaScript code and as a result the custom functionality works properly.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AJAXExamplesCSharp.AJAX.Examples.Common.PersistJavaScript.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-custom">
        <div class="module">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" ClientEvents-OnResponseEnd="createScripts"
                runat="server" LoadingPanelID="LoadingPanel1">
                <telerik:RadButton RenderMode="Lightweight" ID="Button1" OnClick="Button1_Click" runat="server" Text="Start ajax request" CssClass="ajaxButton" Skin="Silk"></telerik:RadButton>
                <br />
                <br />
                <div id="container" class="containerWrapper">
                </div>
            </telerik:RadAjaxPanel>
        </div>
    </div>

    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="300" Skin="Default">
    </telerik:RadAjaxLoadingPanel>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance