Trigger jquery event after ajax in user control

2 posts, 0 answers
  1. ITS
    ITS avatar
    7 posts
    Member since:
    Feb 2014

    Posted 12 Mar 2015 Link to this post

    Hi,
    in few words the problem is:
    when i am trying to use $.event.trigger after an ajax request made with RadAjaxManager I am not able to catch the fired event in user controls.
    If i put the event handler in default.aspx there is no problem and the event is "catch" but in user control the hndler is never fired...

    Here my code, any suggestions? Thank you in advance...

    Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
            function onResponseEnd(sender, eventArgs) {
                console.log("response end");
                $.event.trigger({
                    type: "myEvent",
                    message: "event",
                    time: new Date()
                });
            }
        </script>
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <ClientEvents OnResponseEnd="onResponseEnd"></ClientEvents>
            <AjaxSettings>           
                <telerik:AjaxSetting AjaxControlID="ButtonAddItem">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListViewClips" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadButton ID="ButtonAddItem" runat="server" Text="Add item" OnClick="OnRadButtonClick"></telerik:RadButton>
            <telerik:RadListView ID="RadListViewClips" AllowPaging="True" runat="server" Visible="True" OnNeedDataSource="RadListViewClipsOnNeedDataSource"
                    allowsorting="true" ItemPlaceholderID="placeHolder" DataKeyNames="Id">
                 <%-- <ClientSettings>
                      <ClientEvents OnListViewCreated="test"></ClientEvents>
                  </ClientSettings>--%>
                      <LayoutTemplate>                                                               
                            <div id="placeHolder" runat="server">
                                <ul></ul>
                            </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li>
                           <%# Eval("Name") %><uc1:WebUserControl1 runat="server" id="WebUserControl1" />
                        </li>
                    </ItemTemplate>
     
                </telerik:RadListView>
        </div>
        </form>
    </body>
    </html>

    Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        private List<ItemState> CurrentDockStates
        {
            get
            {
                //Store the info about the added docks in the session. For real life
                // applications we recommend using database or other storage medium
                // for persisting this information.
                List<ItemState> currentDockStates = (List<ItemState>)Session["CurrentDockStatesMyPortal"];
                if (Equals(currentDockStates, null))
                {
                    currentDockStates = new List<ItemState>();
                    Session["CurrentDockStatesMyPortal"] = currentDockStates;
                }
                return currentDockStates;
            }
            set { Session["CurrentDockStatesMyPortal"] = value; }
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                RadListViewClips.DataSource = CurrentDockStates;
                RadListViewClips.DataBind();
            }
        }
     
        protected void RadListViewClipsOnNeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
        {
            RecreateItems();
        }
     
        private void RecreateItems()
        {
            var source = CurrentDockStates;
            RadListViewClips.DataSource = source;       
        }
     
        protected void OnRadButtonClick(object sender, EventArgs e)
        {
            CurrentDockStates.Add(new ItemState
                {
                    Name = "Prova",
                    Id = CurrentDockStates.Count
                });
            RadListViewClips.Rebind();
        }
    }
     
    internal class ItemState
    {
        public string Name { get; set; }
        public int Id { get; set; }
    }

    WebControl.ascx --- Here function myEventHandler is never Fired!!!
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="TelerikWebApp1.WebUserControl1" %>
    <script>
        $(document).on("myEvent", myEventHandler);
     
        function myEventHandler(e) {
            console.log("myEvent on: usercontrol");
    }
    </script>

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Mar 2015 Link to this post

    Hi,

    Can you please try to wrap the <script> tag into RadScriptBlock control and see of this makes any difference?
    Also you can try to register the script on the server as shown below:
    http://www.telerik.com/help/aspnet-ajax/ajax-execute-custom-javascript.html

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top