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

Recreate scripts after AJAX

RadAjax controls allow JavaScript to be evaluated after asynchronous requests to the server.

The example demonstrates how JavaScript code can be initialized on an AJAX request from an RadAjaxPanel. The three image buttons perform Ajax requests to the server that load code from an external JavaScript file. RadAjaxPanel automatically evaluates the loaded JavaScript. The JavaScript code contains some logic for browsing through a web galery of images.

The demo illustrates the ability of Telerik RadAjax to execute custom JavaScript code, which comes as a response from the server, thus giving you more flexibility to complete more specific or complex tasks on the client. The image buttons perform Ajax requests to the server that load code from an external JavaScript file where JavaScript objects are created on the fly.

Click on the image buttons to create image galeries.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxPanel.ApplicationScenarios.RecreateScripts.DefaultCS"Language="c#"  %>

<%@ 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">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
            <div class="module">
                <div class="buttonsWrapper">
                    <asp:ImageButton ID="ImageButton1" OnClick="ImageButton1_Click" ImageUrl="images/img_1.jpg"
                        Height="50px" Width="75px" AlternateText="Create Spring Image Galery" runat="server"></asp:ImageButton>
                    <asp:ImageButton ID="ImageButton2" OnClick="ImageButton2_Click" ImageUrl="images/img_1_bw.jpg"
                        Height="50px" Width="75px" AlternateText="Create Autumn Image Galery" runat="server"></asp:ImageButton>
                    <asp:ImageButton ID="ImageButton3" OnClick="ImageButton3_Click" ImageUrl="images/img_1_sepia.jpg"
                        Height="50px" Width="75px" AlternateText="Create Winter Image Galery" runat="server"></asp:ImageButton>
                </div>
                <div id="Container" class="contentWrapper">
                </div>
            </div>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="300">
        </telerik:RadAjaxLoadingPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance